From daf314ff0c70751a61ebbcfe72504bd45e8eed82 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=B0=B1=E7=9C=A0=E4=BB=AA=E5=BC=8F?= <854085467@qq.com>
Date: Mon, 25 Oct 2021 00:36:19 +0800
Subject: [PATCH] =?UTF-8?q?docs:=20=E6=96=B0=E5=A2=9E=20hooks=20=E6=96=87?=
 =?UTF-8?q?=E6=A1=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 docs/docs/zh-CN/hooks/useClickOutside.md | 15 ++++
 docs/src/layouts/Layout.vue              |  3 +
 docs/src/router/zh-CN.ts                 | 14 ++++
 docs/src/view/hooks.vue                  | 96 ++++++++++++++++++++++++
 4 files changed, 128 insertions(+)
 create mode 100644 docs/docs/zh-CN/hooks/useClickOutside.md
 create mode 100644 docs/src/view/hooks.vue

diff --git a/docs/docs/zh-CN/hooks/useClickOutside.md b/docs/docs/zh-CN/hooks/useClickOutside.md
new file mode 100644
index 00000000..12757fae
--- /dev/null
+++ b/docs/docs/zh-CN/hooks/useClickOutside.md
@@ -0,0 +1,15 @@
+::: field useClickOutside
+:::
+
+```html
+<div ref='dropdownRef'></div>
+```
+
+```javascript
+const dropdownRef = ref<null | HTMLElement>(null)
+const isClickOutside = useClickOutside(dropdownRef)
+
+watch(isClickOutside, () => {
+    
+})
+```
\ No newline at end of file
diff --git a/docs/src/layouts/Layout.vue b/docs/src/layouts/Layout.vue
index a0164eba..96f9b9a6 100644
--- a/docs/src/layouts/Layout.vue
+++ b/docs/src/layouts/Layout.vue
@@ -17,6 +17,9 @@
         <li class="layui-nav-item">
           <router-link to="/zh-CN/components"> 组件 </router-link>
         </li>
+        <li class="layui-nav-item">
+          <router-link to="/zh-CN/hooks"> hooks </router-link>
+        </li>
         <li class="layui-nav-item">
           <lay-form>
             <lay-search :datas="menus" />
diff --git a/docs/src/router/zh-CN.ts b/docs/src/router/zh-CN.ts
index ed65b356..54a85d05 100644
--- a/docs/src/router/zh-CN.ts
+++ b/docs/src/router/zh-CN.ts
@@ -1,5 +1,6 @@
 import BaseLayout from '../layouts/Layout.vue'
 import Component from '../view/component.vue'
+import Hooks from '../view/hooks.vue'
 import Guide from '../view/guide.vue'
 import Index from '../view/index.vue'
 
@@ -254,6 +255,19 @@ const zhCN = [
           },
         ],
       },
+      {
+        path: '/zh-CN/hooks',
+        redirect: '/zh-CN/hooks/useClickOutside',
+        component: Hooks,
+        meta: { title: 'hooks' },
+        children: [
+          {
+            path: '/zh-CN/hooks/useClickOutside',
+            component: () =>
+              import('../../docs/zh-CN/hooks/useClickOutside.md'),
+            meta: { title: 'useClickOutside' },
+          }
+        ]}
     ],
   },
 ]
diff --git a/docs/src/view/hooks.vue b/docs/src/view/hooks.vue
new file mode 100644
index 00000000..72d33148
--- /dev/null
+++ b/docs/src/view/hooks.vue
@@ -0,0 +1,96 @@
+<template>
+  <lay-layout>
+    <lay-side>
+      <lay-scroll>
+        <ul class="layui-menu layui-menu-lg layui-menu-docs">
+          <li
+            v-for="menu in menus"
+            :key="menu"
+            class="layui-menu-item-group"
+            lay-options="{type: 'group', isAllowSpread: true}"
+          >
+            <div class="layui-menu-body-title">{{ menu.title }}</div>
+            <hr />
+            <ul>
+              <li
+                v-for="children in menu.children"
+                :key="children"
+                :class="[
+                  currentPath === children.path
+                    ? 'layui-menu-item-checked2'
+                    : '',
+                ]"
+                @click="handleClick(children)"
+              >
+                <div class="layui-menu-body-title">
+                  <router-link :to="children.path">
+                    <span>{{ children.title }}</span>
+                    <span class="layui-font-12 layui-font-gray">
+                      {{ children.subTitle }}
+                    </span>
+                  </router-link>
+                </div>
+              </li>
+            </ul>
+          </li>
+        </ul>
+      </lay-scroll>
+    </lay-side>
+    <lay-body>
+      <div style="padding: 20px">
+        <router-view />
+      </div>
+    </lay-body>
+  </lay-layout>
+</template>
+<script>
+import { ref, watch } from 'vue'
+import { useRouter, useRoute } from 'vue-router'
+export default {
+  setup() {
+    const route = useRoute()
+    const router = useRouter()
+    const currentPath = ref('/zh-CN/guide')
+
+    watch(
+      () => route.path,
+      (val) => {
+        currentPath.value = val
+      },
+      {
+        immediate: true,
+        deep: true,
+      }
+    )
+
+    const menus = [
+      {
+        id: 1,
+        title: 'hooks',
+        children: [
+          {
+            id: 1,
+            title: 'useClickOutside',
+            subTitle: '',
+            path: '/zh-CN/hooks/useClickOutside',
+          }
+        ],
+      },
+    ]
+
+    const selected = ref(1)
+
+    const handleClick = function (menu) {
+      selected.value = menu.id
+      router.push(menu.path)
+    }
+
+    return {
+      menus,
+      selected,
+      currentPath,
+      handleClick,
+    }
+  },
+}
+</script>