前言：咱们聊聊为啥要封装一个点击外部的指令

说实话，Zuo弹窗、下拉菜单的时候，总是要判断用户点了哪里。 Ru果点在组件内部，别管；点在外面就得关掉。 这事儿一不小心就写成一堆 if else，代码乱成一锅粥。 所以老兄，我决定把这段逻辑抽出来Zuo成一个 Vue 指令。 哈哈，这玩意儿封装好后整个项目douNeng轻松复用。 你说对不对？你懂的。

先说需求吧——我们想要在任意元素上加个 v-click-outside。 当用户点击这个元素之外的任何地方，就触发绑定的方法。 常见场景有：搜索框失焦自动收起、模态框点击遮罩层关闭、下拉菜单点击空白处隐藏…… 听起来hen鸡肋？其实一点dou不鸡肋，尤其是 UI 越来越细腻的时候。

思路其实挺简单：在 document 上统一监听 click事件。 每次事件触发时判断 event.target 是否在指令绑定的 el 里。 Ru果在里面就直接返回；不在里面就执行用户传进来的回调函数。 记得在指令解绑时要把监听器给移除，不然会造成内存泄漏。

// 自定义指令 click-outside
const clickOutside = {
  // 指令挂载时调用
  beforeMount {
    // 保存处理函数到元素上，方便后面解绑
    el.__clickOutsideHandler = function {
      // Ru果点击的是自身或子元素，直接忽略
      if ) return;
      // 不在内部才执行用户传入的回调
      if  {
        binding.value;
      }
    };
    // 使用捕获阶段Ke以geng早捕获到事件
    document.addEventListener;
  },
  // 指令卸载时调用
  unmounted {
    document.removeEventListener;
    delete el.__clickOutsideHandler;
  }
};
export default clickOutside;

写完代码后你只需要在全局或者局部注册这个指令就行啦。 全局注册的话，在 main.js 里 import 后 app.directive。 局部注册的话，在组件的 directives 选项里写上同样的对象即可。

kan，这么一套下来原本要写好几行判断的事儿，现在只需要一句 v-click-outside=“closeMenu”。 而且还Neng保持模板干净利落，不会被各种 @document:click 混进去。 咱就是说这种封装真的省心。

这个指令默认是监听 document 的 click，Ru果你的页面里还有其他全局 click 捕获器，要注意事件顺序。 Ru果绑定的元素本身不是可聚焦的，有时候键盘操作会导致意外触发，需要自行处理 focus 管理。 还有一点，小心多次绑定同一个元素，会导致多个 handler 累加——Zui好保证每个 element 上只挂一次指令。

说到网页质量，hen多朋友会问：“为什么百度不收录我的页面？”其实原因大多跟内容重复、加载慢、或者缺少有效 meta 信息有关。 Ru果你用了大量 JS 动态渲染，而没有Zuo好服务端渲染或预渲染，爬虫抓不到真实内容，自然就不收录了。 再者，站内链接结构太散乱，也会让搜索引擎找不到入口。 解决办法嘛，就是确保关键内容在首屏直接可见，用合适的 title、description，还Ke以加上 sitemap 提高爬取效率。

Ru果你Yi经在项目里用了 Element Plus、Naive UI 那种 UI 框架，它们往往自带 ClickOutside 指令。 不过自己实现一遍还是hen有意义，因为Ke以随时加入自定义逻辑，比如防抖、防止多次触发等。 比如下面这样改造一下让回调函数只Neng每隔 300ms 执行一次：

// 在 beforeMount 中包裹防抖
el.__clickOutsideHandler = debounce {
  if ) return;
  typeof binding.value === 'function' && binding.value;
}, 300);

这招对频繁打开/关闭弹窗的场景特别友好，不至于卡死 UI。

调试的时候，Ke以先把 console.log 打出来kankan event.target 是什么元素。 Ru果发现总是误判，那可Neng是因为你的 el 包含了某些遮罩层或伪元素，需要geng细致地判断类名或属性。 还有一种情况是在移动端点击会触发 touchstart，而不是 click，这时候记得把事件改成 touchend 或者同时监听两种。

好了说了这么多，你应该Yi经掌握了怎么封装一个检测点击非当前元素的 Vue 指令了吧？哈哈，别忘了把它抽离成独立文件，好处就是全项目复用，一改全生效！ Ru果还有其他需求，比如“点击外部自动保存表单”之类的，也完全Ke以基于这个思路再 哦。

祝大家编码愉快，遇到 bug 别急，多喝水，多笑笑~ 咱们下篇再聊别的话题哈！