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

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

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

1. 使用原生JavaScript监听点击事件。

2.利用jQuery库简化操作。

3.使用前端框架（如React或Vue）提供的内置组件。

我们做项目时，会根据实际情况选择合适的方案。当然，UI部分也会相应地调整。

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

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

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

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

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