Vant 的 Popup 弹出层怎么在真机上点不消失?

上官爱慧 阅读 3

我在用 Vant 的 Popup 组件,设置了 closeable 属性,浏览器里点关闭按钮能正常关闭,但在手机上点没反应,是啥原因?

试过加 z-index 也没用,控制台也没报错,就是点关闭叉号没效果。

<van-popup v-model:show="showPopup" closeable position="bottom">
  <div>这是内容</div>
</van-popup>
我来解答 赞 1 收藏
二维码
手机扫码查看
1 条解答
程序员晴文
遇到这个问题,通用的做法是检查一下点击事件是否被其他元素拦截了。有时候在移动端,触摸事件会被其他元素捕获,导致无法正常关闭 Popup。

你可以尝试给 Popup 添加一个 click-stop 属性,防止事件冒泡被其他元素干扰。修改后的代码如下:


这是内容



另外,确保你的 showPopup 变量绑定正确,并且在方法中能够正确切换其值。有时候逻辑问题也会导致界面响应异常。

如果加了 click-stop 之后还是不行,可以再检查一下是否有其他 JavaScript 代码阻止了默认行为,或者在移动端做了特殊处理。
点赞
2026-03-20 16:09