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