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

在项目中往往会有这样的需求： 弹出框在 show 后，点击空白处可以将其 hide。针对此需求，整理了三种实现方式，大家按实际情况选择。当然，我们做项目肯定会用到 UI 框架，常见的 Element 中的组件提供了这样的方法。上面就是在 Popover show 的时候监听 document 的 click 事件，触发进入 hidePanel 方法，判断当前点击的 el 是否在 Popover 内部，如果不在，则手动 hide Popover ，并且移除监听事件。这个还是蛮好理解的，我使用的也是这种方式，因为我的项目中需要这种需求的很少，所以我采用了这种方式。上面这种是网上比较火的一种方式，其实思路还是那个思路 ，优点就是可以封装成全局/局部的指令，可多处使用。一个指令定义对象可以提供如下几个钩子函数 ：