APP
方式一：
判斷點擊區(qū)域是否包含彈框
<div class="selectedBorder" ref="main">
<div class="bankItem" v-if="bankSwitch == true">
你好我是彈窗里面的內(nèi)容部分
</div>
</div>
監(jiān)聽點擊事件
mounted() {
// 監(jiān)聽全局點擊事件
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">
你好我是彈窗里面的內(nèi)容部分
</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中實現(xiàn)點擊空白區(qū)域關(guān)閉彈窗的兩種方法??
本文摘自 ：https://blog.51cto.com/u
