vue中實現點選空白區域關閉彈窗的兩種方法
阿新 • • 發佈:2021-01-01
1. 第一種做法
首頁在外層容器裡面取一個名字為main,即ref="main",當bankSwitch為true的時候,彈窗出現
<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)
最後,在頁面登出前,將點選事件給移除
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",
2.第二種做法
首頁在外層容器裡面定義一個阻止冒泡事件,即@click.stop,當bankSwitch為true的時候,彈窗出現
<div class="selectedBorder" @click.stop> <div class="bankItem" v-if="bankSwitch == true"> 你好我是彈窗裡面的內容部分 </div> </div>
所觸發的事件如下:
首頁,先在全域性建立一個點選事件:bodyCloseMenus
事件作用:當彈窗出現的時候(self.bankSwitch == true),點選空白區域將彈窗關閉(self.bankSwitch = false)
最後,在頁面登出前,將點選事件給移除
mounted() { document.addEventListener("click",methods:{ bodyCloseMenus(e) { let self = this; if (self.bankSwitch == true){ self.bankSwitch = false; } },
以上就是vue中實現點選空白區域關閉彈窗的兩種方法的詳細內容,更多關於vue 點選空白區域關閉彈窗的資料請關注我們其它相關文章!