更新

src/directive/clickOutSide.js

@@ -0,0 +1,43 @@
+export default {
+  install: (app) => {
+    app.directive('click-outside', {
+      mounted(el, binding) {
+        const handler = (e) => {
+          // 如果绑定的元素包含事件目标，或元素已经被移除，则不触发
+          if (!el || el.contains(e.target) || e.target === el) return
+          // 支持函数或对象 { handler: fn, exclude: [el1, el2], capture: true }
+          const value = binding.value
+          if (value && typeof value === 'object') {
+            if (
+              value.exclude &&
+              value.exclude.some(
+                (ex) => ex && ex.contains && ex.contains(e.target)
+              )
+            )
+              return
+            if (typeof value.handler === 'function') value.handler(e)
+          } else if (typeof value === 'function') {
+            value(e)
+          }
+        }
+
+        // 存到 el 上，便于解绑
+        el.__clickOutsideHandler__ = handler
+
+        // 延迟注册，避免 mounted 时触发（比如当点击就是触发绑定动作时）
+        setTimeout(() => {
+          document.addEventListener('mousedown', handler)
+          document.addEventListener('touchstart', handler)
+        }, 0)
+      },
+      unmounted(el) {
+        const h = el.__clickOutsideHandler__
+        if (h) {
+          document.removeEventListener('mousedown', h)
+          document.removeEventListener('touchstart', h)
+          delete el.__clickOutsideHandler__
+        }
+      }
+    })
+  }
+}