vue中實現(xiàn)點擊空白區(qū)域關閉彈窗的兩種方法
更新時間：2020年12月30日 11:42:55 作者：rong
這篇文章主要介紹了vue中實現(xiàn)點擊空白區(qū)域關閉彈窗的兩種方法，幫助大家更好的理解和使用vue框架，感興趣的朋友可以了解下
1. 第一種做法
首頁在外層容器里面取一個名字為main，即ref="main",當bankSwitch為true的時候，彈窗出現(xiàn)
<div class="selectedBorder" ref="main"> <div class="bankItem" v-if="bankSwitch == true"> 你好我是彈窗里面的內容部分 </div> </div>
所觸發(fā)的事件如下：
首頁，先在全局創(chuàng)建一個點擊事件:bodyCloseMenus
事件作用：當點擊main容器的時候（this.refs.main && !this.refs.main.contains(e.target)），并且彈窗出現(xiàn)的時候（self.bankSwitch == true），點擊空白區(qū)域將彈窗關閉（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的時候，彈窗出現(xiàn)
<div class="selectedBorder" @click.stop> <div class="bankItem" v-if="bankSwitch == true"> 你好我是彈窗里面的內容部分 </div> </div>
所觸發(fā)的事件如下：
首頁，先在全局創(chuàng)建一個點擊事件:bodyCloseMenus
事件作用：當彈窗出現(xiàn)的時候（self.bankSwitch == true），點擊空白區(qū)域將彈窗關閉（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ū)域關閉彈窗的兩種方法的詳細內容，更多關于vue 點擊空白區(qū)域關閉彈窗的資料請關注腳本之家其它相關文章！
相關文章
今天小編就為大家分享一篇Vue.js更改調試地址端口號的實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
寫一些純前端的項目時,自己造數(shù)據(jù)有些麻煩,于是我們可以利用mock造一些簡單的數(shù)據(jù),來滿足我們的需求,本文主要介紹了Vite+Vue3使用MockJS的實現(xiàn)示例,感興趣的可以了解一下2024-01-01
Vue Element-UI中el-table實現(xiàn)單選的示例代碼
在element-ui中是為我們準備好了可直接使用的單選與多選屬性的,本文主要介紹了Vue Element-UI中el-table實現(xiàn)單選的示例代碼,具有一定的參考價值,感興趣的可以了解一下2023-12-12
Vue3全局屬性app.config.globalProperties的實現(xiàn)
Vue3中的app.config.globalProperties是一個強大的全局配置功能,允許我們在應用級別設置和訪問屬性,本文主要介紹了Vue3全局屬性app.config.globalProperties的實現(xiàn),具有一定的參考價值,感興趣的可以了解一下2024-01-01
本篇文章主要介紹了vue之數(shù)據(jù)交互實例代碼，vue中也存在像ajax和jsonp的數(shù)據(jù)交互，實現(xiàn)向服務器獲取數(shù)據(jù)，有興趣的可以了解一下2017-06-06
在本篇文章里小編給大家整理的是一篇關于Vue中的常用指令及用法總結內容，對此有興趣的朋友們可以跟著學習下。2022-01-01
這篇文章主要給大家介紹了關于Vue頁面渲染中key的應用的相關資料，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2021-01-01
移動端底部導航固定配合vue-router實現(xiàn)組件切換功能
經常遇到這樣的需求，移動端中的導航并不是在頂部也不是在底部，而是在最底部且是固定的，當我們點擊該導航項時會切換到對應的組件。這篇文章主要介紹了移動端底部導航固定配合vue-router實現(xiàn)組件切換功能,需要的朋友可以參考下2019-06-06
這篇文章主要介紹了vue中的正則表達式校驗、驗證方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-06-06
vue使用el-upload上傳文件及Feign服務間傳遞文件的方法
這篇文章主要介紹了vue使用el-upload上傳文件及Feign服務間傳遞文件的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-03-03