uniapp、微信小程序：点击空白/蒙版关闭弹窗

重点：（点击空白区域关闭弹窗，同理）

• @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;
}