小程序
小游戏
企业微信
微信支付
扫描小程序码分享
此代码放到van-overlay中不显示,放到页面的div元素中按钮就可以出现,这是怎么回事?
1 个回答
加粗
标红
插入代码
插入链接
插入图片
上传视频
你可以尝试将`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`的外部,并使用绝对定位将其放置在底部。这样,按钮应该可以正常显示在弹窗中。
你好,麻烦通过点击下方“反馈信息”按钮,提供出现问题的。
关注后,可在微信内接收相应的重要提醒。
请使用微信扫描二维码关注 “微信开放社区” 公众号
你可以尝试将`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`的外部,并使用绝对定位将其放置在底部。这样,按钮应该可以正常显示在弹窗中。