重点：（点击空白区域关闭弹窗，同理）
-
@click.stop：用于阻止冒泡。
- 添加@click.stop的标签范围内，点击任何区域（包括@click的点击事件）不会关闭弹窗。标签范围外，会关闭弹窗。
- @click.stop标签内的@click等事件：如果事件内有关闭弹窗的代码，(不影响)可关闭弹窗。
- （下面html中）蒙版（class="mask" 的标签）添加@click="selectQues=false"：用于点击蒙版，关闭弹窗
html：
<text @click="selectQues=true">打开弹窗</text>
<!--mask:蒙版。 功能：点击蒙版关闭弹窗 ，添加 @click.stop 阻止冒泡 -->
<view class="mask" v-if="selectQues" @click="selectQues=false">
<view @click.stop>
<!-- 点击此(标签)区域内事件及空白处，不关闭弹窗 -->
<view @click="selectQues=false">关闭</view>
<view style="height:400rpx">
<view @click="getIndex(0)">我是展示区域的内容1</view>
<view @click="getIndex(1)">我是展示区域的内容2</view>
<view @click="getIndex(2)">我是展示区域的内容3</view>
<view @click="getIndex(3)">我是展示区域的内容4</view>
</view>
</view>
</view>
js文章来源：https://www.toymoban.com/news/detail-502902.html
data() {
return {
selectQues: false,
}
}
methods: {
getIndex(ind) {
console.log(ind)
}
}
css文章来源地址https://www.toymoban.com/news/detail-502902.html
// 蒙版
.mask {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: rgba($color: #090909, $alpha: 0.62);
z-index: 1;
display: flex;
justify-content: center;
align-items: center;
}
到了这里，关于uniapp、微信小程序：点击空白/蒙版关闭弹窗的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
