💬 补充 hooks 文档

example/docs/zh-CN/components/icon.md

@@ -72,6 +72,31 @@ export default {
 
 :::
 
+
+::: title 图标组件
+:::
+
+<br>
+
+::: describe 在 0.2.4 版本后, 我们支持使用组件化调用的方式使用图标, 但你需要安装 `@layui/icons-vue` 库。
+:::
+
+```
+npm install @layui/icons-vue
+```
+
+```vue
+<template>
+  <!-- 组件图标 -->
+  <AlignCenterIcon></AlignCenterIcon>
+  <DiamondIcon></DiamondIcon>
+</template>
+
+<script setup>
+  import { AlignCenterIcon, DiamondIcon } from '@layui/icons-vue';
+</script>
+```
+
 ::: title 图标列表
 :::
 

example/docs/zh-CN/components/modal.md

@@ -5,10 +5,8 @@
 
 <template>
   <lay-button @click="changeVisible1" type="primary">基础使用</lay-button>
-  <lay-modal title="基础使用" v-model:visible="visible1">
-    <div style="padding:10px">
+  <lay-modal title="基础使用" v-model="visible1">
     这是一个基础弹窗
-    </div>
   </lay-modal>
 </template>
 
@@ -40,10 +38,8 @@ export default {
 
 <template>
   <lay-button @click="changeVisible2" type="primary">允许拖动</lay-button>
-  <lay-modal title="允许拖动" v-model:visible="visible2" move="true">
-    <div style="padding:10px">
+  <lay-modal title="允许拖动" v-model="visible2">
       这是一个可以拖拽的弹窗
-    </div>
   </lay-modal>
 </template>
 
@@ -75,7 +71,7 @@ export default {
 
 <template>
   <lay-button @click="changeVisible3" type="primary">放大缩小</lay-button>
-  <lay-modal title="放大缩小" v-model:visible="visible3" move="true" maxmin="true">
+  <lay-modal title="放大缩小" v-model="visible3" move="true" maxmin="true">
       <div style="padding:10px">
         该弹窗支持放大缩小
       </div>
@@ -110,7 +106,7 @@ export default {
 
 <template>
   <lay-button @click="changeVisible4" type="primary">指定位置</lay-button>
-  <lay-modal title="指定位置" v-model:visible="visible4" move="true" :offset="['100px','100px']">
+  <lay-modal title="指定位置" v-model="visible4" move="true" :offset="['100px','100px']">
       <div style="padding:10px">
       指定弹窗显示的默认位置
       </div>
@@ -145,7 +141,7 @@ export default {
 
 <template>
   <lay-button @click="changeVisible5" type="primary">远程窗体</lay-button>
-  <lay-modal title="加载 Iframe 内容" width="500px" height="400px" maxmin="true" v-model:visible="visible5" move="true" :type="type5" content="http://www.pearadmin.com"></lay-modal>
+  <lay-modal title="加载 Iframe 内容" width="500px" height="400px" maxmin="true" v-model="visible5" move="true" :type="type5" content="http://www.pearadmin.com"></lay-modal>
 </template>
 
 <script>
@@ -178,7 +174,7 @@ export default {
 
 <template>
   <lay-button @click="changeVisible6" type="primary">定义操作</lay-button>
-  <lay-modal title="定义操作" v-model:visible="visible6" move="true" :btn="btn6">
+  <lay-modal title="定义操作" v-model="visible6" move="true" :btn="btn6">
     <div style="padding:10px">
     定义一组弹窗操作按钮
     </div>
@@ -218,7 +214,7 @@ export default {
 
 <template>
   <lay-button @click="changeVisible7" type="primary">开启遮盖</lay-button>
-  <lay-modal title="开启遮盖" move="true" shade="false" v-model:visible="visible7">
+  <lay-modal title="开启遮盖" move="true" shade="false" v-model="visible7">
     <div style="padding:10px">
       允许点击遮盖层关闭弹窗
     </div>

example/docs/zh-CN/guide/changelog.md

@@ -10,6 +10,11 @@
 ::: demo
 <template>
 <lay-timeline>
+<lay-timeline-item title="0.2.7">
+[依赖] hooks-vue 0.1.2。<br>
+[升级] layer-vue 1.0.3。<br>
+[修复] icons-vue 依赖 not found。<br> 
+</lay-timeline-item>
 <lay-timeline-item title="0.2.6">
 [依赖] hooks-vue 0.1.2。<br>
 [升级] layer-vue 1.0.3。<br>

example/docs/zh-CN/guide/getStarted.md

@@ -1,14 +1,6 @@
 ::: title 快速上手
 :::
 
-<br>
-
-::: describe 这里是 Layui 的 Vue 实现，开发和服务于企业级后台产品。
-:::
-
-<img src="https://portrait.gitee.com/uploads/avatars/namespace/2849/8547475_layui-vue_1633242524.png" style="margin-left:24px;border-radius: 10px;" width="140px" />
-
-<br>
 <br>
 <br>
 

example/docs/zh-CN/hooks/useBoolean.md

@@ -0,0 +1,21 @@
+::: title 基础使用
+:::
+
+::: block 使 用 useBoolean 创 建 布 尔 类 型 的 Ref 响 应 变 量
+:::
+
+```vue
+<script>
+import { useBoolean } from '@layui/hooks-vue'
+
+export default {
+  setup() {
+    const { setTrue, setFalse } = useBoolean(true)
+    return {
+        setTrue,
+        setFalse
+    }
+  },
+}
+</script>
+```

example/docs/zh-CN/hooks/useClickOutside.md

@@ -11,7 +11,7 @@
 
 <script>
 import { ref, watch } from 'vue'
-import useClickOutside from '/@src/hooks/useClickOutside'
+import { useClickOutside } from '@layui/hooks-vue'
 
 export default {
   setup() {

example/docs/zh-CN/hooks/useFullScreen.md

@@ -10,7 +10,7 @@
 </template>
 
 <script>
-import useFullScreen from '/@src/hooks/useFullScreen'
+import { useFullScreen } from '@layui/hooks-vue'
 
 export default {
   setup() {

example/docs/zh-CN/hooks/useMove.md

@@ -11,7 +11,7 @@
 
 <script>
 import { ref, watch, onMounted } from 'vue'
-import useMove from '/@src/hooks/useMove'
+import { useMove } from '@layui/hooks-vue'
 
 export default {
   setup() {

example/docs/zh-CN/hooks/useStarted.md

@@ -0,0 +1,12 @@
+::: title 快速上手
+:::
+
+<br>
+<br>
+
+::: describe 1.使用 npm 下载
+:::
+
+```
+npm install @layui/hooks-vue --save
+```

example/docs/zh-CN/hooks/useState.md

@@ -0,0 +1,21 @@
+::: title 基础使用
+:::
+
+::: block 使 用 useState 创 建 Ref 响 应 变 量
+:::
+
+```vue
+<script>
+import { useState } from '@layui/hooks-vue'
+
+export default {
+  setup() {
+    const { state, setState } = useState(0)
+    return {
+        state,
+        setState
+    }
+  },
+}
+</script>
+```

example/src/layouts/Layout.vue

@@ -43,7 +43,7 @@
           </a>
         </li>
         <li class="layui-nav-item">
-          <a href="javascript:void(0)"> 0.2.6 </a>
+          <a href="javascript:void(0)"> 0.2.7 </a>
         </li>
       </ul>
     </lay-header>

example/src/main.ts

@@ -2,7 +2,7 @@ import Layout from './App.vue'
 import { App, createApp as _createApp, createSSRApp } from 'vue'
 import { createRouter } from './router/index'
 import { Router } from 'vue-router'
-import Layui from '/@src/index'
+import Layui from '../../src/index'
 import LayCode from './components/LayCode.vue'
 import LaySearch from './components/LaySearch.vue'
 import LayTableBox from './components/LayTableBox.vue'

example/src/router/zh-CN.ts

@@ -271,6 +271,12 @@ const zhCN = [
         component: Hooks,
         meta: { title: 'hooks' },
         children: [
+          {
+            path: '/zh-CN/hooks/useStarted',
+            component: () =>
+              import('../../docs/zh-CN/hooks/useStarted.md'),
+            meta: { title: 'useStarted' },
+          },
           {
             path: '/zh-CN/hooks/useClickOutside',
             component: () =>
@@ -286,6 +292,15 @@ const zhCN = [
             path: '/zh-CN/hooks/useMove',
             component: () => import('../../docs/zh-CN/hooks/useMove.md'),
             meta: { title: 'useMove' },
+          },          {
+            path: '/zh-CN/hooks/useState',
+            component: () => import('../../docs/zh-CN/hooks/useState.md'),
+            meta: { title: 'useState' },
+          },
+          {
+            path: '/zh-CN/hooks/useBoolean',
+            component: () => import('../../docs/zh-CN/hooks/useBoolean.md'),
+            meta: { title: 'useBoolean' },
           },
         ],
       },

example/src/view/hooks.vue

@@ -68,6 +68,12 @@ export default {
         id: 1,
         title: 'hooks',
         children: [
+          {
+            id: 0,
+            title: '开始',
+            subTitle: 'useStarted',
+            path: '/zh-CN/hooks/useStarted',
+          },
           {
             id: 1,
             title: '事件',
@@ -85,6 +91,16 @@ export default {
             title: '全屏',
             subTitle: 'useFullScreen',
             path: '/zh-CN/hooks/useFullScreen',
+          },{
+            id: 3,
+            title: '状态',
+            subTitle: 'useState',
+            path: '/zh-CN/hooks/useState',
+          },{
+            id: 4,
+            title: '布尔',
+            subTitle: 'useBoolean',
+            path: '/zh-CN/hooks/useBoolean',
           },
         ],
       },

example/src/view/index.vue

@@ -28,7 +28,7 @@
           >
         </div>
         <div class="site-version">
-          <span>当前版本：v<cite class="site-showv">0.2.6</cite></span>
+          <span>当前版本：v<cite class="site-showv">0.2.7</cite></span>
           <span
             ><router-link
               class="layui-inline site-down"