方式一：
判断点击区域是否包含弹框
<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;
}
}
}
