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) {