vue中實現(xiàn)點擊空白區(qū)域關(guān)閉彈窗的兩種方法
首頁在外層容器里面取一個名字為main,即ref='main',當(dāng)bankSwitch為true的時候,彈窗出現(xiàn)
<div ref='main'><div v-if='bankSwitch == true'>你好我是彈窗里面的內(nèi)容部分 </div></div>
所觸發(fā)的事件如下:
首頁,先在全局創(chuàng)建一個點擊事件:bodyCloseMenus
事件作用:當(dāng)點擊main容器的時候(this.refs.main && !this.refs.main.contains(e.target)),并且彈窗出現(xiàn)的時候(self.bankSwitch == true),點擊空白區(qū)域?qū)棿瓣P(guān)閉(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,當(dāng)bankSwitch為true的時候,彈窗出現(xiàn)
<div @click.stop><div v-if='bankSwitch == true'>你好我是彈窗里面的內(nèi)容部分 </div></div>
所觸發(fā)的事件如下:
首頁,先在全局創(chuàng)建一個點擊事件:bodyCloseMenus
事件作用:當(dāng)彈窗出現(xiàn)的時候(self.bankSwitch == true),點擊空白區(qū)域?qū)棿瓣P(guān)閉(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中實現(xiàn)點擊空白區(qū)域關(guān)閉彈窗的兩種方法的詳細內(nèi)容,更多關(guān)于vue 點擊空白區(qū)域關(guān)閉彈窗的資料請關(guān)注好吧啦網(wǎng)其它相關(guān)文章!
相關(guān)文章:
