1. 第一种做法
首页在外层容器里面取一个名字为main,即ref="main",当bankSwitch为true的时候,弹窗出现
1
2
3
4
5
|
< div class = "selectedBorder" ref = "main" >
< div class = "bankItem" v-if = "bankSwitch == true" >
你好我是弹窗里面的内容部分
</ div >
</ div >
|
所触发的事件如下:
首页,先在全局创建一个点击事件:bodyCloseMenus
事件作用:当点击main容器的时候(this.refs.main && !this.refs.main.contains(e.target)),并且弹窗出现的时候(self.bankSwitch == true),点击空白区域将弹窗关闭(self.bankSwitch = false)
最后,在页面注销前,将点击事件给移除
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
mounted() {
document.addEventListener( "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 ;
}
}
},
beforeDestroy() {
document.removeEventListener( "click" , this .bodyCloseMenus);
},
|
2.第二种做法
首页在外层容器里面定义一个阻止冒泡事件,即@click.stop,当bankSwitch为true的时候,弹窗出现
1
2
3
4
5
|
< div class = "selectedBorder" @click.stop>
< div class = "bankItem" v-if = "bankSwitch == true" >
你好我是弹窗里面的内容部分
</ div >
</ div >
|
所触发的事件如下:
首页,先在全局创建一个点击事件:bodyCloseMenus
事件作用:当弹窗出现的时候(self.bankSwitch == true),点击空白区域将弹窗关闭(self.bankSwitch = false)
最后,在页面注销前,将点击事件给移除
1
2
3
4
5
6
7
8
9
10
11
12
13
|
mounted() {
document.addEventListener( "click" , this .bodyCloseMenus);
},
methods:{
bodyCloseMenus(e) {
let self = this ;
if (self.bankSwitch == true ){
self.bankSwitch = false ;
}
},
beforeDestroy() {
document.removeEventListener( "click" , this .bodyCloseMenus);
},
|
以上就是vue中实现点击空白区域关闭弹窗的两种方法的详细内容,更多关于vue 点击空白区域关闭弹窗的资料请关注服务器之家其它相关文章!
原文链接:https://juejin.cn/post/6911863086487961607