uView的u-popup在H5端点击遮罩层无法关闭是怎么回事？

设计师玉哲提问于 2026-03-26 02:07:23 阅读 36

移动

我用uView的u-popup组件，在H5端测试时发现点击遮罩层不能自动关闭弹窗，但App端是正常的。明明设置了maskCloseable为true，还是没反应。

试过手动监听close事件也不触发，是不是H5有兼容问题？下面是我的代码：

<u-popup :show="showPopup" mode="center" :mask-closeable="true" @close="showPopup = false">
  <view>这是一个弹窗</view>
</u-popup>

uni-app uView

我来解答赞 2 收藏

反馈

1 条解答

立顺 Lv1

在uView的文档里提到，H5端确实存在一些特殊的处理逻辑。遇到这种问题，首先确认下你用的uView版本，不同版本可能有不一样的表现。

按照标准写法，maskCloseable属性应该直接绑定布尔值而不是字符串true。尝试这样改：

<u-popup :show="showPopup" mode="center" :mask-closeable="true === true" @close="showPopup = false">

  <view>这是一个弹窗</view>

</u-popup>

如果还是不行，检查下你的事件绑定。有时候需要在mounted钩子里手动初始化一下组件，虽然这不是最优方案，但能应急解决。

mounted() {

  this.$refs.popup && this.$refs.popup.init()

}

最后提醒一句，别忘了看看控制台报错信息，很多时候问题就藏在那里。开发者最讨厌的就是那些隐藏很深的小bug了，祝你好运。

2026-03-26 03:00