uni-app 点击蒙版层时关闭自定义弹窗

@click.stop:用于阻止冒泡

@click.stop 标签范围内,点击任何区域(包括 @click 点击事件)都不会关闭弹窗。标签范围外会关闭弹窗

@click.stop 标签内的 @click 等事件:如果事件内有关闭弹窗的代码可关闭弹窗

在 template 中

html 复制代码
<view class="pop-box" v-if="showPop" @touchmove.stop.prevent="toMoveHandle" @click="showPop = false">
  <view @click.stop>
    弹窗内容
  </view>
</view>
<view @click="showPop = true">打开弹窗</view>

在 script 中

javascript 复制代码
data() {
  return {
    showPop: false,
  }
}

toMoveHandle 方法请查看:uniapp 禁止遮罩层下的页面滚动

在 style 中

css 复制代码
.pop-box {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.4);
  z-index: 999;
}
相关推荐
FinelyYang4 小时前
uniapp+unipush2.0+WebRTC实现h5一对一视频通话
uni-app·音视频·webrtc
天蓝色的鱼鱼8 小时前
mescroll老用户亲测z-paging:这些功能让我果断切换!
前端·uni-app
anyup8 小时前
🔥100+ 天,已全面支持鸿蒙!uView Pro 近期更新盘点及未来计划
前端·uni-app·harmonyos
半兽先生19 小时前
uniapp高性能ui框架uni-ui
ui·uni-app
qq_3168377520 小时前
uniapp 观察列表每个元素的曝光时间
前端·javascript·uni-app
iOS阿玮1 天前
打个广告,帮忙招一个iOS开发的扛把子~
uni-app·app·apple
Cerrda1 天前
🌟让你的uniapp应用拥有更现代的交互体验,一个支持滚动渐变透明的导航栏组件🌟
uni-app
2501_916007471 天前
iOS 应用性能测试的工程化流程,构建从指标采集到问题归因的多工具协同测试体系
android·ios·小程序·https·uni-app·iphone·webview
00后程序员张1 天前
iOS 抓不到包怎么办?从 HTTPS 解密、QUIC 排查到 TCP 数据流分析的完整解决方案
android·tcp/ip·ios·小程序·https·uni-app·iphone
前端互助会1 天前
UNI-APP开发APP避坑指南:这些关键事项你必须掌握
uni-app