1. 第一種做法
首頁在外層容器里面取一個(gè)名字為main，即ref="main",當(dāng)bankSwitch為true的時(shí)候，彈窗出現(xiàn)
|
1
2
3
4
5
|
<div class="selectedBorder" ref="main"> <div class="bankItem" v-if="bankSwitch == true"> 你好我是彈窗里面的內(nèi)容部分 </div></div> |
所觸發(fā)的事件如下：
首頁，先在全局創(chuàng)建一個(gè)點(diǎn)擊事件:bodyCloseMenus
事件作用：當(dāng)點(diǎn)擊main容器的時(shí)候（this.refs.main && !this.refs.main.contains(e.target)），并且彈窗出現(xiàn)的時(shí)候（self.bankSwitch == true），點(diǎn)擊空白區(qū)域?qū)棿瓣P(guān)閉（self.bankSwitch = false）
最后，在頁面注銷前，將點(diǎn)擊事件給移除
|
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.第二種做法
首頁在外層容器里面定義一個(gè)阻止冒泡事件，即@click.stop,當(dāng)bankSwitch為true的時(shí)候，彈窗出現(xiàn)
|
1
2
3
4
5
|
<div class="selectedBorder" @click.stop> <div class="bankItem" v-if="bankSwitch == true"> 你好我是彈窗里面的內(nèi)容部分 </div></div> |
所觸發(fā)的事件如下：
首頁，先在全局創(chuàng)建一個(gè)點(diǎn)擊事件:bodyCloseMenus
事件作用：當(dāng)彈窗出現(xiàn)的時(shí)候（self.bankSwitch == true），點(diǎn)擊空白區(qū)域?qū)棿瓣P(guān)閉（self.bankSwitch = false）
最后，在頁面注銷前，將點(diǎn)擊事件給移除
|
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中實(shí)現(xiàn)點(diǎn)擊空白區(qū)域關(guān)閉彈窗的兩種方法的詳細(xì)內(nèi)容，更多關(guān)于vue 點(diǎn)擊空白區(qū)域關(guān)閉彈窗的資料請關(guān)注服務(wù)器之家其它相關(guān)文章！
原文鏈接：https://juejin.cn/post/6911863086487961607
