基于Vue中點擊組件外關(guān)閉組件的實現(xiàn)方法
更新時間：2018年03月06日 15:28:43 作者：zjw0742
下面小編就為大家分享一篇基于Vue中點擊組件外關(guān)閉組件的實現(xiàn)方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
Vue定義全局點擊函數(shù)，參數(shù)為點擊的回調(diào)函數(shù)。
Vue.prototype.globalClick = function (callback) { //頁面全局點擊
$(document).click(callback);
}
組件掛載后監(jiān)聽全局的點擊事件
mounted:function () {
this.globalClick(this.handleClickOut);
},
隱藏元素。
取到dom節(jié)點，判斷父級是否存在來判斷是否需要來關(guān)閉
handleClickOut:function (event) {
if($(event.target).parents(".sys-add-user-dialog").length == 0){
//隱藏元素
}
},
以上這篇基于Vue中點擊組件外關(guān)閉組件的實現(xiàn)方法就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
Element?UI?Dialog對話框改成固定高度超出部分滾動條滾動
這篇文章主要給大家介紹了關(guān)于Element?UI?Dialog對話框改成固定高度超出部分滾動條滾動的相關(guān)資料,el-dialog默認(rèn)高度是自由拉伸的,當(dāng)內(nèi)容超過屏幕時會出現(xiàn)滾動條,按鈕和標(biāo)題都會隨著滾動,用戶體驗不好,需要的朋友可以參考下2024-05-05
Vue百度地圖實現(xiàn)定位和marker拖拽監(jiān)聽功能
這篇文章主要介紹了Vue百度地圖實現(xiàn)定位和marker拖拽監(jiān)聽功能,實現(xiàn)思路非常簡單，本文結(jié)合實例代碼效果圖給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-11-11
這篇文章主要為大家介紹了解決vue3?defineProps?引入定義的接口報錯詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-05-05
Vue3與TS的聯(lián)合是大趨勢,下面這篇文章主要給大家介紹了關(guān)于用vite簡單搭建ts+vue3全家桶的相關(guān)資料,文中通過實例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-07-07
Vue如何使用百度地圖自定義信息窗口InfoWindow的樣式
這篇文章主要介紹了Vue如何使用百度地圖自定義信息窗口InfoWindow的樣式問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
elementui中tabel組件的scope.$index的使用及說明
這篇文章主要介紹了elementui中tabel組件的scope.$index的使用及說明，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
本篇文章主要介紹了如何理解Vue的作用域插槽的實現(xiàn)原理，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-08-08
Axios是一個基于Promise用于瀏覽器和nodejs的HTTP客戶端,本質(zhì)上也是對原生XHR的封裝,只不過它是Promise的實現(xiàn)版本,符合最新的ES規(guī)范,下面這篇文章主要給大家介紹了關(guān)于vue中使用axios最詳細(xì)教程的相關(guān)資料,需要的朋友可以參考下2022-08-08
這篇文章主要介紹了Vue.native如何將原生事件綁定到組件問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
這篇文章主要為大家介紹了vue使用Swiper踩坑及解決，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-05-05