如何用Vue指令实现点击空白处隐藏指定节点的三种方法？

本文共计1409个文字，预计阅读时间需要6分钟。

在项目中经常会有这样的需求：弹出框（或Popover）在show后，点击空白处可以将其hide。为此，整理了三种实现方式，大家根据实际情况选择：

1. 监听全局点击事件

2.使用CSS伪元素

3.利用事件委托

具体选择哪种方式，请根据实际需求决定。当然，我们做项目时，也可能会用到UI组件。

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

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

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

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

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