From 39245650879d277645547cd2a832e8016f81312c Mon Sep 17 00:00:00 2001
From: haoxr <1490493387@qq.com>
Date: Sat, 21 Jan 2023 15:35:15 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=96=B0=E5=A2=9E=E7=82=B9=E5=87=BB?=
 =?UTF-8?q?=E7=A9=BA=E7=99=BD=E5=85=B3=E9=97=AD=E6=8C=87=E4=BB=A4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Former-commit-id: b972dcaec196fe3e5a261cebfece91d3596a51ab
---
 src/directive/ClickOutside/index.ts | 52 +++++++++++++++++++++++++++++
 src/directive/Debounce/index.ts     | 15 +++++++++
 src/directive/index.ts              |  3 +-
 src/directive/permission/index.ts   |  4 +--
 4 files changed, 71 insertions(+), 3 deletions(-)
 create mode 100644 src/directive/ClickOutside/index.ts
 create mode 100644 src/directive/Debounce/index.ts

diff --git a/src/directive/ClickOutside/index.ts b/src/directive/ClickOutside/index.ts
new file mode 100644
index 00000000..fe47a2b1
--- /dev/null
+++ b/src/directive/ClickOutside/index.ts
@@ -0,0 +1,52 @@
+import { Directive } from 'vue';
+
+declare type NoNameFUnctionReturnVoid = () => void;
+
+export const clickOutside: Directive<HTMLElement, NoNameFUnctionReturnVoid> =
+  (() => {
+    const checkIfClickedInside = (
+      event: Event,
+      element: HTMLElement,
+      callBackFn: NoNameFUnctionReturnVoid
+    ) => {
+      console.log('element', element);
+      const isInside = event.composedPath().includes(element);
+
+      if (isInside) {
+        return false;
+      } else {
+        callBackFn();
+      }
+    };
+
+    const allListeners: {
+      element: HTMLElement;
+      listener: (e: Event) => void;
+    }[] = [];
+
+    return {
+      created(element) {
+        element.dataset.clicked = 'false';
+      },
+
+      mounted(element, binding) {
+        const myListener = (e: Event) => {
+          checkIfClickedInside(e, element, binding.value);
+        };
+        allListeners.push({ element, listener: myListener });
+        window.addEventListener('click', myListener);
+      },
+
+      unmounted(element) {
+        const eventIndex = allListeners.findIndex(
+          listener => listener.element === element
+        );
+
+        if (eventIndex !== -1) {
+          const listener = allListeners[eventIndex].listener;
+          window.removeEventListener('click', listener);
+          allListeners.splice(eventIndex, 1);
+        }
+      }
+    };
+  })();
diff --git a/src/directive/Debounce/index.ts b/src/directive/Debounce/index.ts
new file mode 100644
index 00000000..7e1de783
--- /dev/null
+++ b/src/directive/Debounce/index.ts
@@ -0,0 +1,15 @@
+import { Directive } from 'vue';
+
+/**
+ * 按钮防抖
+ */
+export const deBounce: Directive = {
+  mounted(el: HTMLElement) {
+    el.addEventListener('click', () => {
+      el.classList.add('is-disabled');
+      setTimeout(() => {
+        el.classList.remove('is-disabled');
+      }, 2000);
+    });
+  }
+};
diff --git a/src/directive/index.ts b/src/directive/index.ts
index a9663760..259708af 100644
--- a/src/directive/index.ts
+++ b/src/directive/index.ts
@@ -1,2 +1,3 @@
 export { hasPerm, hasRole } from './permission';
-export { deBounce } from './utils';
+export { clickOutside } from './ClickOutside';
+export { deBounce } from './Debounce';
diff --git a/src/directive/permission/index.ts b/src/directive/permission/index.ts
index cd491caa..b8d0dee8 100644
--- a/src/directive/permission/index.ts
+++ b/src/directive/permission/index.ts
@@ -2,7 +2,7 @@ import { useUserStoreHook } from '@/store/modules/user';
 import { Directive, DirectiveBinding } from 'vue';
 
 /**
- * 按钮权限校验
+ * 按钮权限
  */
 export const hasPerm: Directive = {
   mounted(el: HTMLElement, binding: DirectiveBinding) {
@@ -32,7 +32,7 @@ export const hasPerm: Directive = {
 };
 
 /**
- * 角色权限校验
+ * 角色权限
  */
 export const hasRole: Directive = {
   mounted(el: HTMLElement, binding: DirectiveBinding) {