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