点击红色框外的遮罩层区域关闭遮罩层
方法一：
关键点：@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>
