在实际开发中,可能会有点击某个元素以外的元素时让这个元素隐藏或关闭的需求。在Vue中实现则更加简单。
思路
为全局document添加click事件,判断是否为指定节点及其子节点,如果不是则隐藏该指定节点。
例如该组件
<template>
<div>
<span v-show="isShow">没点击我我就消失了哦</span>
<button @click="isShow = true">显示</button>
</div>
</template>
<script>
export default {
data () {
return {
isShow:false,
}
}
</script>
当前组件现有功能是:span默认不显示,当点击button时显示span。
而现在想要的功能是,当点击button时显示span,当点击span和button以外的节点都导致span隐藏。
实现
为span加上ref 以便于获取该DOM节点
<span v-show="isShow" ref="showPanel">没点击我我就消失了哦</span>
实现
为span加上ref 以便于获取该DOM节点
<span v-show="isShow" ref="showPanel">没点击我我就消失了哦</span>
当前组件添加created hook
为所有document添加click事件句柄
判断当前的span(this.$refs.showPanel)是否存在
判断当前点击的元素(e.target)是否被span所包含
若不包含则导致span隐藏
created(){
document.addEventListener('click',(e)=>{
if(this.$refs.showPanel){
let isSelf = this.$refs.showPanel.contains(e.target)
if(!isSelf){
this.isShow = false
}
}
})
}
改进
实时上述工作完成后,还存在一个问题就是当点击button时导致isShow最终又变为false(事件冒泡,button也是span之外的元素)。所以为了防止冒泡,需要为button的click事件添加.stop修饰符
<button @click.stop=“isShow = true”>显示
作者:怪兽难吃素
链接:https://www.jianshu.com/p/0c87e34ba060
来源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。