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"><im
·
点击红色框外的遮罩层区域关闭遮罩层
方法一:
关键点:@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>
更多推荐
已为社区贡献21条内容
所有评论(0)