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;
}
相关推荐
iOS阿玮4 小时前
AppStore卡审依旧存在,预计下周将逐渐恢复常态!
uni-app·app·apple
郑州光合科技余经理5 小时前
开发实战:海外版同城o2o生活服务平台核心模块设计
开发语言·git·python·架构·uni-app·生活·智慧城市
行走的陀螺仪5 小时前
在UniApp H5中,实现路由栈的持久化
前端·javascript·uni-app·路由持久化·路由缓存策略
影子打怪5 小时前
uniapp通过plus.geolocation.watchPosition获取的坐标格式转换
uni-app
忒可君5 小时前
2026新年第一篇:uni-app + AI = 3分钟实现数据大屏
前端·vue.js·uni-app
行走的陀螺仪5 小时前
UniApp 横向可滚动 Tab 组件开发详解
uni-app·封装组件·tabs·自定义封装组件·可滚动组件tab
00后程序员张6 小时前
在 iPhone 上进行 iOS 网络抓包的实践经验
android·ios·小程序·https·uni-app·iphone·webview
2501_915918416 小时前
介绍如何在电脑上查看 iPhone 和 iPad 的完整设备信息
android·ios·小程序·uni-app·电脑·iphone·ipad
2501_916008896 小时前
没有 Mac 如何在 Windows 上创建 iOS 应用描述文件
android·macos·ios·小程序·uni-app·iphone·webview
Rysxt_17 小时前
uni-app路由跳转完全指南:从基础到高级实践
uni-app