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