💬 补充 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>
+```