uniapp, WeChat applet: click the blank/mask to close the pop-up window

Key points: (click the blank area to close the pop-up window, the same reason)

• @click.stop: Used to stop bubbling.
  • Adding @click.stop within the label range, clicking any area (including the click event of @click) will not close the popup window. The pop-up window will be closed if it is outside the range of the label.
  • Events such as @click in the @click.stop tag: If there is a code to close the pop-up window in the event, (does not affect) the pop-up window can be closed.
• (in the html below) mask (class="mask" label) add @click="selectQues=false": used to click on the mask to close the pop-up window

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