首頁在外層容器里面取一個名字為main，即ref='main',當bankSwitch為true的時候，彈窗出現

<div ref='main'><div 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', this.bodyCloseMenus); },2.第二種做法

首頁在外層容器里面定義一個阻止冒泡事件，即@click.stop,當bankSwitch為true的時候，彈窗出現

<div @click.stop><div v-if='bankSwitch == true'>你好我是彈窗里面的內容部分 </div></div>

所觸發的事件如下：

首頁，先在全局創建一個點擊事件:bodyCloseMenus

事件作用：當彈窗出現的時候（self.bankSwitch == true），點擊空白區域將彈窗關閉（self.bankSwitch = false）

最后，在頁面注銷前，將點擊事件給移除

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 點擊空白區域關閉彈窗的資料請關注好吧啦網其它相關文章！