From f329fd9f6f1a6c42ccbd62877194fa9e412eb860 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=99=88=E5=98=89=E6=B6=B5?= <chenjiahan@youzan.com>
Date: Sun, 12 Jan 2020 08:58:58 +0800
Subject: [PATCH] feat: add use-click-outside hook

---
 src/hooks/use-click-outside.ts | 23 +++++++++++++++++++++++
 src/hooks/use-handler.ts       | 12 ++++++------
 2 files changed, 29 insertions(+), 6 deletions(-)
 create mode 100644 src/hooks/use-click-outside.ts

diff --git a/src/hooks/use-click-outside.ts b/src/hooks/use-click-outside.ts
new file mode 100644
index 000000000..0e97c1b47
--- /dev/null
+++ b/src/hooks/use-click-outside.ts
@@ -0,0 +1,23 @@
+import { Ref, onMounted } from 'vue';
+import { useHandler } from './use-handler';
+
+export type UseClickOutsideOpitons = {
+  event: string;
+  callback: EventListener;
+  element: Ref<Element>;
+  flag?: Ref<boolean>;
+};
+
+export function useClickOutside(options: UseClickOutsideOpitons) {
+  const { event = 'click', callback, element, flag } = options;
+
+  function onClick(event: Event) {
+    if (!element.value.contains(event.target as Node)) {
+      callback(event);
+    }
+  }
+
+  onMounted(() => {
+    useHandler(document, event, onClick, false, flag);
+  });
+}
diff --git a/src/hooks/use-handler.ts b/src/hooks/use-handler.ts
index cd0a920b9..0ea54b909 100644
--- a/src/hooks/use-handler.ts
+++ b/src/hooks/use-handler.ts
@@ -9,16 +9,16 @@ import {
 } from 'vue';
 
 export function useHandler(
-  target: HTMLElement | Document | Window,
+  target: EventTarget,
   event: string,
-  handler: any,
+  handler: EventListener,
   passive = false,
-  ref?: Ref<boolean>
+  flag?: Ref<boolean>
 ) {
   let binded: boolean;
 
   function add() {
-    if (binded || (ref && !ref.value)) {
+    if (binded || (flag && !flag.value)) {
       return;
     }
 
@@ -33,9 +33,9 @@ export function useHandler(
     }
   }
 
-  if (ref) {
+  if (flag) {
     watch(() => {
-      ref.value ? add() : remove();
+      flag.value ? add() : remove();
     });
   }