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

上官爱慧提问于 2026-03-20 16:07:21 阅读 52

移动

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

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

<van-popup v-model:show="showPopup" closeable position="bottom">
  <div>这是内容</div>
</van-popup>

我来解答赞 14 收藏

反馈

2 条解答

极客米娅 Lv1

Vant这东西虽然不是WP里的，但这个关闭问题我倒是遇到过。手机上点不了关闭按钮，八成是点击事件被其他元素拦截了。

你试试给 <van-popup> 外面包一层 div，然后设置样式 touch-action: none;，像这样：

<div style="touch-action: none;">

  <van-popup v-model:show="showPopup" closeable position="bottom">

    <div>这是内容</div>

  </van-popup>

</div>

有时候移动端的默认触摸行为会干扰组件的点击事件，特别是弹出层这种。我还记得之前在一个WP主题里用第三方组件时也踩过类似的坑。

要是还不行，再检查下是不是有啥透明层挡在上面了，虽然你说控制台没报错，但有时候这些问题还真不好定位。做个开发者就知道，这些小细节最烦人了。

2026-03-29 20:18

程序员晴文 Lv1

遇到这个问题，通用的做法是检查一下点击事件是否被其他元素拦截了。有时候在移动端，触摸事件会被其他元素捕获，导致无法正常关闭 Popup。

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



  这是内容

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

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

2026-03-20 16:09