重点:(点击空白区域关闭弹窗,同理)
- @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
data() {
return {
selectQues: false,
}
}
methods: {
getIndex(ind) {
console.log(ind)
}
}
css
// 蒙版
.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;
}