收藏
回答

请教下wx-open-launch-weapp在van-overlay中按钮不出现,是什么回事?

此代码放到van-overlay中不显示,放到页面的div元素中按钮就可以出现,这是怎么回事?





最后一次编辑于  2023-10-15
回答关注问题邀请回答
收藏

1 个回答

  • CRMEB
    CRMEB
    2023-10-16

    你可以尝试将`wx-open-launch-weapp`组件放在`van-overlay`的外部,然后使用绝对定位来调整其位置。以下是一个示例代码:


    <template>
      <div>
        <van-button @click="showOverlay">显示弹窗</van-button>
        <van-overlay v-model="show" position="bottom">
          <div class="overlay-content">
            <wx-open-launch-weapp></wx-open-launch-weapp>
          </div>
        </van-overlay>
      </div>
    </template>
    
    <script>
    import { VanButton, VanOverlay } from 'vant';
    import WxOpenLaunchWeapp from '@/components/WxOpenLaunchWeapp.vue';
    
    export default {
      components: {
        VanButton,
        VanOverlay,
        WxOpenLaunchWeapp
      },
      data() {
        return {
          show: false
        };
      },
      methods: {
        showOverlay() {
          this.show = true;
        }
      }
    };
    </script>
    
    <style scoped>
    .overlay-content {
      position: relative;
    }
    
    wx-open-launch-weapp {
      position: absolute;
      bottom: 0;
      left: 0;
    }
    </style>
    


    在这个示例中,我们将`wx-open-launch-weapp`组件放在了`van-overlay`的外部,并使用绝对定位将其放置在底部。这样,按钮应该可以正常显示在弹窗中。

    2023-10-16
    有用
    回复
登录 后发表内容