Vue監(jiān)聽某個元素以外的區(qū)域被點擊問題
更新時間：2023年10月21日 14:41:34 作者：懶員員
這篇文章主要介紹了Vue監(jiān)聽某個元素以外的區(qū)域被點擊問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
vue監(jiān)聽某個元素以外的區(qū)域被點擊
clickoutside是Element-ui實現(xiàn)的一個自定義指令，用來處理目標(biāo)節(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é)點。
例如：
當(dāng)前組件現(xiàn)有功能是：span默認(rèn)不顯示，當(dāng)點擊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)文章
這篇文章主要介紹了vuecli3.x中輕松4步帶你使用tinymce的步驟，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-06-06
如果我們在每個組件中去重復(fù)定義這些屬性和方法會使得項目出現(xiàn)代碼冗余并提高了維護難度，針對這種情況官方提供了Mixins特性，這時使用Vue mixins混入有很大好處，下面就介紹下Vue mixins混入使用方法，需要的朋友參考下吧2021-08-08
這篇文章主要介紹了vue中input的v-model清空操作，本文通過實例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值,需要的朋友可以參考下2019-09-09
vue中watch的實際開發(fā)學(xué)習(xí)筆記
watch是Vue實例的一個屬性是用來響應(yīng)數(shù)據(jù)的變化,需要在數(shù)據(jù)變化時執(zhí)行異步或開銷較大的操作時,這個方式是最有用的,下面這篇文章主要給大家介紹了關(guān)于vue中watch的實際開發(fā)筆記,需要的朋友可以參考下2022-11-11
這篇文章主要介紹了Vue?element?ui用戶展示頁面的實例，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-05-05
本篇文章主要介紹了深入解析Vue 組件命名那些事，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-07-07
這篇文章主要介紹了詳解Vue Cli瀏覽器兼容性實踐，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-06-06
Vue3+TS+Vite+NaiveUI搭建一個項目骨架實現(xiàn)
本文主要介紹了Vue3+TS+Vite+NaiveUI搭建一個項目骨架實現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-06-06
解決vue里a標(biāo)簽值解析變量,跳轉(zhuǎn)頁面,前面加默認(rèn)域名端口的問題
這篇文章主要介紹了解決vue里a標(biāo)簽值解析變量,跳轉(zhuǎn)頁面,前面加默認(rèn)域名端口的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
Vue中的數(shù)據(jù)監(jiān)聽和數(shù)據(jù)交互案例解析
這篇文章主要介紹了Vue中的數(shù)據(jù)監(jiān)聽和數(shù)據(jù)交互案例解析,在文章開頭部分先給大家介紹了vue中的數(shù)據(jù)監(jiān)聽事件$watch，具體代碼講解，大家可以參考下本文2017-07-07