基于Vue中點(diǎn)擊組件外關(guān)閉組件的實(shí)現(xiàn)方法

更新時(shí)間：2018年03月06日 15:28:43 作者：zjw0742

下面小編就為大家分享一篇基于Vue中點(diǎn)擊組件外關(guān)閉組件的實(shí)現(xiàn)方法，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧

Vue定義全局點(diǎn)擊函數(shù)，參數(shù)為點(diǎn)擊的回調(diào)函數(shù)。

Vue.prototype.globalClick = function (callback) { //頁面全局點(diǎn)擊
 $(document).click(callback);
}

組件掛載后監(jiān)聽全局的點(diǎn)擊事件

mounted:function () {
 this.globalClick(this.handleClickOut);
},

隱藏元素。

取到dom節(jié)點(diǎn)，判斷父級是否存在來判斷是否需要來關(guān)閉

handleClickOut:function (event) {
 if($(event.target).parents(".sys-add-user-dialog").length == 0){
  //隱藏元素
 }
},

以上這篇基于Vue中點(diǎn)擊組件外關(guān)閉組件的實(shí)現(xiàn)方法就是小編分享給大家的全部內(nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

Element?UI?Dialog對話框改成固定高度超出部分滾動條滾動
這篇文章主要給大家介紹了關(guān)于Element?UI?Dialog對話框改成固定高度超出部分滾動條滾動的相關(guān)資料,el-dialog默認(rèn)高度是自由拉伸的,當(dāng)內(nèi)容超過屏幕時(shí)會出現(xiàn)滾動條,按鈕和標(biāo)題都會隨著滾動,用戶體驗(yàn)不好,需要的朋友可以參考下
2024-05-05
Vue百度地圖實(shí)現(xiàn)定位和marker拖拽監(jiān)聽功能
這篇文章主要介紹了Vue百度地圖實(shí)現(xiàn)定位和marker拖拽監(jiān)聽功能,實(shí)現(xiàn)思路非常簡單，本文結(jié)合實(shí)例代碼效果圖給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2022-11-11
解決vue3?defineProps?引入定義的接口報(bào)錯(cuò)
這篇文章主要為大家介紹了解決vue3?defineProps?引入定義的接口報(bào)錯(cuò)詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2023-05-05
一步步帶你用vite簡單搭建ts+vue3全家桶
Vue3與TS的聯(lián)合是大趨勢,下面這篇文章主要給大家介紹了關(guān)于用vite簡單搭建ts+vue3全家桶的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2022-07-07
Vue如何使用百度地圖自定義信息窗口InfoWindow的樣式
這篇文章主要介紹了Vue如何使用百度地圖自定義信息窗口InfoWindow的樣式問題,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2024-03-03
elementui中tabel組件的scope.$index的使用及說明
這篇文章主要介紹了elementui中tabel組件的scope.$index的使用及說明，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-10-10
如何理解Vue的作用域插槽的實(shí)現(xiàn)原理
本篇文章主要介紹了如何理解Vue的作用域插槽的實(shí)現(xiàn)原理，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2017-08-08
可能是vue中使用axios最詳細(xì)教程
Axios是一個(gè)基于Promise用于瀏覽器和nodejs的HTTP客戶端,本質(zhì)上也是對原生XHR的封裝,只不過它是Promise的實(shí)現(xiàn)版本,符合最新的ES規(guī)范,下面這篇文章主要給大家介紹了關(guān)于vue中使用axios最詳細(xì)教程的相關(guān)資料,需要的朋友可以參考下
2022-08-08
Vue.native如何將原生事件綁定到組件
這篇文章主要介紹了Vue.native如何將原生事件綁定到組件問題,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2023-10-10
vue使用Swiper踩坑解決避坑
這篇文章主要為大家介紹了vue使用Swiper踩坑及解決，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2023-05-05