在實(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)驻粟。
例如該組件
<template>
<div>
<span v-show="isShow">沒點(diǎn)擊我我就消失了哦</span>
<button @click="isShow = true">顯示</button>
</div>
</template>
<script>
export default {
data () {
return {
isShow:false,
}
}
</script>
當(dāng)前組件現(xiàn)有功能是：span默認(rèn)不顯示，當(dāng)點(diǎn)擊button時(shí)顯示span凶异。
而現(xiàn)在想要的功能是蜀撑，當(dāng)點(diǎn)擊button時(shí)顯示span，當(dāng)點(diǎn)擊span和button以外的節(jié)點(diǎn)都導(dǎo)致span隱藏剩彬。
實(shí)現(xiàn)
為span加上ref 以便于獲取該DOM節(jié)點(diǎn)
<span v-show="isShow" ref="showPanel">沒點(diǎn)擊我我就消失了哦</span>
當(dāng)前組件添加created hook
- 為所有
document添加click事件句柄 - 判斷當(dāng)前的
span（this.$refs.showPanel）是否存在 - 判斷當(dāng)前點(diǎn)擊的元素(
e.target)是否被span所包含 - 若不包含則導(dǎo)致
span隱藏
created(){
document.addEventListener('click',(e)=>{
if(this.$refs.showPanel){
let isSelf = this.$refs.showPanel.contains(e.target)
if(!isSelf){
this.isShow = false
}
}
})
}
改進(jìn)
實(shí)時(shí)上述工作完成后屯掖，還存在一個(gè)問(wèn)題就是當(dāng)點(diǎn)擊button時(shí)導(dǎo)致isShow最終又變?yōu)?code>false（事件冒泡，button也是span之外的元素）襟衰。所以為了防止冒泡贴铜，需要為button的click事件添加.stop修飾符
<button @click.stop="isShow = true">顯示</button>
