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

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

在项目中可能会遇到这样的需求：弹出框（或Popover）在show之后，点击空白处可将其hide。为此，整理了三种实现方式，具体选择可根据实际需求而定。

1. 使用CSS实现点击空白处关闭： - 给弹出框添加一个透明的遮罩层，点击遮罩层时触发关闭事件。 - 在关闭事件中，将弹出框的display属性设置为none。

2. 使用JavaScript实现点击空白处关闭： - 监听整个页面的点击事件，判断点击位置是否在弹出框内部。 - 如果点击位置在弹出框外部，则关闭弹出框。

3. 使用第三方库实现点击空白处关闭： - 使用Bootstrap、Ant Design等UI框架提供的弹出框组件，通常这些框架已经支持点击空白处关闭的功能。

根据实际情况选择合适的实现方式，确保项目UI的流畅性。

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

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

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

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

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