feat: add hooks demo

src/router/index.ts

@@ -277,14 +277,6 @@ export const asyncRouterMap: AppRouteRecordRaw[] = [
           title: t('router.countTo')
         }
       },
-      {
-        path: 'watermark',
-        component: () => import('@/views/Components/Watermark.vue'),
-        name: 'Watermark',
-        meta: {
-          title: t('router.watermark')
-        }
-      },
       {
         path: 'qrcode',
         component: () => import('@/views/Components/Qrcode.vue'),
@@ -311,6 +303,27 @@ export const asyncRouterMap: AppRouteRecordRaw[] = [
       }
     ]
   },
+  {
+    path: '/hooks',
+    component: Layout,
+    redirect: '/hooks/useWatermark',
+    name: 'Hooks',
+    meta: {
+      title: t('router.component'),
+      icon: 'ic:outline-webhook',
+      alwaysShow: true
+    },
+    children: [
+      {
+        path: 'useWatermark',
+        component: () => import('@/views/hooks/useWatermark.vue'),
+        name: 'UseWatermark',
+        meta: {
+          title: 'useWatermark'
+        }
+      }
+    ]
+  },
   {
     path: '/level',
     component: Layout,

src/views/hooks/useWatermark.vue

@@ -20,12 +20,12 @@ onBeforeUnmount(() => {
 </script>
 
 <template>
-  <ContentWrap :title="t('watermarkDemo.watermark')">
+  <ContentWrap title="useWatermark">
     <ElButton type="primary" @click="setWatermark(title)">
       {{ t('watermarkDemo.createdWatermark') }}
     </ElButton>
     <ElButton type="danger" @click="clear">{{ t('watermarkDemo.clearWatermark') }}</ElButton>
-    <ElButton type="warning" @click="setWatermark(`${title}-new`)">
+    <ElButton type="warning" @click="setWatermark(`New${title}`)">
       {{ t('watermarkDemo.resetWatermark') }}
     </ElButton>
   </ContentWrap>