Vue 实现点击空白处隐藏某节点的三种方式(指令、普通、遮罩）

2023-08-10 13:29:04 69

在项目中往往会有这样的需求：弹出框（或Popover）在show后，点击空白处可以将其hide。

针对此需求，整理了三种实现方式，大家按实际情况选择。

当然，我们做项目肯定会用到UI框架，常见的Element中的组件提供了这样的方法。

但是，就算使用框架，有些时候还是要用到的，比如：

Element中的Popover，当我们想使用手动方式(trigger触发方式为manual时)控制它的show&hide的时候，就要自己实现这个功能啦。

第一种方式：最普通的手动监听判断



啦啦啦
show

data(){
return{
visible:false
}
},
methods:{
show(){
document.addEventListener('click',this.hidePanel,false)
},
hide(){
document.removeEventListener('click',this.hidePanel,false)
},
hidePanel(e){
if(!this.$refs.projectButton.contains(e.target)){
this.visible=false
this.hide()
}
}
}

上面就是在Popovershow的时候监听document的click事件，触发进入hidePanel方法，判断当前点击的el是否在Popover内部，如果不在，则手动hidePopover，并且移除监听事件。

这个还是蛮好理解的，我使用的也是这种方式，因为我的项目中需要这种需求的很少(好吧，就一个地方)，所以我采用了这种方式。

第二种方式：指令







.show{
width:100px;
height:100px;
background-color:red;
}

上面这种是网上比较火的一种方式(实际我没有测试过)，其实思路还是那个思路(给document增加一个click事件监听，当发生click事件的时候判断是否点击的当前对象，不是就隐藏)，优点就是可以封装成全局/局部的指令，可多处使用。

下面简单介绍下vue指令

一个指令定义对象可以提供如下几个钩子函数(均为可选)：

bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。
inserted：被绑定元素插入父节点时调用(仅保证父节点存在，但不一定已被插入文档中)。
update：所在组件的VNode更新时调用，但是可能发生在其子VNode更新之前。指令的值可能发生了改变，也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新(详细的钩子函数参数见下)。
componentUpdated：指令所在组件的VNode及其子VNode全部更新后调用。
unbind：只调用一次，指令与元素解绑时调用。

第三种方式：遮罩






.mask{
background-color:#000;
opacity:0.3;
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
z-index:1
}
.pop{
background-color:#fff;

position:fixed;
top:100px;
left:300px;
width:calc(100%-600px);
height:calc(100%-200px);
z-index:2
}
.btn{
background-color:#fff;
border-radius:4px;
border:1pxsolidblue;
padding:4px12px;
}

上面这个就是添加一个看不见的遮罩替代document，点击遮罩就隐藏。但是要注意：mask(遮罩)层的层级（z-index）要比弹出的pop的层级低。

总结

以上所述是小编给大家介绍的Vue实现点击空白处隐藏某节点的三种方式,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

Vue 实现点击空白处隐藏某节点的三种方式(指令、普通、遮罩）

热门推荐

随机推荐