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