vue.js:点击空白区域关闭弹窗
2022-04-29 14:04:24


方式一:

判断点击区域是否包含弹框

<div class="selectedBorder" ref="main">
<div class="bankItem" v-if="bankSwitch == true">
你好我是弹窗里面的内容部分
</div>
</div>

监听点击事件

mounted() {
// 监听全局点击事件
document.addEventListener("click", this.bodyCloseMenus);
},

beforeDestroy() {
// 在页面注销前,将点击事件给移除
document.removeEventListener("click", this.bodyCloseMenus);
},

methods:{
bodyCloseMenus(e) {
let self = this;
if (this.$refs.main && !this.$refs.main.contains(e.target)) {
if (self.bankSwitch == true){
self.bankSwitch = false;
}
}
}

方式二

阻止冒泡事件 ​​@click.stop​

<div class="selectedBorder" @click.stop>
<div class="bankItem" v-if="bankSwitch == true">
你好我是弹窗里面的内容部分
</div>
</div>
mounted() {
document.addEventListener("click", this.bodyCloseMenus);
},
beforeDestroy() {
document.removeEventListener("click", this.bodyCloseMenus);
},

methods:{
bodyCloseMenus(e) {
let self = this;
if (self.bankSwitch == true){
self.bankSwitch = false;
}
}
}


参考
​vue中实现点击空白区域关闭弹窗的两种方法​




本文摘自 :https://blog.51cto.com/u


更多科技新闻 ......