基于Vue中點擊組件外關閉組件的實現(xiàn)方法
更新時間：2018年03月06日 15:28:43 作者：zjw0742
下面小編就為大家分享一篇基于Vue中點擊組件外關閉組件的實現(xiàn)方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
Vue定義全局點擊函數(shù)，參數(shù)為點擊的回調函數(shù)。
Vue.prototype.globalClick = function (callback) { //頁面全局點擊
$(document).click(callback);
}
組件掛載后監(jiān)聽全局的點擊事件
mounted:function () {
this.globalClick(this.handleClickOut);
},
隱藏元素。
取到dom節(jié)點，判斷父級是否存在來判斷是否需要來關閉
handleClickOut:function (event) {
if($(event.target).parents(".sys-add-user-dialog").length == 0){
//隱藏元素
}
},
以上這篇基于Vue中點擊組件外關閉組件的實現(xiàn)方法就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
element-ui中this.$confirm提示文字中部分有顏色自定義方法
this.$confirm是一個Vue.js中的彈窗組件,其樣式可以通過CSS進行自定義,下面這篇文章主要給大家介紹了關于element-ui中this.$confirm提示文字中部分有顏色的自定義方法,需要的朋友可以參考下2024-02-02
Vue3?Suspense實現(xiàn)優(yōu)雅處理異步數(shù)據(jù)加載
Suspense?是?Vue?3?中用于處理異步數(shù)據(jù)加載的特性,它使得在加載異步數(shù)據(jù)時可以提供更好的用戶體驗,下面小編就來和大家詳細講講Suspense如何優(yōu)雅處理異步數(shù)據(jù)加載吧2023-10-10
這篇文章主要介紹了使用vue實現(xiàn)各類彈出框組件,文中給大家提到了vue中常用的dialog組件的封裝，本文給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下2019-07-07
vue 實現(xiàn)click同時傳入事件對象和自定義參數(shù)
這篇文章主要介紹了vue 實現(xiàn)click同時傳入事件對象和自定義參數(shù)，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2021-01-01
Vue使用new?Blob()實現(xiàn)不同類型的文件下載功能
這篇文章主要給大家介紹了關于Vue使用new?Blob()實現(xiàn)不同類型的文件下載功能的相關資料,在Vue項目中,經(jīng)常用Blob二進制進行文件下載功能,需要的朋友可以參考下2023-07-07
在之前的一個小項目中,用到的顯示當?shù)氐牡貓D功能,下面這篇文章主要給大家介紹了關于Vue項目中使用百度地圖api的詳細步驟,文中通過圖文介紹的非常詳細,需要的朋友可以參考下2022-10-10
這篇文章主要為大家詳細介紹了Vue.js組件tabs實現(xiàn)選項卡切換效果的相關資料，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-12-12
在開發(fā)Vue應用時,我們經(jīng)常需要在多個組件中復用一些通用的函數(shù)或方法,這些函數(shù)可能是我們自己編寫的工具函數(shù),也可能是從第三方庫中導入的,下面我們就來看看如何正確引用和使用外部方法吧2024-01-01
在?Vue.js?開發(fā)中,合理地控制元素的樣式對于構建高質量的用戶界面至關重要,Vue?提供了靈活的方式來綁定樣式,這篇文章將探索?Vue?中設置樣式的七種做法,并結合代碼,逐步說明每種方法的實現(xiàn),需要的朋友可以參考下2024-03-03
最近發(fā)現(xiàn)很多要求Vue3的技術了,不得不說it技術的更新真的太快了,作為vue2老用戶,我們在學習Vue3前應該了解他們的區(qū)別以及背后的原因,下面這篇文章主要給大家介紹了關于vue2和vue3區(qū)別的相關資料,需要的朋友可以參考下2023-02-02