feat: add hooks docs

.vitepress/config.js

@@ -84,11 +84,21 @@ function createNav() {
           link: '/components/form',
         },
         {
-          text: '函数式',
+          text: '函数式组件',
           link: '/components/image-viewer',
         },
       ],
     },
+    {
+      text: '常用Hooks',
+      link: '/hooks/',
+      items: [
+        {
+          text: 'useWatermark',
+          link: '/hooks/useWatermark',
+        },
+      ],
+    },
     {
       text: '相关链接',
       items: [
@@ -127,6 +137,12 @@ function createNav() {
 
 function createSidebar() {
   return {
+    '/hooks/': [
+      {
+        text: 'useWatermark',
+        link: '/hooks/useWatermark',
+      },
+    ],
     '/components/': [
       {
         text: '组件',

hooks/useWatermark.md

@@ -0,0 +1,40 @@
+# useWatermark
+
+为元素设置水印
+
+useWatermark 位于 [src/hooks/web/useWatermark.ts](https://github.com/kailong321200875/vue-element-plus-admin/tree/master/src/hooks/web/useWatermark.ts)
+
+## 用法
+
+```vue
+<script setup lang="ts">
+import { useWatermark } from '@/hooks/web/useWatermark'
+import { onBeforeUnmount } from 'vue'
+
+const { setWatermark, clear } = useWatermark()
+
+const { t } = useI18n()
+
+setWatermark('ElementPlusAdmin')
+
+onBeforeUnmount(() => {
+  clear()
+})
+</script>
+
+```
+
+### 参数介绍
+
+```ts
+const { setWatermark, clear } = useWatermark()
+
+**setWatermark**
+
+`setWatermark` 用于设置水印文案，接收一个 `string` 类型的参数
+
+**clear**
+
+`clear` 用于清除水印
+
+```