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>

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

vue自定义弹窗dialog，vue 点击遮罩层功能区以外的地方关闭遮罩层
vue自定义弹窗dialog,vue 点击遮罩层功能区以外的地方关闭遮罩层 1.示例展示 2.代码 <template><div class="content"& ...
jq点击按钮打开和关闭弹出层，点击除了当前按钮以外的地方关闭弹出层
1.html <a id="more" οnclick="moreFun()">更多</a> <ul id="moreL ...
点击弹出窗口外任意地方关闭弹出窗口
问:如何在点击弹出窗口外其他地方时关闭弹出窗口? 答:使用FlexMouseEvent'sMOUSE_DOWN_OUTSIDE事件.用户点击弹出窗口的外部时,会分发此事件.只需要在popUpWindo ...
php任意地方关闭弹窗,vue和jq中实现点击任意地方关闭弹窗
有时候开发中会遇到这样一个需求点击任意地方关闭弹窗 1.先用jq实现效果 // 点击任意地方关闭遮罩层除了指定区域 $('#最大的父容器区域').bind('click', function(e ...
点击遮罩层的背景关闭遮罩层
开发工具与关键技术:Adobe Dreamweaver CC 作者:黄灿撰写时间:2019.1.16 在模仿华为官方网页的练习当中我发现华为官网中有一个遮罩层是随便点击遮罩层的背景也能关闭掉遮罩层, ...
点击遮罩层的背景关闭遮罩层（HTML）
在模仿华为官方网页的练习当中我发现华为官网中有一个遮罩层是随便点击遮罩层的背景也能关闭掉遮罩层,但唯独点击内容区域不会关闭掉遮罩层.于是我开始模仿这个写案例,连内容也一模一样(因为这个练习就是要写出和 ...
点击页面空白处就关闭某个层是怎么做到的
如果用document事件的话,那点那个层里面也会触发,这不是想要的结果,怎么能做到点击除了那个层内部的区域外的任何地方,就触发事件 --------------------------------- ...
Java实现点击导出excel页面遮罩屏蔽，下载完成后解除遮罩
一.问题场景最近在做数据统计功能,需求是导出大数据量的excel,时间间隔较长,大概需要十秒左右,点击导出后,页面没有做任何处理,用户也不知道是否正在导出:如果没有做交互上的限制,用户可以一直点击导 ...
Vue导航点击路由跳转后样式不变
Vue导航点击路由跳转后样式不变 <template><ul><li :class="{active:isActive==1}" @click=&qu ...

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

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

最新文章

热门文章