vue 点击遮罩层功能区以外的地方关闭遮罩层

点击红色框外的遮罩层区域关闭遮罩层
方法一：
关键点：@click=“close($event)” ref=“msk”

<div v-if="popup.winning" class="coupon-popup" @touchmove.prevent @click="close($event)">
	<div class="popup-content" ref="msk">
		<img class="coupon-page" :src="popup.couponpage" alt="" />
		<div class="popup-title">
			<img src="../../../static/luckdraw/popuptitle.png" alt="" />
		</div>
		<div class="popup-text">
			<div class="coupon-content">{{ popup.couponContent }}</div>
			<div class="coupon-name">{{ popup.couponName }}</div>
		</div>
		<div class="popup-prompt">{{ popup.couponprompt }}</div>
		<div class="popup-btn" @click="couponTrue">
			<img src="../../../static/luckdraw/popupbtn.png" alt="" />
		</div>
	</div>
</div>

popup: {
	winning: false, //控制弹窗显隐
}
close(ev){
	if (!this.$refs.msk.contains(ev.target)) {
　　　　　　this.popup.winning=false
　　}
}

.coupon-popup {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(000, 000, 000, 0.8);
}
.popup-content {
  width: 5.8rem;
  height: 6.18rem;
  position: absolute;
  top: 3.35rem;
  left: 50%;
  margin-left: -2.9rem;
}

方法二：阻止事件冒泡

<div v-if="popup.winning" class="coupon-popup" @touchmove.prevent @click="close">
	<div class="popup-content" @click="closes($event)">
		<img class="coupon-page" :src="popup.couponpage" alt="" />
		<div class="popup-title">
			<img src="../../../static/luckdraw/popuptitle.png" alt="" />
		</div>
		<div class="popup-text">
			<div class="coupon-content">{{ popup.couponContent }}</div>
			<div class="coupon-name">{{ popup.couponName }}</div>
		</div>
		<div class="popup-prompt">{{ popup.couponprompt }}</div>
		<div class="popup-btn" @click="couponTrue">
			<img src="../../../static/luckdraw/popupbtn.png" alt="" />
		</div>
	</div>
</div>
//点击弹窗蒙层关闭弹窗
close() {
    this.popup.winning=false
},
closes(event){
    event.stopPropagation()
    event.cancelBubble = true
}

方法三：最简便 @click.stop

<div v-if="popup.winning" class="coupon-popup" @touchmove.prevent @click="close">
	<div class="popup-content" @click.stop>
		<img class="coupon-page" :src="popup.couponpage" alt="" />
		<div class="popup-title">
			<img src="../../../static/luckdraw/popuptitle.png" alt="" />
		</div>
		<div class="popup-text">
			<div class="coupon-content">{{ popup.couponContent }}</div>
			<div class="coupon-name">{{ popup.couponName }}</div>
		</div>
		<div class="popup-prompt">{{ popup.couponprompt }}</div>
		<div class="popup-btn" @click="couponTrue">
			<img src="../../../static/luckdraw/popupbtn.png" alt="" />
		</div>
	</div>
</div>