Vue監(jiān)聽某個元素以外的區(qū)域被點擊問題
更新時間：2023年10月21日 14:41:34 作者：懶員員
這篇文章主要介紹了Vue監(jiān)聽某個元素以外的區(qū)域被點擊問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
vue監(jiān)聽某個元素以外的區(qū)域被點擊
clickoutside是Element-ui實現(xiàn)的一個自定義指令，用來處理目標節(jié)點之外的點擊事件
<template>
<div class="">
<div v-clickoutside="handler">text</div>
</div>
</template>
<script>
import clickoutside from "element-ui/src/utils/clickoutside";
export default {
directives: { clickoutside },
data() {
return {};
},
created() {},
methods: {
handler() {
console.log("text以外被點擊了");
},
},
};
</script>vue中點擊某個元素以外的元素時讓這個元素隱藏或關(guān)閉
在實際開發(fā)中，可能會有點擊某個元素以外的元素時讓這個元素隱藏或關(guān)閉的需求。在Vue中實現(xiàn)則更加簡單。
思路
為全局document添加click事件，判斷是否為指定節(jié)點及其子節(jié)點，如果不是則隱藏該指定節(jié)點。
例如：
當前組件現(xiàn)有功能是：span默認不顯示，當點擊button時顯示span。
點擊非span button時span消失
<template>
<div>
<span v-show="isShow" ref="showPanel">沒點擊我我就消失了哦</span>
<button @click.stop="isShow = true">顯示</button>
</div>
</template>
<script>
export default {
data() {
return {
isShow: false
};
},
created() {
document.addEventListener("click", e => {
if (this.$refs.showPanel) {
let isSelf = this.$refs.showPanel.contains(e.target);
if (!isSelf) {
this.isShow = false;
}
}
});
}
};
</script>總結(jié)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了vue2.0 常用的 UI 庫實例講解，非常不錯，具有參考借鑒價值,需要的朋友可以參考下2017-12-12
props中設(shè)置了默認值,但是獲取時（獲取父頁面沒有傳的屬性） 打印出來是undefined,所以本文給大家介紹了解決vue中props對象中設(shè)置多個默認值的問題,需要的朋友可以參考下2024-04-04
這篇文章主要介紹了Vue 電商后臺管理項目階段性總結(jié)，本文給大家介紹的非常詳細，對大家的學(xué)習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-08-08
Element-UI組件實現(xiàn)面包屑導(dǎo)航欄的示例代碼
面包屑導(dǎo)航欄是一種用戶界面組件,用于展示用戶在網(wǎng)站或應(yīng)用中的路徑,它包括了從主頁到當前頁面的鏈接序列,有助于用戶快速了解和導(dǎo)航至上級頁面,本文就來介紹一下Element-UI組件實現(xiàn)面包屑導(dǎo)航欄的示例代碼,感興趣的可以了解一下2024-09-09
vue3插槽:el-table表頭插入tooltip及更換表格背景色方式
這篇文章主要介紹了vue3插槽:el-table表頭插入tooltip及更換表格背景色方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-06-06
Vue?2源碼閱讀?Provide?Inject?依賴注入詳解
這篇文章主要為大家介紹了Vue?2源碼閱讀?Provide?Inject?依賴注入詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-08-08
這篇文章主要為大家詳細介紹了vue實現(xiàn)下拉框篩選表格數(shù)據(jù)，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-09-09
這篇文章主要介紹了vue計算屬性及函數(shù)的選擇，文章圍繞主題的相關(guān)資料展開詳細介紹，需要的小伙伴可以參考一下2022-05-05
這篇文章主要介紹了vue常用高階函數(shù)及綜合案例，文章內(nèi)容講解的很清晰，有對于這方面感興趣的同學(xué)可以研究下2021-02-02
本文章主要來介紹一下第一個階段，也就是前端校驗的驗證碼的實現(xiàn)，下面來介紹一下拖動驗證碼的具體實現(xiàn)。這篇文章主要介紹了利用 Vue 實現(xiàn)滑動驗證碼,需要的朋友可以參考下2019-06-06