在这里插入图片描述
点击红色框外的遮罩层区域关闭遮罩层
方法一:
关键点:@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>
Logo

前往低代码交流专区

更多推荐