vue.js:点击空白区域关闭弹窗
方式一:判断点击区域是否包含弹框<div class="selectedBorder" ref="main"><div class="bankItem" v-if="bankSwitch == true">你好我是弹窗里面的内容部分</div></div>监听点击事件mounted() {// 监听全局点击事件document.addEventLis
·
方式一:
判断点击区域是否包含弹框
<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;
}
}
}
更多推荐
已为社区贡献51条内容
所有评论(0)