如何用Vue指令实现点击空白处隐藏节点？

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

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

1. 使用事件委托

2.使用事件冒泡

3.使用绝对定位

根据实际情况选择合适的实现方式。当然，我们做项目时也会考虑到UI的使用。

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

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

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

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

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