From 0ea613dbb0f0c61d70ef04b17d113bae240a3cf3 Mon Sep 17 00:00:00 2001
From: dingyongya <yahya_dyy@163.com>
Date: Wed, 29 Dec 2021 15:47:31 +0800
Subject: [PATCH 01/29] =?UTF-8?q?1.=E9=AA=A8=E6=9E=B6=E5=B1=8F=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6=E5=B0=81=E8=A3=85?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 example/docs/zh-CN/components/skeleton.md | 109 ++++++++++++++++++++++
 example/src/router/zh-CN.ts               |   5 +
 example/src/view/component.vue            |   6 ++
 src/index.ts                              |   6 ++
 src/module/skeleton/index.less            |  72 ++++++++++++++
 src/module/skeleton/index.ts              |   9 ++
 src/module/skeleton/index.vue             |  34 +++++++
 src/module/skeletonItem/index.ts          |   9 ++
 src/module/skeletonItem/index.vue         |  19 ++++
 9 files changed, 269 insertions(+)
 create mode 100644 example/docs/zh-CN/components/skeleton.md
 create mode 100644 src/module/skeleton/index.less
 create mode 100644 src/module/skeleton/index.ts
 create mode 100644 src/module/skeleton/index.vue
 create mode 100644 src/module/skeletonItem/index.ts
 create mode 100644 src/module/skeletonItem/index.vue

diff --git a/example/docs/zh-CN/components/skeleton.md b/example/docs/zh-CN/components/skeleton.md
new file mode 100644
index 00000000..0ba342ae
--- /dev/null
+++ b/example/docs/zh-CN/components/skeleton.md
@@ -0,0 +1,109 @@
+::: title 基础使用
+:::
+
+
+::: demo
+
+<template>
+<div>
+<div style="margin-bottom: 10px">
+<lay-switch v-model="loading" active-text="加载" inactive-text="关闭"></lay-switch>
+</div>
+  <lay-skeleton :rows="4" :loading="loading" animated>
+    <p style="margin-bottom: 18px">1 layui-vue , 基 于 vue 3.0 的 桌 面 端 组 件 库 , layui 的 另 一 种 呈 现 方 式</p>
+    <p style="margin-bottom: 18px">2 layui-vue , 基 于 vue 3.0 的 桌 面 端 组 件 库 , layui 的 另 一 种 呈 现 方 式</p>
+    <p style="margin-bottom: 18px">3 layui-vue , 基 于 vue 3.0 的 桌 面 端 组 件 库 , layui 的 另 一 种 呈 现 方 式</p>
+    <p style="margin-bottom: 18px">4 layui-vue , 基 于 vue 3.0 的 桌 面 端 组 件 库 , layui 的 另 一 种 呈 现 方 式</p>
+  </lay-skeleton>
+</div>
+</template>
+
+<script>
+import { ref } from 'vue';
+
+export default {
+  setup() {
+    const loading = ref(true);
+    return {
+        loading,
+    }
+  }
+}
+</script>
+
+:::
+
+::: title 图片
+:::
+
+
+::: demo
+
+<template>
+<div>
+<div style="margin-bottom: 10px">
+<lay-switch v-model="loading" active-text="加载" inactive-text="关闭"></lay-switch>
+</div>
+  <lay-skeleton :loading="loading" animated>
+        <template #skeleton>
+            <lay-skeleton-item type="image"/>
+            <lay-skeleton-item type="p" style="width: 240px"/>
+        </template>
+    <div class="img-content">
+        <img src="https://portrait.gitee.com/uploads/avatars/user/2813/8441097_shaynas_1610801433.png" />
+        <p style="margin-top: 18px">layui-vue 发展史....</p>
+    </div>
+  </lay-skeleton>
+</div>
+</template>
+
+<script>
+import { ref } from 'vue';
+
+export default {
+  setup() {
+    const loading = ref(true);
+    return {
+        loading,
+    }
+  }
+}
+</script>
+
+<style>
+    .img-content {
+        width: 240px;
+        height: 240px;
+    }
+</style>
+
+:::
+
+::: title 骨架屏属性
+:::
+
+::: table
+
+| 属性  | 描述 | 可选值 |
+| ----- | ---- | ------ |
+| loading | 是否显示 | `true` `false`     |
+| rows | 显示行数 | --     |
+| animated | 是否动画 | `true` `false`    |
+| type | 展示类型 | `p` `image`    |
+
+:::
+
+::: title 骨架屏插槽
+:::
+
+::: table
+
+| 插槽   | 描述     | 可选值 |
+| ------ | -------- | ------ |
+| default| 默认插槽 | --     |
+| skeleton | 自定义插槽 | --     |
+
+:::
+
+::: comment
+:::
\ No newline at end of file
diff --git a/example/src/router/zh-CN.ts b/example/src/router/zh-CN.ts
index 4b6b15a8..302adf33 100644
--- a/example/src/router/zh-CN.ts
+++ b/example/src/router/zh-CN.ts
@@ -76,6 +76,11 @@ const zhCN = [
         component: Component,
         meta: { title: '组件' },
         children: [
+          {
+            path: '/zh-CN/components/skeleton',
+            component: () => import('../../docs/zh-CN/components/skeleton.md'),
+            meta: { title: '骨架屏' },
+          },
           {
             path: '/zh-CN/components/layout',
             component: () => import('../../docs/zh-CN/components/layout.md'),
diff --git a/example/src/view/component.vue b/example/src/view/component.vue
index b3f63311..aa51a611 100644
--- a/example/src/view/component.vue
+++ b/example/src/view/component.vue
@@ -98,6 +98,12 @@ export default {
         id: 1,
         title: '布局',
         children: [
+          {
+            id: 111,
+            title: '骨架屏',
+            subTitle: 'skeleton',
+            path: '/zh-CN/components/skeleton',
+          },
           {
             id: 4,
             title: '布局',
diff --git a/src/index.ts b/src/index.ts
index 1dab2a79..0fa7b712 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -67,6 +67,8 @@ import LayCarouselItem from './module/carouselItem/index'
 import LayColorPicker from './module/colorPicker/index'
 import LayTooltip from './module/tooltip/index'
 import LayInputNumber from './module/inputNumber/index'
+import LaySkeleton from './module/skeleton/index'
+import LaySkeletonItem from './module/skeletonItem/index'
 
 const components: Record<string, IDefineComponent> = {
   LayRadio,
@@ -129,6 +131,8 @@ const components: Record<string, IDefineComponent> = {
   LayModal,
   LayTooltip,
   LayInputNumber,
+  LaySkeleton,
+  LaySkeletonItem,
 }
 
 const install = (app: App, options?: InstallOptions): void => {
@@ -142,6 +146,8 @@ const install = (app: App, options?: InstallOptions): void => {
 }
 
 export {
+  LaySkeleton,
+  LaySkeletonItem,
   LayRadio,
   LayIcon,
   LayButton,
diff --git a/src/module/skeleton/index.less b/src/module/skeleton/index.less
new file mode 100644
index 00000000..4765a72d
--- /dev/null
+++ b/src/module/skeleton/index.less
@@ -0,0 +1,72 @@
+.lay-skeleton{
+  .lay-skeleton-item {
+    height: 16px;
+    border-radius: 5px;
+    margin-bottom: 16px;
+    background: #eeeeee;
+  }
+  .lay-skeleton-type--p{
+    height: 16px;
+    border-radius: 5px;
+    margin-bottom: 16px;
+    background: #eeeeee;
+  }
+
+  .lay-skeleton-type--image{
+    width: 240px;
+    height: 240px;
+    background: #eeeeee;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    i{
+      font-size: 40px;
+    }
+  }
+}
+
+.lay-skeleton-animated {
+  .lay-skeleton-type--image{
+    width: 240px;
+    height: 240px !important;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    i{
+      font-size: 40px;
+    }
+  }
+  .lay-skeleton-item {
+    height: 16px;
+    border-radius: 5px;
+    margin-bottom: 16px;
+    background: #eeeeee;
+    background: linear-gradient(
+            90deg,#f2f2f2 25%,#ececec 37%,#f2f2f2 63%);
+    background-size: 400% 100%;
+    animation: lay-skeleton-loading 1.2s ease infinite;
+  }
+
+
+}
+
+
+.lay-skeleton-first {
+  width: 30%;
+}
+
+.lay-skeleton-last {
+  width: 62.8%;
+}
+
+
+
+@keyframes lay-skeleton-loading {
+  0% {
+    background-position: 100% 50%;
+  }
+
+  100% {
+    background-position: 0 50%;
+  }
+}
\ No newline at end of file
diff --git a/src/module/skeleton/index.ts b/src/module/skeleton/index.ts
new file mode 100644
index 00000000..5467d6a1
--- /dev/null
+++ b/src/module/skeleton/index.ts
@@ -0,0 +1,9 @@
+import type { App } from 'vue'
+import Component from './index.vue'
+import type { IDefineComponent } from '../type/index'
+
+Component.install = (app: App) => {
+    app.component(Component.name || 'LaySkeleton', Component)
+}
+
+export default Component as IDefineComponent
diff --git a/src/module/skeleton/index.vue b/src/module/skeleton/index.vue
new file mode 100644
index 00000000..4efe186c
--- /dev/null
+++ b/src/module/skeleton/index.vue
@@ -0,0 +1,34 @@
+<template>
+  <div :class="['lay-skeleton', animated ? 'lay-skeleton-animated': '',]" v-bind="$attrs">
+    <template v-if="loading">
+      <slot name="skeleton">
+        <lay-skeleton-item
+            v-for="item in rows"
+            :class="[
+              item===1? 'lay-skeleton-first': '',
+              item === rows? 'lay-skeleton-last': '']"
+            type="p"
+        ></lay-skeleton-item>
+      </slot>
+    </template>
+    <slot v-else></slot>
+  </div>
+</template>
+
+<script setup name="LaySkeleton" lang="ts">
+import LaySkeletonItem from '../skeletonItem/index.vue'
+import './index.less'
+import { defineProps, withDefaults} from "vue";
+
+export interface LaySkeletonProps {
+  rows?: number;
+  loading?: boolean;
+  animated?: boolean;
+}
+
+const props = withDefaults(defineProps<LaySkeletonProps>(), {
+  rows: 4,
+  loading: false,
+  animated: false,
+});
+</script>-
diff --git a/src/module/skeletonItem/index.ts b/src/module/skeletonItem/index.ts
new file mode 100644
index 00000000..ea5fd894
--- /dev/null
+++ b/src/module/skeletonItem/index.ts
@@ -0,0 +1,9 @@
+import type { App } from 'vue'
+import Component from './index.vue'
+import type { IDefineComponent } from '../type/index'
+
+Component.install = (app: App) => {
+    app.component(Component.name || 'LaySkeletonItem', Component)
+}
+
+export default Component as IDefineComponent
diff --git a/src/module/skeletonItem/index.vue b/src/module/skeletonItem/index.vue
new file mode 100644
index 00000000..78f8abca
--- /dev/null
+++ b/src/module/skeletonItem/index.vue
@@ -0,0 +1,19 @@
+<template>
+  <div :class="['lay-skeleton-item',`lay-skeleton-type--${type}`]" v-bind="$attrs">
+    <div v-if="type==='image'" >
+      <lay-icon type="layui-icon-picture"></lay-icon>
+    </div>
+  </div>
+</template>
+
+<script setup name="LaySkeletonItem" lang="ts">
+import { defineProps, withDefaults} from "vue";
+
+export interface LaySkeletonProps {
+  type?: string;
+}
+
+const props = withDefaults(defineProps<LaySkeletonProps>(), {
+  type: 'p',
+});
+</script>-

From 2c4bf58b3d74827fbc47cfdfcb6565cd5518016f Mon Sep 17 00:00:00 2001
From: xumi <hmxing1105@163.com>
Date: Wed, 29 Dec 2021 23:09:39 +0800
Subject: [PATCH 02/29] =?UTF-8?q?[=E5=AE=8C=E5=96=84]=E4=B8=AA=E4=BA=BA?=
 =?UTF-8?q?=E6=88=90=E5=91=98=E4=BF=A1=E6=81=AF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 example/docs/zh-CN/guide/member.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/example/docs/zh-CN/guide/member.md b/example/docs/zh-CN/guide/member.md
index a6afa5cd..847decd1 100644
--- a/example/docs/zh-CN/guide/member.md
+++ b/example/docs/zh-CN/guide/member.md
@@ -81,13 +81,13 @@
             焦点：layui-vue
         </lay-col>
         <lay-col md="4">
-            地点：未知
+            地点：China GuangZhou
         </lay-col>
         <lay-col md="5">
             生态：暂无
         </lay-col>
         <lay-col md="6">
-            其他：Gitee Github
+            其他：<a href="https://gitee.com/xumisky">Gitee</a> <a href="https://github.com/xumiSky">Github</a>
         </lay-col>
     </lay-row>
 </lay-card>

From 1ab133eb0b82e539f623ff8512e7e52736c3780c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=B0=B1=E7=9C=A0=E5=84=80=E5=BC=8F?= <854085467@qq.com>
Date: Thu, 30 Dec 2021 00:30:15 +0800
Subject: [PATCH 03/29] =?UTF-8?q?=E6=96=B0=E5=A2=9E=20publish=20=E5=8F=91?=
 =?UTF-8?q?=E5=B8=83=E5=91=BD=E4=BB=A4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 example/docs/zh-CN/guide/member.md | 60 +++++++++++++++---------------
 package.json                       |  5 ++-
 2 files changed, 34 insertions(+), 31 deletions(-)

diff --git a/example/docs/zh-CN/guide/member.md b/example/docs/zh-CN/guide/member.md
index 847decd1..7cd1230c 100644
--- a/example/docs/zh-CN/guide/member.md
+++ b/example/docs/zh-CN/guide/member.md
@@ -9,14 +9,11 @@
         <lay-col md="2">
             就眠仪式
         </lay-col>
-        <lay-col md="6">
+        <lay-col md="10">
             焦点：layui-vue
         </lay-col>
         <lay-col md="4">
-            地点：China Beijing
-        </lay-col>
-        <lay-col md="5">
-            生态：Pear Admin
+            地点：中国 北京
         </lay-col>
         <lay-col md="6">
             其他：Gitee Github
@@ -31,14 +28,11 @@
         <lay-col md="2">
             落小梅
         </lay-col>
-        <lay-col md="6">
+        <lay-col md="10">
             焦点：tree table
         </lay-col>
         <lay-col md="4">
-            地点：China Hunan
-        </lay-col>
-        <lay-col md="5">
-            生态：Pear Admin
+            地点：中国 湖南
         </lay-col>
         <lay-col md="6">
             其他：Gitee Github
@@ -54,14 +48,11 @@
         <lay-col md="2">
             halo
         </lay-col>
-        <lay-col md="6">
+        <lay-col md="10">
             焦点：slider
         </lay-col>
         <lay-col md="4">
-            地点：China Beijing
-        </lay-col>
-        <lay-col md="5">
-            生态：暂无
+            地点：中国 北京
         </lay-col>
         <lay-col md="6">
             其他：Gitee Github
@@ -77,14 +68,11 @@
         <lay-col md="2">
             须弥
         </lay-col>
-        <lay-col md="6">
+        <lay-col md="10">
             焦点：layui-vue
         </lay-col>
         <lay-col md="4">
-            地点：China GuangZhou
-        </lay-col>
-        <lay-col md="5">
-            生态：暂无
+            地点：中国 广州
         </lay-col>
         <lay-col md="6">
             其他：<a href="https://gitee.com/xumisky">Gitee</a> <a href="https://github.com/xumiSky">Github</a>
@@ -100,14 +88,11 @@
         <lay-col md="2">
             Sight
         </lay-col>
-        <lay-col md="6">
+        <lay-col md="10">
             焦点：count-up backtop
         </lay-col>
         <lay-col md="4">
-            地点：未知
-        </lay-col>
-        <lay-col md="5">
-            生态：暂无
+            地点：中国 未知
         </lay-col>
         <lay-col md="6">
             其他：Gitee Github
@@ -123,14 +108,31 @@
         <lay-col md="2">
             finalsummer
         </lay-col>
-        <lay-col md="6">
+        <lay-col md="10">
             焦点：layer-vue
         </lay-col>
         <lay-col md="4">
-            地点：未知
+            地点：中国 未知
         </lay-col>
-        <lay-col md="5">
-            生态：暂无
+        <lay-col md="6">
+            其他：Gitee Github
+        </lay-col>
+    </lay-row>
+</lay-card>
+
+<lay-card>
+    <lay-row>
+        <lay-col md="1">
+            <lay-avatar src="http://mms0.baidu.com/it/u=1690972933,1482111264&fm=253&app=138&f=JPEG&fmt=auto&q=75?w=500&h=500"></lay-avatar>
+        </lay-col>
+        <lay-col md="2">
+            莫名点
+        </lay-col>
+        <lay-col md="10">
+            焦点：skeleton
+        </lay-col>
+        <lay-col md="4">
+            地点：中国 未知
         </lay-col>
         <lay-col md="6">
             其他：Gitee Github
diff --git a/package.json b/package.json
index a857c153..50e65466 100644
--- a/package.json
+++ b/package.json
@@ -26,8 +26,9 @@
     "build": "vite build --emptyOutDir && npm run build:types",
     "build:types": "rimraf types && tsc -d",
     "build:example": "vite build example",
-    "lint:eslint": "eslint \"src/**/*.{vue,ts,tsx}\" --fix",
-    "lint:prettier": "prettier --write  \"src/**/*.{js,json,tsx,css,less,scss,vue,html,md}\"",
+    "lint:eslint": "eslint 'src/**/*.{vue,ts,tsx}' --fix",
+    "lint:prettier": "prettier --write  'src/**/*'",
+    "publish": "npm run build && npm publish --access=public",
     "commit": "git cz"
   },
   "dependencies": {

From ee4c5ebb0c261f93ef752a5f3432c8e90b8c0928 Mon Sep 17 00:00:00 2001
From: sight <1453017105@qq.com>
Date: Thu, 30 Dec 2021 00:44:43 +0800
Subject: [PATCH 04/29] =?UTF-8?q?feat(docs):1.md=E7=9B=AE=E5=BD=95?=
 =?UTF-8?q?=E7=BB=84=E4=BB=B6=202.=E7=94=B1=E4=BA=8Ebody=E5=8F=98=E7=AA=84?=
 =?UTF-8?q?=EF=BC=8C=E4=BF=AE=E6=94=B9md=20table=E5=88=9D=E5=A7=8B?=
 =?UTF-8?q?=E5=AE=BD=E5=BA=A6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 example/docs/zh-CN/components/animation.md   |   3 +
 example/docs/zh-CN/components/avatar.md      |   3 +
 example/docs/zh-CN/components/backtop.md     |   3 +
 example/docs/zh-CN/components/badge.md       |   3 +
 example/docs/zh-CN/components/block.md       |   3 +
 example/docs/zh-CN/components/breadcrumb.md  |   3 +
 example/docs/zh-CN/components/button.md      |   3 +
 example/docs/zh-CN/components/card.md        |   3 +
 example/docs/zh-CN/components/carousel.md    |   3 +
 example/docs/zh-CN/components/checkbox.md    |   3 +
 example/docs/zh-CN/components/collapse.md    |   3 +
 example/docs/zh-CN/components/color.md       |   3 +
 example/docs/zh-CN/components/colorPicker.md |   3 +
 example/docs/zh-CN/components/confirm.md     |   3 +
 example/docs/zh-CN/components/container.md   |   3 +
 example/docs/zh-CN/components/countup.md     |   3 +
 example/docs/zh-CN/components/datePicker.md  |   3 +
 example/docs/zh-CN/components/dropdown.md    |   3 +
 example/docs/zh-CN/components/empty.md       |   3 +
 example/docs/zh-CN/components/field.md       |   6 +
 example/docs/zh-CN/components/form.md        |   3 +
 example/docs/zh-CN/components/grid.md        |   3 +
 example/docs/zh-CN/components/icon.md        |   3 +
 example/docs/zh-CN/components/iconPicker.md  |   3 +
 example/docs/zh-CN/components/input.md       |   3 +
 example/docs/zh-CN/components/inputNumber.md |   3 +
 example/docs/zh-CN/components/layout.md      |   3 +
 example/docs/zh-CN/components/line.md        |   6 +
 example/docs/zh-CN/components/load.md        |   3 +
 example/docs/zh-CN/components/menu.md        |   3 +
 example/docs/zh-CN/components/modal.md       |   3 +
 example/docs/zh-CN/components/msg.md         |   3 +
 example/docs/zh-CN/components/page.md        |   3 +
 example/docs/zh-CN/components/panel.md       |   3 +
 example/docs/zh-CN/components/progress.md    |   3 +
 example/docs/zh-CN/components/radio.md       |   3 +
 example/docs/zh-CN/components/rate.md        |   3 +
 example/docs/zh-CN/components/select.md      |   3 +
 example/docs/zh-CN/components/slider.md      |   3 +
 example/docs/zh-CN/components/switch.md      |   3 +
 example/docs/zh-CN/components/tab.md         |   3 +
 example/docs/zh-CN/components/table.md       |   3 +
 example/docs/zh-CN/components/textarea.md    |   3 +
 example/docs/zh-CN/components/timeline.md    |   3 +
 example/docs/zh-CN/components/tooltip.md     |   3 +
 example/docs/zh-CN/components/transfer.md    |   3 +
 example/docs/zh-CN/components/tree.md        |   3 +
 example/src/components/LayAsideAnchor.vue    | 177 +++++++++++++++++++
 example/src/components/LayTableBox.vue       |   4 +-
 example/src/main.ts                          |   2 +
 example/src/plugin/common-plugins.ts         |   2 +
 example/src/plugin/create-anchor.ts          |  38 ++++
 example/src/plugin/create-title.ts           |   4 +-
 example/src/view/component.vue               |   2 +-
 54 files changed, 371 insertions(+), 5 deletions(-)
 create mode 100644 example/src/components/LayAsideAnchor.vue
 create mode 100644 example/src/plugin/create-anchor.ts

diff --git a/example/docs/zh-CN/components/animation.md b/example/docs/zh-CN/components/animation.md
index 495869be..9980d4d4 100644
--- a/example/docs/zh-CN/components/animation.md
+++ b/example/docs/zh-CN/components/animation.md
@@ -1,3 +1,6 @@
+::: anchor
+:::
+
 ::: title 基础使用
 :::
 
diff --git a/example/docs/zh-CN/components/avatar.md b/example/docs/zh-CN/components/avatar.md
index 618cd37c..ca80adf5 100644
--- a/example/docs/zh-CN/components/avatar.md
+++ b/example/docs/zh-CN/components/avatar.md
@@ -1,3 +1,6 @@
+::: anchor
+:::
+
 ::: title 基础使用
 :::
 
diff --git a/example/docs/zh-CN/components/backtop.md b/example/docs/zh-CN/components/backtop.md
index 9b4534c5..d7613aeb 100644
--- a/example/docs/zh-CN/components/backtop.md
+++ b/example/docs/zh-CN/components/backtop.md
@@ -1,3 +1,6 @@
+::: anchor
+:::
+
 ::: title 基础使用
 
 ###### 回到顶部组件的默认样式，<code>lay-backtop</code> 会自动寻找最近的可滚动祖先元素，也可以使用 `target` 属性指定触发滚动事件的元素，通过滑动来查看页面右下角的正方形按钮。
diff --git a/example/docs/zh-CN/components/badge.md b/example/docs/zh-CN/components/badge.md
index 72cb6320..72563b1e 100644
--- a/example/docs/zh-CN/components/badge.md
+++ b/example/docs/zh-CN/components/badge.md
@@ -1,3 +1,6 @@
+::: anchor
+:::
+
 ::: title 基础使用
 :::
 
diff --git a/example/docs/zh-CN/components/block.md b/example/docs/zh-CN/components/block.md
index 043b8f51..cf366eb1 100644
--- a/example/docs/zh-CN/components/block.md
+++ b/example/docs/zh-CN/components/block.md
@@ -1,3 +1,6 @@
+::: anchor
+:::
+
 ::: title 基础使用
 :::
 
diff --git a/example/docs/zh-CN/components/breadcrumb.md b/example/docs/zh-CN/components/breadcrumb.md
index 5cead785..9dca4890 100644
--- a/example/docs/zh-CN/components/breadcrumb.md
+++ b/example/docs/zh-CN/components/breadcrumb.md
@@ -1,3 +1,6 @@
+::: anchor
+:::
+
 ::: title 基础使用
 :::
 
diff --git a/example/docs/zh-CN/components/button.md b/example/docs/zh-CN/components/button.md
index 79d2e39a..1908d39a 100644
--- a/example/docs/zh-CN/components/button.md
+++ b/example/docs/zh-CN/components/button.md
@@ -1,3 +1,6 @@
+::: anchor
+:::
+
 ::: title 基础使用
 :::
 
diff --git a/example/docs/zh-CN/components/card.md b/example/docs/zh-CN/components/card.md
index 020d1a9e..ee659100 100644
--- a/example/docs/zh-CN/components/card.md
+++ b/example/docs/zh-CN/components/card.md
@@ -1,3 +1,6 @@
+::: anchor
+:::
+
 ::: title 基础使用
 :::
 
diff --git a/example/docs/zh-CN/components/carousel.md b/example/docs/zh-CN/components/carousel.md
index a513e16f..5d973b26 100644
--- a/example/docs/zh-CN/components/carousel.md
+++ b/example/docs/zh-CN/components/carousel.md
@@ -1,3 +1,6 @@
+::: anchor
+:::
+
 ::: title 基础使用
 :::
 
diff --git a/example/docs/zh-CN/components/checkbox.md b/example/docs/zh-CN/components/checkbox.md
index 8376eeed..bde533f0 100644
--- a/example/docs/zh-CN/components/checkbox.md
+++ b/example/docs/zh-CN/components/checkbox.md
@@ -1,3 +1,6 @@
+::: anchor
+:::
+
 ::: title 基础使用
 :::
 
diff --git a/example/docs/zh-CN/components/collapse.md b/example/docs/zh-CN/components/collapse.md
index 3de704bf..38a51b7f 100644
--- a/example/docs/zh-CN/components/collapse.md
+++ b/example/docs/zh-CN/components/collapse.md
@@ -1,3 +1,6 @@
+::: anchor
+:::
+
 ::: title 基础使用
 :::
 
diff --git a/example/docs/zh-CN/components/color.md b/example/docs/zh-CN/components/color.md
index f62e3ab6..786ba741 100644
--- a/example/docs/zh-CN/components/color.md
+++ b/example/docs/zh-CN/components/color.md
@@ -1,3 +1,6 @@
+::: anchor
+:::
+
 ::: title 主色调
 :::
 
diff --git a/example/docs/zh-CN/components/colorPicker.md b/example/docs/zh-CN/components/colorPicker.md
index cf6176c7..d60f63a8 100644
--- a/example/docs/zh-CN/components/colorPicker.md
+++ b/example/docs/zh-CN/components/colorPicker.md
@@ -1,3 +1,6 @@
+::: anchor
+:::
+
 ::: title 基础使用
 :::
 
diff --git a/example/docs/zh-CN/components/confirm.md b/example/docs/zh-CN/components/confirm.md
index ba92fcaf..fce0b3c4 100644
--- a/example/docs/zh-CN/components/confirm.md
+++ b/example/docs/zh-CN/components/confirm.md
@@ -1,3 +1,6 @@
+::: anchor
+:::
+
 ::: title 基础使用
 :::
 
diff --git a/example/docs/zh-CN/components/container.md b/example/docs/zh-CN/components/container.md
index eb146a36..f6bba2c4 100644
--- a/example/docs/zh-CN/components/container.md
+++ b/example/docs/zh-CN/components/container.md
@@ -1,3 +1,6 @@
+::: anchor
+:::
+
 ::: title 普通容器
 :::
 
diff --git a/example/docs/zh-CN/components/countup.md b/example/docs/zh-CN/components/countup.md
index bfbfec75..6641070f 100644
--- a/example/docs/zh-CN/components/countup.md
+++ b/example/docs/zh-CN/components/countup.md
@@ -1,3 +1,6 @@
+::: anchor
+:::
+
 ::: title 基础使用
 :::
 
diff --git a/example/docs/zh-CN/components/datePicker.md b/example/docs/zh-CN/components/datePicker.md
index 420ab963..404a7e9b 100644
--- a/example/docs/zh-CN/components/datePicker.md
+++ b/example/docs/zh-CN/components/datePicker.md
@@ -1,3 +1,6 @@
+::: anchor
+:::
+
 ::: title 基础使用
 :::
 
diff --git a/example/docs/zh-CN/components/dropdown.md b/example/docs/zh-CN/components/dropdown.md
index 930126cc..3a695964 100644
--- a/example/docs/zh-CN/components/dropdown.md
+++ b/example/docs/zh-CN/components/dropdown.md
@@ -1,3 +1,6 @@
+::: anchor
+:::
+
 ::: title 基础使用
 :::
 
diff --git a/example/docs/zh-CN/components/empty.md b/example/docs/zh-CN/components/empty.md
index b877f41f..2d2be4af 100644
--- a/example/docs/zh-CN/components/empty.md
+++ b/example/docs/zh-CN/components/empty.md
@@ -1,3 +1,6 @@
+::: anchor
+:::
+
 ::: title 基础使用
 :::
 
diff --git a/example/docs/zh-CN/components/field.md b/example/docs/zh-CN/components/field.md
index a4c73024..6cd334b4 100644
--- a/example/docs/zh-CN/components/field.md
+++ b/example/docs/zh-CN/components/field.md
@@ -1,3 +1,9 @@
+::: anchor
+:::
+
+::: title 基础使用
+:::
+
 ::: demo
 
 <template>
diff --git a/example/docs/zh-CN/components/form.md b/example/docs/zh-CN/components/form.md
index 5836cc96..00b6f830 100644
--- a/example/docs/zh-CN/components/form.md
+++ b/example/docs/zh-CN/components/form.md
@@ -1,3 +1,6 @@
+::: anchor
+:::
+
 ::: title 基础使用
 :::
 
diff --git a/example/docs/zh-CN/components/grid.md b/example/docs/zh-CN/components/grid.md
index d4dbd089..e149113f 100644
--- a/example/docs/zh-CN/components/grid.md
+++ b/example/docs/zh-CN/components/grid.md
@@ -1,3 +1,6 @@
+::: anchor
+:::
+
 ::: title 基础使用
 :::
 
diff --git a/example/docs/zh-CN/components/icon.md b/example/docs/zh-CN/components/icon.md
index f873c389..f8224f70 100644
--- a/example/docs/zh-CN/components/icon.md
+++ b/example/docs/zh-CN/components/icon.md
@@ -1,3 +1,6 @@
+::: anchor
+:::
+
 ::: title 基础使用
 :::
 
diff --git a/example/docs/zh-CN/components/iconPicker.md b/example/docs/zh-CN/components/iconPicker.md
index f2536026..3e8ab2cc 100644
--- a/example/docs/zh-CN/components/iconPicker.md
+++ b/example/docs/zh-CN/components/iconPicker.md
@@ -1,3 +1,6 @@
+::: anchor
+:::
+
 ::: title 基础使用
 :::
 
diff --git a/example/docs/zh-CN/components/input.md b/example/docs/zh-CN/components/input.md
index 53a4904c..3493612f 100644
--- a/example/docs/zh-CN/components/input.md
+++ b/example/docs/zh-CN/components/input.md
@@ -1,3 +1,6 @@
+::: anchor
+:::
+
 ::: title 基础使用
 :::
 
diff --git a/example/docs/zh-CN/components/inputNumber.md b/example/docs/zh-CN/components/inputNumber.md
index 12891786..e4d88717 100644
--- a/example/docs/zh-CN/components/inputNumber.md
+++ b/example/docs/zh-CN/components/inputNumber.md
@@ -1,3 +1,6 @@
+::: anchor
+:::
+
 ::: title 基础使用
 :::
 
diff --git a/example/docs/zh-CN/components/layout.md b/example/docs/zh-CN/components/layout.md
index 3a3cc825..54e9388d 100644
--- a/example/docs/zh-CN/components/layout.md
+++ b/example/docs/zh-CN/components/layout.md
@@ -1,3 +1,6 @@
+::: anchor
+:::
+
 ::: title 基础使用
 :::
 
diff --git a/example/docs/zh-CN/components/line.md b/example/docs/zh-CN/components/line.md
index 5ac07d88..ebe7eb2a 100644
--- a/example/docs/zh-CN/components/line.md
+++ b/example/docs/zh-CN/components/line.md
@@ -1,3 +1,9 @@
+::: anchor
+:::
+
+::: title 基础使用
+:::
+
 ::: demo
 
 <template>
diff --git a/example/docs/zh-CN/components/load.md b/example/docs/zh-CN/components/load.md
index d717a49b..07bf855b 100644
--- a/example/docs/zh-CN/components/load.md
+++ b/example/docs/zh-CN/components/load.md
@@ -1,3 +1,6 @@
+::: anchor
+:::
+
 ::: title 基础使用
 :::
 
diff --git a/example/docs/zh-CN/components/menu.md b/example/docs/zh-CN/components/menu.md
index 26351f35..1ab24bb4 100644
--- a/example/docs/zh-CN/components/menu.md
+++ b/example/docs/zh-CN/components/menu.md
@@ -1,3 +1,6 @@
+::: anchor
+:::
+
 ::: title 基础使用
 :::
 
diff --git a/example/docs/zh-CN/components/modal.md b/example/docs/zh-CN/components/modal.md
index 04ece073..9f6d7a35 100644
--- a/example/docs/zh-CN/components/modal.md
+++ b/example/docs/zh-CN/components/modal.md
@@ -1,3 +1,6 @@
+::: anchor
+:::
+
 ::: title 基本使用
 :::
 
diff --git a/example/docs/zh-CN/components/msg.md b/example/docs/zh-CN/components/msg.md
index 34e848a2..401823e7 100644
--- a/example/docs/zh-CN/components/msg.md
+++ b/example/docs/zh-CN/components/msg.md
@@ -1,3 +1,6 @@
+::: anchor
+:::
+
 ::: title 基础使用
 :::
 
diff --git a/example/docs/zh-CN/components/page.md b/example/docs/zh-CN/components/page.md
index 51f60a7c..618326c2 100644
--- a/example/docs/zh-CN/components/page.md
+++ b/example/docs/zh-CN/components/page.md
@@ -1,3 +1,6 @@
+::: anchor
+:::
+
 ::: title 基础使用
 :::
 
diff --git a/example/docs/zh-CN/components/panel.md b/example/docs/zh-CN/components/panel.md
index 218d95e1..b9a17e75 100644
--- a/example/docs/zh-CN/components/panel.md
+++ b/example/docs/zh-CN/components/panel.md
@@ -1,3 +1,6 @@
+::: anchor
+:::
+
 ::: title 基础使用
 :::
 
diff --git a/example/docs/zh-CN/components/progress.md b/example/docs/zh-CN/components/progress.md
index e60d2f13..4a3424dc 100644
--- a/example/docs/zh-CN/components/progress.md
+++ b/example/docs/zh-CN/components/progress.md
@@ -1,3 +1,6 @@
+::: anchor
+:::
+
 ::: title 基础使用
 :::
 
diff --git a/example/docs/zh-CN/components/radio.md b/example/docs/zh-CN/components/radio.md
index eb260b6c..0d194a60 100644
--- a/example/docs/zh-CN/components/radio.md
+++ b/example/docs/zh-CN/components/radio.md
@@ -1,3 +1,6 @@
+::: anchor
+:::
+
 ::: title 基础使用
 :::
 
diff --git a/example/docs/zh-CN/components/rate.md b/example/docs/zh-CN/components/rate.md
index 2ac0cd43..25e3c459 100644
--- a/example/docs/zh-CN/components/rate.md
+++ b/example/docs/zh-CN/components/rate.md
@@ -1,3 +1,6 @@
+::: anchor
+:::
+
 ::: title 基础使用
 :::
 
diff --git a/example/docs/zh-CN/components/select.md b/example/docs/zh-CN/components/select.md
index 641a6a1e..5544ef36 100644
--- a/example/docs/zh-CN/components/select.md
+++ b/example/docs/zh-CN/components/select.md
@@ -1,3 +1,6 @@
+::: anchor
+:::
+
 ::: title 基础使用
 :::
 
diff --git a/example/docs/zh-CN/components/slider.md b/example/docs/zh-CN/components/slider.md
index d311fc0c..843b4c26 100644
--- a/example/docs/zh-CN/components/slider.md
+++ b/example/docs/zh-CN/components/slider.md
@@ -1,3 +1,6 @@
+::: anchor
+:::
+
 ::: title 横向
 :::
 
diff --git a/example/docs/zh-CN/components/switch.md b/example/docs/zh-CN/components/switch.md
index 9218ecf0..f391b3ed 100644
--- a/example/docs/zh-CN/components/switch.md
+++ b/example/docs/zh-CN/components/switch.md
@@ -1,3 +1,6 @@
+::: anchor
+:::
+
 ::: title 基础使用
 :::
 
diff --git a/example/docs/zh-CN/components/tab.md b/example/docs/zh-CN/components/tab.md
index 10707744..8af7bfac 100644
--- a/example/docs/zh-CN/components/tab.md
+++ b/example/docs/zh-CN/components/tab.md
@@ -1,3 +1,6 @@
+::: anchor
+:::
+
 ::: title 基础使用
 :::
 
diff --git a/example/docs/zh-CN/components/table.md b/example/docs/zh-CN/components/table.md
index 5e25e855..6ff3bdc9 100644
--- a/example/docs/zh-CN/components/table.md
+++ b/example/docs/zh-CN/components/table.md
@@ -1,3 +1,6 @@
+::: anchor
+:::
+
 ::: title 基础使用
 :::
 
diff --git a/example/docs/zh-CN/components/textarea.md b/example/docs/zh-CN/components/textarea.md
index ba43e165..13d4a7f0 100644
--- a/example/docs/zh-CN/components/textarea.md
+++ b/example/docs/zh-CN/components/textarea.md
@@ -1,3 +1,6 @@
+::: anchor
+:::
+
 ::: title 基础使用
 :::
 
diff --git a/example/docs/zh-CN/components/timeline.md b/example/docs/zh-CN/components/timeline.md
index 5fa7a8e2..9641fcb3 100644
--- a/example/docs/zh-CN/components/timeline.md
+++ b/example/docs/zh-CN/components/timeline.md
@@ -1,3 +1,6 @@
+::: anchor
+:::
+
 ::: title 基础使用
 :::
 
diff --git a/example/docs/zh-CN/components/tooltip.md b/example/docs/zh-CN/components/tooltip.md
index 30889db2..1ba1d14b 100644
--- a/example/docs/zh-CN/components/tooltip.md
+++ b/example/docs/zh-CN/components/tooltip.md
@@ -1,3 +1,6 @@
+::: anchor
+:::
+
 ::: title 基础使用
 :::
 
diff --git a/example/docs/zh-CN/components/transfer.md b/example/docs/zh-CN/components/transfer.md
index 7a8843f5..0af76e89 100644
--- a/example/docs/zh-CN/components/transfer.md
+++ b/example/docs/zh-CN/components/transfer.md
@@ -1,3 +1,6 @@
+::: anchor
+:::
+
 ::: title 基础使用
 :::
 
diff --git a/example/docs/zh-CN/components/tree.md b/example/docs/zh-CN/components/tree.md
index 581d7f85..1ff6ca5c 100644
--- a/example/docs/zh-CN/components/tree.md
+++ b/example/docs/zh-CN/components/tree.md
@@ -1,3 +1,6 @@
+::: anchor
+:::
+
 ::: demo
 
 <template>
diff --git a/example/src/components/LayAsideAnchor.vue b/example/src/components/LayAsideAnchor.vue
new file mode 100644
index 00000000..21478ff9
--- /dev/null
+++ b/example/src/components/LayAsideAnchor.vue
@@ -0,0 +1,177 @@
+<template>
+  <aside :class="classAside">
+    <div class="lay-aside-top">
+      <lay-button
+        @click="handlerBtnClick()"
+        type="primary"
+        size="xs"
+        :class="classAsideBtn"
+      >
+        <lay-icon :type="iconType" size="40"> </lay-icon>
+      </lay-button>
+    </div>
+    <lay-scroll
+      class="layui-side-scroll-bar layui-side-scroll::-webkit-scrollbar" >
+      <ul>
+        <li
+          v-for="(item, index) in anchorsComput"
+          :key="index"
+          class="lay-aside-list"
+          :class="{ active: index === curridx }"
+          @click="curridx = index"
+        >
+          <a
+            :href="`#${item}`"
+            class="lay-aside-link"
+            :class="{ active: index === curridx }"
+            >{{ item }}</a
+          >
+        </li>
+      </ul>
+    </lay-scroll>
+  </aside>
+</template>
+<script setup lang="ts">
+import { computed, ref } from "vue";
+
+const props = defineProps<{
+  anchors?: Array<string> | string;
+  currIndex: number;
+  show: boolean | string;
+}>();
+
+let curridx = ref(props.currIndex);
+const show = ref(props.show);
+const iconType = ref("layui-icon-right");
+const anchor = props.anchors;
+
+const anchorsComput = computed(() => {
+  return typeof anchor === "string" ? anchor?.split(",") : anchor;
+});
+
+const classAside = computed(() => [
+  "lay-aside",
+  { "lay-aside-collapse": !show.value },
+]);
+
+const classAsideBtn = computed(() => [
+  "lay-aside-collapse-btn",
+  { "lay-aside-collapse-btn-collapse": !show.value },
+]);
+
+const handlerBtnClick = () => {
+  show.value = !show.value;
+  iconType.value = show.value ? "layui-icon-right" : "layui-icon-left";
+};
+</script>
+<style lang="less" scoped>
+.layui-side-scroll-bar{
+  overflow-y: scroll; 
+  max-width: 156px;
+}
+.layui-side-scroll::-webkit-scrollbar {
+  width: 0;
+}
+.lay-aside {
+  position: fixed;
+  top: 65px;
+  right: 17px;
+  box-sizing: border-box;
+  width: 180px;
+  padding: 0 25px;
+  background-color: #ffffff;
+  border-left: 1px solid rgb(229 230 235);
+  transition: right 200ms;
+  height: calc(100% - 60px);
+}
+
+.lay-aside-top {
+  height: 29px;
+}
+
+.lay-aside-link {
+  display: inline-block;
+  padding: 1px 4px;
+  color: grey;
+  font-size: 13px;
+  line-height: 2;
+  max-width: 140px;
+  min-width: 68px;
+  text-decoration: none;
+  background-color: transparent;
+  border-radius: 2px;
+  cursor: pointer;
+  transition: all 0.1s cubic-bezier(0, 0, 1, 1);
+  &:hover {
+    background-color: #eeeeee;
+    color: #5fb878;
+  }
+  &:active {
+    background-color: #eeeeee;
+    color: #89d89f;
+  }
+}
+.lay-aside-list {
+  position: relative;
+  margin: 5px 0px 0px 4px;
+  padding-left: 2px;
+  max-width: 140px;
+  border-radius: 2px;
+  list-style: none;
+  &:hover {
+    background-color: #eeeeee;
+    color: #5fb878;
+  }
+}
+.active {
+  background-color: #eeeeee !important;
+  color: #5fb878 !important;
+}
+
+.lay-aside-collapse {
+  right: -180px;
+  opacity: 0.7;
+}
+
+.lay-aside-collapse-btn {
+  position: fixed;
+  right: 167px;
+  top: 20%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 30px;
+  height: 30px;
+  border: none;
+  background-color: #f6f6f6;
+  border-radius: 50%;
+  opacity: 0.7;
+  box-shadow: 2px 0 8px 0 rgb(29 35 41 / 5%);
+  &:hover {
+    background-color: #e2e2e2;
+    width: 32px;
+    height: 32px;
+  }
+}
+.lay-aside-collapse-btn-collapse {
+  right: 15px;
+}
+
+@media screen and (max-width: 768px) {
+  .lay-aside {
+    width: 100px !important;
+  }
+  .lay-aside-collapse-btn {
+    right: 98px;
+  }
+  .lay-aside-collapse-btn-collapse {
+    right: 15px;
+  }
+  .lay-aside-list {
+    max-width: 68px;
+  }
+  .layui-side-scroll-bar{
+    max-width: 68px;
+  }   
+}
+</style>
diff --git a/example/src/components/LayTableBox.vue b/example/src/components/LayTableBox.vue
index d120cf2a..00f0806e 100644
--- a/example/src/components/LayTableBox.vue
+++ b/example/src/components/LayTableBox.vue
@@ -18,8 +18,8 @@
 .lay-table-box table th,
 .lay-table-box table td {
   font-size: 14px;
-  width: 160px;
-  max-width: 160px;
+  width: 50px;
+  max-width: 180px;
   height: 50px; /*统一每一行的默认高度*/
   border-top: 1px solid whitesmoke; /*内部边框样式*/
   padding: 0 10px; /*内边距*/
diff --git a/example/src/main.ts b/example/src/main.ts
index e505c1d1..bb893f29 100644
--- a/example/src/main.ts
+++ b/example/src/main.ts
@@ -7,6 +7,7 @@ import LayCode from './components/LayCode.vue'
 import LaySearch from './components/LaySearch.vue'
 import LayTableBox from './components/LayTableBox.vue'
 import LayComment from './components/LayComment.vue'
+import LayAsideAnchor from './components/LayAsideAnchor.vue'
 import './assets/css/index.css'
 
 export function createApp(): {
@@ -23,6 +24,7 @@ export function createApp(): {
     .component('LaySearch', LaySearch)
     .component('LayTableBox', LayTableBox)
     .component('LayComment', LayComment)
+    .component('LayAsideAnchor',LayAsideAnchor)
     .use(Layui)
 
   return { app, router }
diff --git a/example/src/plugin/common-plugins.ts b/example/src/plugin/common-plugins.ts
index bca114ec..53be4718 100644
--- a/example/src/plugin/common-plugins.ts
+++ b/example/src/plugin/common-plugins.ts
@@ -9,6 +9,7 @@ import createBlock from './create-block'
 import createDescribe from './create-describe'
 import createTable from './create-table'
 import createComment from './create-comment'
+import createAnchor from './create-anchor'
 import preWrapper from './pre-wrapper'
 
 const plugins = [
@@ -31,6 +32,7 @@ const plugins = [
         .use(...createTitle('title', ''))
         .use(...createDescribe('describe', ''))
         .use(...createComment('comment', ''))
+        .use(...createAnchor('anchor', ''))
     },
   }),
 ] as any
diff --git a/example/src/plugin/create-anchor.ts b/example/src/plugin/create-anchor.ts
new file mode 100644
index 00000000..101c48e2
--- /dev/null
+++ b/example/src/plugin/create-anchor.ts
@@ -0,0 +1,38 @@
+import container from "markdown-it-container";
+import type Token from "markdown-it/lib/token";
+
+type ContainerArgs = [
+  typeof container,
+  string,
+  {
+    render(tokens: Token[], idx: number): string;
+  }
+];
+
+export default function createContainer(
+  klass: string,
+  defaultTitle: string
+): ContainerArgs {
+  return [
+    container,
+    klass,
+    {
+      render(tokens, idx) {
+        const token = tokens[idx];
+        if (token.nesting === 1) {
+          const anchors = [];
+          for (const token of tokens) {
+            if (token.nesting === 1 && token.info.includes("title")) {
+              const info = token.info.trim().slice(klass.length).trim();
+              anchors.push(info);
+            }
+          }
+          // 此处仅支持 string | number | boolean 类型
+          return `<lay-aside-anchor anchors="${anchors}" :currIndex="-1" :show="true">`;
+        } else {
+          return "</lay-aside-anchor>\n";
+        }
+      },
+    },
+  ];
+}
diff --git a/example/src/plugin/create-title.ts b/example/src/plugin/create-title.ts
index 0df0f0a7..ba5f5410 100644
--- a/example/src/plugin/create-title.ts
+++ b/example/src/plugin/create-title.ts
@@ -17,11 +17,11 @@ export default function createContainer(
     container,
     klass,
     {
-      render(tokens, idx) {
+      render(tokens, idx) {    
         const token = tokens[idx]
         const info = token.info.trim().slice(klass.length).trim()
         if (token.nesting === 1) {
-          return `<lay-field title="${
+          return `<lay-field id="${info || defaultTitle}" title="${
             info || defaultTitle
           }" style="margin-top:20px;margin-bottom: 20px;">`
         } else {
diff --git a/example/src/view/component.vue b/example/src/view/component.vue
index bfcceee9..885e1118 100644
--- a/example/src/view/component.vue
+++ b/example/src/view/component.vue
@@ -37,7 +37,7 @@
       </lay-scroll>
     </lay-side>
     <lay-body>
-      <div style="padding: 20px">
+      <div style="padding: 20px; margin-right: 180px">
         <router-view />
       </div>
     </lay-body>

From 8709cb73a4e6e9805c6f70d1b161e919966936ff Mon Sep 17 00:00:00 2001
From: xumi <hmxing1105@163.com>
Date: Thu, 30 Dec 2021 02:10:28 +0800
Subject: [PATCH 05/29] =?UTF-8?q?=E2=9C=A8[=E5=AE=8C=E5=96=84]=E4=BD=BF?=
 =?UTF-8?q?=E7=94=A8teleport=E9=87=8D=E6=9E=84tooltip=E6=89=80=E4=BD=BF?=
 =?UTF-8?q?=E7=94=A8=E7=9A=84=E5=86=85=E9=83=A8popper=E7=BB=84=E4=BB=B6?=
 =?UTF-8?q?=EF=BC=8C=E6=94=AF=E6=8C=81=E7=A7=BB=E5=8A=A8=E5=88=B0tooltip?=
 =?UTF-8?q?=E5=86=85=E5=AE=B9=E8=80=8C=E4=B8=8D=E9=9A=90=E8=97=8Ftooltip?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/module/popper/index.less   | 51 +++++++++++++++-----
 src/module/popper/index.vue    | 88 ++++++++++++++++++----------------
 src/module/popper/usePopper.ts | 47 ------------------
 src/module/tooltip/index.vue   | 34 ++++++++-----
 4 files changed, 109 insertions(+), 111 deletions(-)
 delete mode 100644 src/module/popper/usePopper.ts

diff --git a/src/module/popper/index.less b/src/module/popper/index.less
index ae994b31..cf6ce3f3 100644
--- a/src/module/popper/index.less
+++ b/src/module/popper/index.less
@@ -14,21 +14,21 @@
     @attr : ~'[position=@{position}]';
     &{
         border: 1px solid @m-border-color;
-        &.layui-popper@{attr}{
-        margin-@{contrary_position}: 6px;
-        .layui-popper-arrow {
-            @{contrary_position}: -6px;
-            border-@{contrary_position}-width: 0;
-            border-@{position}-color: @m-border-color;
-            &::after{
-                @{contrary_position}: 1px;
+        &@{attr}{
+            margin-@{contrary_position}: 6px;
+            .layui-popper-arrow {
+                @{contrary_position}: -6px;
                 border-@{contrary_position}-width: 0;
-                margin-@{margin_postion}: -6px;
-                border-@{position}-color: @color; 
+                border-@{position}-color: @m-border-color;
+                &::after{
+                    @{contrary_position}: 1px;
+                    border-@{contrary_position}-width: 0;
+                    margin-@{margin_postion}: -6px;
+                    border-@{position}-color: @color; 
+                }
             }
         }
     }
-    }
 }
 // 统一设置四个方向的主题
 .theme(@background-color, @color, @border-color) {
@@ -43,7 +43,7 @@
 // 箭头默认居中
 .arrow-default-center(@position, @prop) {
     @attr : ~'[position=@{position}]';
-    &.layui-popper@{attr} {
+    &@{attr} {
         .layui-popper-arrow{
             @{prop}: -moz-calc(50% - 6px);
             @{prop}: -webkit-calc(50% - 6px);
@@ -58,6 +58,23 @@
     .arrow-default-center(right, top);
 }
 
+// 填充popper，支持可以移动到popper使用到
+.single-fill-popper(@position, @contrary_position, @zeroPosition, @all, @seven){
+    @attr : ~'[position=@{position}]';
+    &@{attr}::after{
+        @{contrary_position}: -7px;
+        @{zeroPosition}: 0;
+        @{all}: 100%;
+        @{seven}: 7px;
+    }
+}
+.fill-popper(){
+    .single-fill-popper(top, bottom, left, width, height);
+    .single-fill-popper(bottom, top, left, width, height);
+    .single-fill-popper(left, right, bottom, height, width);
+    .single-fill-popper(right, left, bottom, height, width);
+}
+
 // 样式开始
 .layui-popper {
     position: fixed;
@@ -76,9 +93,17 @@
     // 箭头默认居中
     .all-arrow-default-center();
 
+    &::after{
+        content: " ";
+        position: absolute;
+        display: block;
+    }
+    // 填充
+    .fill-popper();
+
     .layui-popper-arrow {
         &,&::after{
-             position: absolute;
+            position: absolute;
             display: block;
             width: 0;
             height: 0;
diff --git a/src/module/popper/index.vue b/src/module/popper/index.vue
index 3e24f07b..8b793f3b 100644
--- a/src/module/popper/index.vue
+++ b/src/module/popper/index.vue
@@ -1,15 +1,17 @@
 <template>
-  <transition v-show="innerVisible">
-    <div
-      ref="popper"
-      :class="['layui-popper', { 'layui-dark': innnerIsDark }]"
-      :style="style"
-      :position="innnerPosition"
-    >
-      <slot>{{ content.value }}</slot>
-      <div class="layui-popper-arrow"></div>
-    </div>
-  </transition>
+  <teleport to="body" v-if="isExist">
+    <transition v-show="innerVisible">
+      <div
+        ref="popper"
+        :class="['layui-popper', { 'layui-dark': isDark }]"
+        :style="style"
+        :position="position"
+      >
+        <slot>{{ content }}</slot>
+        <div class="layui-popper-arrow"></div>
+      </div>
+    </transition>
+  </teleport>
 </template>
 <script lang="ts">
 const NAME = "LayPopper";
@@ -25,30 +27,33 @@ import {
   CSSProperties,
   ref,
   watch,
-  onUpdated,
   defineEmits,
   onMounted,
-  Ref,
 } from "vue";
 import { on } from "../../tools/domUtil";
 const props = withDefaults(
   defineProps<{
     el: any;
-    content?: Ref<string | Number>;
-    position?: Ref<string>;
+    content?: string | Number;
+    position?: string;
     trigger?: string;
     enterable?: boolean;
-    isDark?: Ref<boolean>;
-    disabled?: Ref<boolean>;
-    visible?: Ref<boolean>;
-    isCanHide?: Ref<boolean>;
-    updateVisible?: Function;
+    isDark?: boolean;
+    disabled?: boolean;
+    visible?: boolean;
+    isCanHide?: boolean;
   }>(),
   {
+    position: 'top',
+    isDark: true,
+    disabled: false,
     enterable: true,
+    visible: true,
+    isCanHide: true,
     trigger: "hover",
   }
 );
+const emit = defineEmits(["update:visible"]);
 
 const EVENT_MAP: any = {
   hover: ["mouseenter", null, "mouseleave", false],
@@ -63,55 +68,52 @@ if (!triggerArr) {
 const style = ref<CSSProperties>({ top: -window.innerHeight + "px", left: 0 });
 const checkTarget = ref(false);
 const popper = ref<HTMLDivElement>({} as HTMLDivElement);
-const tempPosition = props.position ?? ref("top");
-const innnerPosition = ref(tempPosition.value);
-const innnerIsDark = ref(props.isDark ?? true);
-const innnerDisabled = ref(props.disabled ?? false);
+const innnerPosition = ref(props.position);
 const innerVisible = ref(props.visible ?? true);
+const isExist = ref(false);
 
 watch(innerVisible, (val) => {
   invokeShowPosistion();
-  props.updateVisible && props.updateVisible(val);
+  emit("update:visible", val);
 });
-watch(innnerDisabled, (val) => {
-  innerVisible.value = false;
+watch(popper, (val) => {
+  if (props.trigger === 'hover' && props.enterable) {
+    on(popper.value, EVENT_MAP['hover'][0], doShow);
+    on(popper.value, EVENT_MAP['hover'][2], doHidden);
+  }
 });
 watch(
-  () => props.content?.value,
+  () => props.content,
   (val) => {
     innerVisible.value && invokeShowPosistion();
   }
 );
 
 const doShow = function () {
-  if (!innnerDisabled.value) {
+  if (!props.disabled) {
     innerVisible.value = true;
+    isExist.value = true;
   }
 };
 
 const doHidden = function (e: MouseEvent) {
+  // ||(props.enterable && popper.value.contains(e.target as Node))
   if (
-    (checkTarget.value && props.el.contains(e.target)) ||
-    (props.enterable && popper.value.contains(e.target as Node))
+    (checkTarget.value && props.el.contains(e.target)) 
   )
     return;
   // style.value = {top: (-window.innerHeight) + 'px',left:0};
   // popper.value.remove();
-  if (props.isCanHide?.value !== false) {
+  if (props.isCanHide !== false) {
     innerVisible.value = false;
   }
-  innnerPosition.value = tempPosition.value;
+  innnerPosition.value = props.position;
 };
 
-// 事件绑定
-on(props.el, triggerArr[0], doShow);
-on(triggerArr[1] ?? props.el, triggerArr[2], doHidden);
-checkTarget.value = triggerArr[3];
-
 // 计算位置显示
 const showPosistion = function () {
-  postionFns[tempPosition.value] &&
-    (style.value = postionFns[tempPosition.value](
+  postionFns[props.position] &&
+    (style.value = postionFns[props.position](
       props.el,
       popper.value,
       innnerPosition
@@ -126,6 +128,12 @@ const invokeShowPosistion = function () {
     setTimeout(() => innerVisible.value && showPosistion(), 2);
   }
 };
+
+// 事件绑定
+on(props.el, triggerArr[0], doShow);
+on(triggerArr[1] ?? props.el, triggerArr[2], doHidden);
+checkTarget.value = triggerArr[3];
+
 onMounted(() => {
   invokeShowPosistion();
 });
diff --git a/src/module/popper/usePopper.ts b/src/module/popper/usePopper.ts
deleted file mode 100644
index 7995f116..00000000
--- a/src/module/popper/usePopper.ts
+++ /dev/null
@@ -1,47 +0,0 @@
-import { h, ref, render, watchEffect, watch } from "vue";
-import popper from "./index.vue";
-import { once } from "../../tools/domUtil";
-const EVENT_MAP: any = {
-  hover: "mouseenter",
-  click: "click",
-};
-const usePopper = {
-  createPopper(el: HTMLElement, props: any, trigger: string) {
-    const _this = this;
-    once(el, EVENT_MAP[trigger], () => {
-      // TODO 临时解决方案
-      const _props: any = { el };
-      for (const key in props) {
-        _props[key] = ref(props[key]);
-      }
-      _props.updateVisible = function (val: boolean) {
-        _props.visible && (_props.visible.value = val);
-      };
-      _this.renderPopper(_props);
-      watchEffect(() => {
-        for (const key in _props) {
-          if (key === "visible") {
-            continue;
-          }
-          _props[key].value = props[key];
-        }
-      });
-      watch(
-        () => props.visible,
-        (val: boolean) => {
-          _props.updateVisible(val);
-        }
-      );
-    });
-  },
-  renderPopper(props: any) {
-    const container: HTMLDivElement = document.createElement("div");
-    // container.setAttribute("class", "lay-div");
-    const node = h(popper, props);
-    render(node, container);
-    container.firstElementChild &&
-      document.body.appendChild(container.firstElementChild);
-    return node;
-  },
-};
-export default usePopper;
diff --git a/src/module/tooltip/index.vue b/src/module/tooltip/index.vue
index 9c82f39e..d034b1bc 100644
--- a/src/module/tooltip/index.vue
+++ b/src/module/tooltip/index.vue
@@ -1,8 +1,15 @@
+<template>
+  <slot></slot>
+  <lay-popper v-if="isMounted" v-bind="innerProps"></lay-popper>
+</template>
 <script lang="ts">
-import usePopper from "../popper/usePopper";
-import { defineComponent } from "vue";
+import LayPopper from "../popper/index.vue";
+import { defineComponent, ref } from "vue";
 export default defineComponent({
   name: "LayTooltip",
+  components: {
+    LayPopper
+  },
   props: {
     content: {
       type: [Number, String],
@@ -22,21 +29,26 @@ export default defineComponent({
     },
     visible: {
       type: Boolean,
-      default: true,
+      default: false,
     },
     isCanHide: {
       type: Boolean,
       default: true,
     },
   },
+  setup(){
+    const isMounted = ref(false);
+    return {
+      isMounted
+    }
+  },
+  computed: {
+    innerProps(){
+      return {el: this.$el.nextElementSibling, ...this.$props};
+    }
+  },
   mounted() {
-    const _this = this;
-    this.$nextTick(() => {
-      usePopper.createPopper(_this.$el, _this.$props, "hover");
-    });
-  },
-  render() {
-    return this.$slots.default && this.$slots.default()[0];
-  },
+    this.$nextTick(() => this.isMounted = true);
+  }
 });
 </script>

From da1494f7166b7701fc52cce9bd450c3438c66740 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=B0=B1=E7=9C=A0=E5=84=80=E5=BC=8F?= <854085467@qq.com>
Date: Thu, 30 Dec 2021 02:39:19 +0800
Subject: [PATCH 06/29] =?UTF-8?q?=E6=8F=90=E4=BA=A4=20md=20=E7=9B=AE?=
 =?UTF-8?q?=E5=BD=95=E6=A0=B7=E5=BC=8F=E8=B0=83=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../{LayAsideAnchor.vue => LayAnchor.vue}     | 29 ++++++++++---------
 example/src/main.ts                           |  4 +--
 example/src/plugin/create-anchor.ts           |  4 +--
 3 files changed, 19 insertions(+), 18 deletions(-)
 rename example/src/components/{LayAsideAnchor.vue => LayAnchor.vue} (88%)

diff --git a/example/src/components/LayAsideAnchor.vue b/example/src/components/LayAnchor.vue
similarity index 88%
rename from example/src/components/LayAsideAnchor.vue
rename to example/src/components/LayAnchor.vue
index 21478ff9..61e304c3 100644
--- a/example/src/components/LayAsideAnchor.vue
+++ b/example/src/components/LayAnchor.vue
@@ -103,11 +103,11 @@ const handlerBtnClick = () => {
   cursor: pointer;
   transition: all 0.1s cubic-bezier(0, 0, 1, 1);
   &:hover {
-    background-color: #eeeeee;
+    background-color: #f6f6f6 !important;
     color: #5fb878;
   }
   &:active {
-    background-color: #eeeeee;
+    background-color: #f6f6f6 !important;
     color: #89d89f;
   }
 }
@@ -119,12 +119,12 @@ const handlerBtnClick = () => {
   border-radius: 2px;
   list-style: none;
   &:hover {
-    background-color: #eeeeee;
+    background-color: #f6f6f6 !important;
     color: #5fb878;
   }
 }
 .active {
-  background-color: #eeeeee !important;
+  background-color: #f6f6f6 !important;
   color: #5fb878 !important;
 }
 
@@ -135,26 +135,27 @@ const handlerBtnClick = () => {
 
 .lay-aside-collapse-btn {
   position: fixed;
-  right: 167px;
-  top: 20%;
+  right: 197px;
+  top: calc(50% - 20px);
   display: flex;
   align-items: center;
   justify-content: center;
-  width: 30px;
-  height: 30px;
-  border: none;
+  width: 18px;
+  height: 40px;
   background-color: #f6f6f6;
-  border-radius: 50%;
-  opacity: 0.7;
+  border-radius: 0px;
+  border-top-left-radius: 4px;
+  border-bottom-left-radius: 4px;
+  border: rgb(229 230 235) 1px solid;
+  border-right: none;
+  transition: right 200ms;
   box-shadow: 2px 0 8px 0 rgb(29 35 41 / 5%);
   &:hover {
     background-color: #e2e2e2;
-    width: 32px;
-    height: 32px;
   }
 }
 .lay-aside-collapse-btn-collapse {
-  right: 15px;
+  right:0px;
 }
 
 @media screen and (max-width: 768px) {
diff --git a/example/src/main.ts b/example/src/main.ts
index bb893f29..071dd397 100644
--- a/example/src/main.ts
+++ b/example/src/main.ts
@@ -7,7 +7,7 @@ import LayCode from './components/LayCode.vue'
 import LaySearch from './components/LaySearch.vue'
 import LayTableBox from './components/LayTableBox.vue'
 import LayComment from './components/LayComment.vue'
-import LayAsideAnchor from './components/LayAsideAnchor.vue'
+import LayAnchor from './components/LayAnchor.vue'
 import './assets/css/index.css'
 
 export function createApp(): {
@@ -24,7 +24,7 @@ export function createApp(): {
     .component('LaySearch', LaySearch)
     .component('LayTableBox', LayTableBox)
     .component('LayComment', LayComment)
-    .component('LayAsideAnchor',LayAsideAnchor)
+    .component('LayAnchor',LayAnchor)
     .use(Layui)
 
   return { app, router }
diff --git a/example/src/plugin/create-anchor.ts b/example/src/plugin/create-anchor.ts
index 101c48e2..1856b733 100644
--- a/example/src/plugin/create-anchor.ts
+++ b/example/src/plugin/create-anchor.ts
@@ -28,9 +28,9 @@ export default function createContainer(
             }
           }
           // 此处仅支持 string | number | boolean 类型
-          return `<lay-aside-anchor anchors="${anchors}" :currIndex="-1" :show="true">`;
+          return `<lay-anchor anchors="${anchors}" :currIndex="-1" :show="true">`;
         } else {
-          return "</lay-aside-anchor>\n";
+          return "</lay-anchor>\n";
         }
       },
     },

From 0b09de219e883d1b529aedfc3f2de2e64c3577e3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=B0=B1=E7=9C=A0=E5=84=80=E5=BC=8F?= <854085467@qq.com>
Date: Thu, 30 Dec 2021 14:00:25 +0800
Subject: [PATCH 07/29] =?UTF-8?q?=E6=95=B4=E7=90=86=20docs=20=E4=BB=A3?=
 =?UTF-8?q?=E7=A0=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 example/docs/zh-CN/components/skeleton.md |  3 +++
 example/src/components/LayTableBox.vue    |  6 +++---
 example/src/plugin/common-plugins.ts      |  2 +-
 example/src/plugin/create-anchor.ts       |  9 +++------
 example/src/plugin/create-block.ts        |  7 ++-----
 example/src/plugin/create-comment.ts      |  9 +++------
 example/src/plugin/create-describe.ts     |  9 +++------
 example/src/plugin/create-table.ts        |  9 +++------
 example/src/plugin/create-title.ts        | 11 ++++-------
 example/src/plugin/snippet.ts             | 11 +++--------
 example/src/router/zh-CN.ts               |  2 +-
 11 files changed, 29 insertions(+), 49 deletions(-)

diff --git a/example/docs/zh-CN/components/skeleton.md b/example/docs/zh-CN/components/skeleton.md
index 0ba342ae..fff07bf1 100644
--- a/example/docs/zh-CN/components/skeleton.md
+++ b/example/docs/zh-CN/components/skeleton.md
@@ -1,3 +1,6 @@
+::: anchor
+:::
+
 ::: title 基础使用
 :::
 
diff --git a/example/src/components/LayTableBox.vue b/example/src/components/LayTableBox.vue
index 00f0806e..bae6cef6 100644
--- a/example/src/components/LayTableBox.vue
+++ b/example/src/components/LayTableBox.vue
@@ -5,9 +5,9 @@
 </template>
 <style>
 .lay-table-box table {
-  width: 100%; /*表格宽度*/
-  border-collapse: collapse; /*使用单一线条的边框*/
-  empty-cells: show; /*单元格无内容依旧绘制边框*/
+  width: 100%; 
+  border-collapse: collapse; 
+  empty-cells: show;
   border-right: 1px solid whitesmoke;
   border-left: 1px solid whitesmoke;
   border-radius: 4px;
diff --git a/example/src/plugin/common-plugins.ts b/example/src/plugin/common-plugins.ts
index 53be4718..7b4e0839 100644
--- a/example/src/plugin/common-plugins.ts
+++ b/example/src/plugin/common-plugins.ts
@@ -37,4 +37,4 @@ const plugins = [
   }),
 ] as any
 
-export default plugins
+export default plugins
\ No newline at end of file
diff --git a/example/src/plugin/create-anchor.ts b/example/src/plugin/create-anchor.ts
index 1856b733..d0d9fe3d 100644
--- a/example/src/plugin/create-anchor.ts
+++ b/example/src/plugin/create-anchor.ts
@@ -2,12 +2,9 @@ import container from "markdown-it-container";
 import type Token from "markdown-it/lib/token";
 
 type ContainerArgs = [
-  typeof container,
-  string,
-  {
-    render(tokens: Token[], idx: number): string;
-  }
-];
+  typeof container, string,
+  { render(tokens: Token[], idx: number): string }
+]
 
 export default function createContainer(
   klass: string,
diff --git a/example/src/plugin/create-block.ts b/example/src/plugin/create-block.ts
index 92871d35..78c2db80 100644
--- a/example/src/plugin/create-block.ts
+++ b/example/src/plugin/create-block.ts
@@ -2,11 +2,8 @@ import container from 'markdown-it-container'
 import type Token from 'markdown-it/lib/token'
 
 type ContainerArgs = [
-  typeof container,
-  string,
-  {
-    render(tokens: Token[], idx: number): string
-  }
+  typeof container, string,
+  { render(tokens: Token[], idx: number): string }
 ]
 
 export default function createContainer(
diff --git a/example/src/plugin/create-comment.ts b/example/src/plugin/create-comment.ts
index d882be0a..995e2eaa 100644
--- a/example/src/plugin/create-comment.ts
+++ b/example/src/plugin/create-comment.ts
@@ -2,11 +2,8 @@ import container from 'markdown-it-container'
 import type Token from 'markdown-it/lib/token'
 
 type ContainerArgs = [
-  typeof container,
-  string,
-  {
-    render(tokens: Token[], idx: number): string
-  }
+  typeof container, string,
+  { render(tokens: Token[], idx: number): string }
 ]
 
 export default function createContainer(
@@ -27,4 +24,4 @@ export default function createContainer(
       },
     },
   ]
-}
+}
\ No newline at end of file
diff --git a/example/src/plugin/create-describe.ts b/example/src/plugin/create-describe.ts
index f3933538..15ad156c 100644
--- a/example/src/plugin/create-describe.ts
+++ b/example/src/plugin/create-describe.ts
@@ -2,11 +2,8 @@ import container from 'markdown-it-container'
 import type Token from 'markdown-it/lib/token'
 
 type ContainerArgs = [
-  typeof container,
-  string,
-  {
-    render(tokens: Token[], idx: number): string
-  }
+  typeof container, string,
+  { render(tokens: Token[], idx: number): string }
 ]
 
 export default function createContainer(
@@ -28,4 +25,4 @@ export default function createContainer(
       },
     },
   ]
-}
+}
\ No newline at end of file
diff --git a/example/src/plugin/create-table.ts b/example/src/plugin/create-table.ts
index 0e22dc25..ba80f38c 100644
--- a/example/src/plugin/create-table.ts
+++ b/example/src/plugin/create-table.ts
@@ -2,11 +2,8 @@ import container from 'markdown-it-container'
 import type Token from 'markdown-it/lib/token'
 
 type ContainerArgs = [
-  typeof container,
-  string,
-  {
-    render(tokens: Token[], idx: number): string
-  }
+  typeof container, string,
+  { render(tokens: Token[], idx: number): string }
 ]
 
 export default function createContainer(
@@ -28,4 +25,4 @@ export default function createContainer(
       },
     },
   ]
-}
+}
\ No newline at end of file
diff --git a/example/src/plugin/create-title.ts b/example/src/plugin/create-title.ts
index ba5f5410..35dfa2b9 100644
--- a/example/src/plugin/create-title.ts
+++ b/example/src/plugin/create-title.ts
@@ -2,11 +2,8 @@ import container from 'markdown-it-container'
 import type Token from 'markdown-it/lib/token'
 
 type ContainerArgs = [
-  typeof container,
-  string,
-  {
-    render(tokens: Token[], idx: number): string
-  }
+  typeof container, string,
+  { render(tokens: Token[], idx: number): string }
 ]
 
 export default function createContainer(
@@ -23,11 +20,11 @@ export default function createContainer(
         if (token.nesting === 1) {
           return `<lay-field id="${info || defaultTitle}" title="${
             info || defaultTitle
-          }" style="margin-top:20px;margin-bottom: 20px;">`
+          }" style="margin-top:21px;margin-bottom: 20px;">`
         } else {
           return '</lay-field>\n'
         }
       },
     },
   ]
-}
+}
\ No newline at end of file
diff --git a/example/src/plugin/snippet.ts b/example/src/plugin/snippet.ts
index 5b77117b..72b5c9d0 100644
--- a/example/src/plugin/snippet.ts
+++ b/example/src/plugin/snippet.ts
@@ -19,13 +19,8 @@ export default (md: MarkdownIt): void => {
     }
     const start = pos + 3
     const end = state.skipSpacesBack(max, pos)
-    const rawPath = state.src
-      .slice(start, end)
-      .trim()
-      .replace(/^@/, process.cwd())
-    const content = fs.existsSync(rawPath)
-      ? fs.readFileSync(rawPath).toString()
-      : 'Not found: ' + rawPath
+    const rawPath = state.src.slice(start, end).trim().replace(/^@/, process.cwd())
+    const content = fs.existsSync(rawPath) ? fs.readFileSync(rawPath).toString() : 'Not found: ' + rawPath
     const meta = rawPath.replace(rawPath, '')
     state.line = startLine + 1
     const token = state.push('fence', 'code', 0)
@@ -36,4 +31,4 @@ export default (md: MarkdownIt): void => {
     return true
   }
   md.block.ruler.before('fence', 'snippet', parser)
-}
+}
\ No newline at end of file
diff --git a/example/src/router/zh-CN.ts b/example/src/router/zh-CN.ts
index dc8580db..746ed43d 100644
--- a/example/src/router/zh-CN.ts
+++ b/example/src/router/zh-CN.ts
@@ -359,4 +359,4 @@ const zhCN = [
   },
 ]
 
-export default zhCN
+export default zhCN
\ No newline at end of file

From 52beb5e9b747f437ef033c803c4c9276eb5a4ca5 Mon Sep 17 00:00:00 2001
From: sight <1453017105@qq.com>
Date: Thu, 30 Dec 2021 23:20:47 +0800
Subject: [PATCH 08/29] =?UTF-8?q?feat(mdAnchor):=E9=A1=B5=E9=9D=A2?=
 =?UTF-8?q?=E6=BB=9A=E5=8A=A8=E6=97=B6=E5=AF=B9=E5=BA=94=E9=94=9A=E7=82=B9?=
 =?UTF-8?q?=E6=A0=87=E7=AD=BE=E8=B7=9F=E9=9A=8F=E9=AB=98=E4=BA=AE=EF=BC=9B?=
 =?UTF-8?q?=E7=82=B9=E5=87=BB=E9=94=9A=E7=82=B9=E6=A0=87=E7=AD=BE=E5=B9=B3?=
 =?UTF-8?q?=E6=BB=91=E6=BB=9A=E5=8A=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 example/src/components/LayAnchor.vue | 105 +++++++++++++++++++++------
 1 file changed, 84 insertions(+), 21 deletions(-)

diff --git a/example/src/components/LayAnchor.vue b/example/src/components/LayAnchor.vue
index 61e304c3..2fd424a8 100644
--- a/example/src/components/LayAnchor.vue
+++ b/example/src/components/LayAnchor.vue
@@ -2,29 +2,30 @@
   <aside :class="classAside">
     <div class="lay-aside-top">
       <lay-button
-        @click="handlerBtnClick()"
         type="primary"
         size="xs"
         :class="classAsideBtn"
+        @click="handlerBtnClick()"
       >
         <lay-icon :type="iconType" size="40"> </lay-icon>
       </lay-button>
     </div>
     <lay-scroll
-      class="layui-side-scroll-bar layui-side-scroll::-webkit-scrollbar" >
+      class="layui-side-scroll-bar layui-side-scroll::-webkit-scrollbar"
+    >
       <ul>
         <li
-          v-for="(item, index) in anchorsComput"
+          v-for="(anchor, index) in anchorList"
           :key="index"
           class="lay-aside-list"
-          :class="{ active: index === curridx }"
-          @click="curridx = index"
+          :class="{ active: index === activeIndex }"
+          @click.prevent="handlerListItemClick(index, anchor)"
         >
           <a
-            :href="`#${item}`"
+            :href="`#${anchor}`"
             class="lay-aside-link"
-            :class="{ active: index === curridx }"
-            >{{ item }}</a
+            :class="{ active: index === activeIndex }"
+            >{{ anchor }}</a
           >
         </li>
       </ul>
@@ -32,21 +33,25 @@
   </aside>
 </template>
 <script setup lang="ts">
-import { computed, ref } from "vue";
+import { computed, onMounted, ref, shallowRef } from "vue";
 
 const props = defineProps<{
   anchors?: Array<string> | string;
   currIndex: number;
-  show: boolean | string;
+  show: boolean;
 }>();
 
-let curridx = ref(props.currIndex);
-const show = ref(props.show);
-const iconType = ref("layui-icon-right");
-const anchor = props.anchors;
+let activeIndex = ref<number>(0);
+const show = ref<boolean>(props.show);
+const iconType = ref<string>("layui-icon-right");
+const anchors: string | string[] | undefined = props.anchors;
+/**滚动条高度 */
+const scrollTop = ref<number>(0);
+/**要监听的滚动元素 */
+const scrollRefEl = shallowRef<HTMLElement | undefined>(undefined);
 
-const anchorsComput = computed(() => {
-  return typeof anchor === "string" ? anchor?.split(",") : anchor;
+const anchorList = computed(() => {
+  return typeof anchors === "string" ? anchors?.split(",") : anchors;
 });
 
 const classAside = computed(() => [
@@ -63,10 +68,68 @@ const handlerBtnClick = () => {
   show.value = !show.value;
   iconType.value = show.value ? "layui-icon-right" : "layui-icon-left";
 };
+
+const handlerListItemClick = (index: number, id: string) => {
+  activeIndex.value = index;
+  scrollToTitle(id);
+};
+
+const handlerScroll = () => {
+  // 距离顶部 90 改变 activeIndex
+  scrollTop.value = getScrollTop(scrollRefEl.value) + 90;
+  anchorList.value?.forEach((item, index) => {
+    const elOffsetTop = document.getElementById(item)?.offsetTop;
+    if (elOffsetTop) {
+      if (index === 0 && scrollTop.value < elOffsetTop) {
+        activeIndex.value = 0;
+      } else if (scrollTop.value >= elOffsetTop) {
+        activeIndex.value = index;
+      }
+    }
+  });
+}
+
+onMounted(() => {
+  // TODO 封装 hooks
+  scrollRefEl.value = document.querySelector(".layui-body");
+  if (!scrollRefEl.value) throw new Error("");
+  scrollRefEl.value.scrollTop = 0;
+  scrollRefEl.value?.addEventListener("scroll", throttle(handlerScroll, 500));
+});
+
+/**获取滚动高度 */
+const getScrollTop = (el: HTMLElement | undefined): number => {
+  return el
+    ? el.scrollTop
+    : window.pageYOffset ||
+        document.documentElement.scrollTop ||
+        document.body.scrollTop ||
+        0;
+}
+/**平滑滚动 */
+const scrollToTitle = (id: string): void =>{
+  document.getElementById(id)?.scrollIntoView({
+    behavior: "smooth",
+    block: "start",
+    inline: "nearest",
+  });
+}
+
+const throttle = (func: Function, wait: number) => {
+  var timer: any = null;
+  return (...args: any) => {
+    if (!timer) {
+      timer = setTimeout(() => {
+        timer = null;
+        func.apply(this, args);
+      }, wait);
+    }
+  };
+};
 </script>
 <style lang="less" scoped>
-.layui-side-scroll-bar{
-  overflow-y: scroll; 
+.layui-side-scroll-bar {
+  overflow-y: scroll;
   max-width: 156px;
 }
 .layui-side-scroll::-webkit-scrollbar {
@@ -155,7 +218,7 @@ const handlerBtnClick = () => {
   }
 }
 .lay-aside-collapse-btn-collapse {
-  right:0px;
+  right: 0px;
 }
 
 @media screen and (max-width: 768px) {
@@ -171,8 +234,8 @@ const handlerBtnClick = () => {
   .lay-aside-list {
     max-width: 68px;
   }
-  .layui-side-scroll-bar{
+  .layui-side-scroll-bar {
     max-width: 68px;
-  }   
+  }
 }
 </style>

From fa94d75f0b70239244b5dacbace59c3329e41a19 Mon Sep 17 00:00:00 2001
From: sight <1453017105@qq.com>
Date: Fri, 31 Dec 2021 00:47:28 +0800
Subject: [PATCH 09/29] =?UTF-8?q?fix(mdAnchor):=E6=8A=98=E5=8F=A0Anchor?=
 =?UTF-8?q?=E6=97=B6body=E5=AE=BD=E5=BA=A6=E8=87=AA=E9=80=82=E5=BA=94?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 example/src/components/LayAnchor.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/example/src/components/LayAnchor.vue b/example/src/components/LayAnchor.vue
index 2fd424a8..7ea92c3f 100644
--- a/example/src/components/LayAnchor.vue
+++ b/example/src/components/LayAnchor.vue
@@ -67,6 +67,7 @@ const classAsideBtn = computed(() => [
 const handlerBtnClick = () => {
   show.value = !show.value;
   iconType.value = show.value ? "layui-icon-right" : "layui-icon-left";
+  scrollRefEl.value!.firstElementChild!.style.marginRight = show.value ? "180px" : "0px";
 };
 
 const handlerListItemClick = (index: number, id: string) => {

From f8513ceca12be42d8bf38381807ed4a22ced90de Mon Sep 17 00:00:00 2001
From: sight <1453017105@qq.com>
Date: Fri, 31 Dec 2021 09:00:45 +0800
Subject: [PATCH 10/29] =?UTF-8?q?fix(mdAnchor):body=E5=8F=98=E5=8C=96?=
 =?UTF-8?q?=E5=8A=A8=E7=94=BB=E6=95=88=E6=9E=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 example/src/view/component.vue | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/example/src/view/component.vue b/example/src/view/component.vue
index 5443eac9..1d3f5206 100644
--- a/example/src/view/component.vue
+++ b/example/src/view/component.vue
@@ -37,7 +37,13 @@
       </lay-scroll>
     </lay-side>
     <lay-body>
-      <div style="padding: 20px; margin-right: 180px">
+      <div
+        style="
+          padding: 20px;
+          margin-right: 180px;
+          transition: margin 240ms 60ms;
+        "
+      >
         <router-view />
       </div>
     </lay-body>

From e22c5219806a2f741ecd7494238fb992c7e52981 Mon Sep 17 00:00:00 2001
From: sight <1453017105@qq.com>
Date: Fri, 31 Dec 2021 19:03:11 +0800
Subject: [PATCH 11/29] =?UTF-8?q?fix(mdAnchor):=20=E6=8A=98=E5=8F=A0md?=
 =?UTF-8?q?=E7=9B=AE=E5=BD=95=E5=90=8E=E5=88=87=E6=8D=A2=E9=A1=B5=E9=9D=A2?=
 =?UTF-8?q?=E7=BC=A9=E6=94=BE=E5=BC=82=E5=B8=B8=E7=9A=84=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 example/src/components/LayAnchor.vue | 76 +++++++++++++++++++++-------
 1 file changed, 58 insertions(+), 18 deletions(-)

diff --git a/example/src/components/LayAnchor.vue b/example/src/components/LayAnchor.vue
index 7ea92c3f..e77b7dc5 100644
--- a/example/src/components/LayAnchor.vue
+++ b/example/src/components/LayAnchor.vue
@@ -33,7 +33,7 @@
   </aside>
 </template>
 <script setup lang="ts">
-import { computed, onMounted, ref, shallowRef } from "vue";
+import { computed, onMounted, ref, shallowRef, watch } from "vue";
 
 const props = defineProps<{
   anchors?: Array<string> | string;
@@ -49,6 +49,8 @@ const anchors: string | string[] | undefined = props.anchors;
 const scrollTop = ref<number>(0);
 /**要监听的滚动元素 */
 const scrollRefEl = shallowRef<HTMLElement | undefined>(undefined);
+/**折叠动画 */
+let enableAnimation = false;
 
 const anchorList = computed(() => {
   return typeof anchors === "string" ? anchors?.split(",") : anchors;
@@ -56,25 +58,39 @@ const anchorList = computed(() => {
 
 const classAside = computed(() => [
   "lay-aside",
+  { "lay-aside-animation": enableAnimation },
   { "lay-aside-collapse": !show.value },
 ]);
 
-const classAsideBtn = computed(() => [
-  "lay-aside-collapse-btn",
-  { "lay-aside-collapse-btn-collapse": !show.value },
-]);
+const classAsideBtn = computed(() => {
+  let classBtn = [];
+  if (enableAnimation) {
+    classBtn = [
+      "lay-aside-collapse-btn",
+      "lay-aside-animation",
+      { "lay-aside-collapse-btn-collapse": !show.value }
+    ];
+  } else { 
+    classBtn = [
+      "lay-aside-collapse-btn",
+      { "lay-aside-collapse-btn-collapse": !show.value }
+    ];
+
+    enableAnimation = true;
+  }
+  return classBtn;
+});
 
 const handlerBtnClick = () => {
   show.value = !show.value;
-  iconType.value = show.value ? "layui-icon-right" : "layui-icon-left";
-  scrollRefEl.value!.firstElementChild!.style.marginRight = show.value ? "180px" : "0px";
-};
+}
 
 const handlerListItemClick = (index: number, id: string) => {
   activeIndex.value = index;
   scrollToTitle(id);
-};
+}
 
+/**锚点标签跟随滚动高亮 */
 const handlerScroll = () => {
   // 距离顶部 90 改变 activeIndex
   scrollTop.value = getScrollTop(scrollRefEl.value) + 90;
@@ -90,12 +106,29 @@ const handlerScroll = () => {
   });
 }
 
+const handlerCollapse = () => {
+  iconType.value = show.value ? "layui-icon-right" : "layui-icon-left";
+  scrollRefEl.value!.firstElementChild!.style.marginRight = show.value
+    ? "180px"
+    : "0px";
+}
+
+watch(show, () => {
+  handlerCollapse();
+});
+
 onMounted(() => {
   // TODO 封装 hooks
   scrollRefEl.value = document.querySelector(".layui-body");
-  if (!scrollRefEl.value) throw new Error("");
+  if (!scrollRefEl.value) {
+    throw new Error(`scroll element is not existed: ".layui-body"`);
+  }
   scrollRefEl.value.scrollTop = 0;
   scrollRefEl.value?.addEventListener("scroll", throttle(handlerScroll, 500));
+  // 如果已折叠,关闭组件初始渲染时的动画,然后自动开启
+  show.value =
+    scrollRefEl.value!.firstElementChild!.style.marginRight !== "0px";
+  enableAnimation = show.value;
 });
 
 /**获取滚动高度 */
@@ -108,7 +141,7 @@ const getScrollTop = (el: HTMLElement | undefined): number => {
         0;
 }
 /**平滑滚动 */
-const scrollToTitle = (id: string): void =>{
+const scrollToTitle = (id: string): void => {
   document.getElementById(id)?.scrollIntoView({
     behavior: "smooth",
     block: "start",
@@ -145,10 +178,16 @@ const throttle = (func: Function, wait: number) => {
   padding: 0 25px;
   background-color: #ffffff;
   border-left: 1px solid rgb(229 230 235);
-  transition: right 200ms;
+  transition: none;
+  -webkit-transition: none;
   height: calc(100% - 60px);
 }
 
+.lay-aside-collapse {
+  right: -180px;
+  opacity: 0.7;
+}
+
 .lay-aside-top {
   height: 29px;
 }
@@ -192,11 +231,6 @@ const throttle = (func: Function, wait: number) => {
   color: #5fb878 !important;
 }
 
-.lay-aside-collapse {
-  right: -180px;
-  opacity: 0.7;
-}
-
 .lay-aside-collapse-btn {
   position: fixed;
   right: 197px;
@@ -212,8 +246,9 @@ const throttle = (func: Function, wait: number) => {
   border-bottom-left-radius: 4px;
   border: rgb(229 230 235) 1px solid;
   border-right: none;
-  transition: right 200ms;
   box-shadow: 2px 0 8px 0 rgb(29 35 41 / 5%);
+  transition: none;
+  -webkit-transition: none;
   &:hover {
     background-color: #e2e2e2;
   }
@@ -222,6 +257,11 @@ const throttle = (func: Function, wait: number) => {
   right: 0px;
 }
 
+.lay-aside-animation {
+  transition: right 200ms;
+  -webkit-transition: right 200ms;
+}
+
 @media screen and (max-width: 768px) {
   .lay-aside {
     width: 100px !important;

From 9f0bec133955dfc4ab02b525242b66953c2b99f2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=B0=B1=E7=9C=A0=E5=84=80=E5=BC=8F?= <854085467@qq.com>
Date: Sun, 2 Jan 2022 20:50:24 +0800
Subject: [PATCH 12/29] =?UTF-8?q?=E5=8D=87=E7=BA=A7=20layer-vue=201.2.3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 example/src/components/LayAnchor.vue | 7 ++++---
 package.json                         | 2 +-
 2 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/example/src/components/LayAnchor.vue b/example/src/components/LayAnchor.vue
index e77b7dc5..3a0c06a2 100644
--- a/example/src/components/LayAnchor.vue
+++ b/example/src/components/LayAnchor.vue
@@ -108,6 +108,7 @@ const handlerScroll = () => {
 
 const handlerCollapse = () => {
   iconType.value = show.value ? "layui-icon-right" : "layui-icon-left";
+  // @ts-ignore
   scrollRefEl.value!.firstElementChild!.style.marginRight = show.value
     ? "180px"
     : "0px";
@@ -118,7 +119,7 @@ watch(show, () => {
 });
 
 onMounted(() => {
-  // TODO 封装 hooks
+  // @ts-ignore TODO 封装 hooks
   scrollRefEl.value = document.querySelector(".layui-body");
   if (!scrollRefEl.value) {
     throw new Error(`scroll element is not existed: ".layui-body"`);
@@ -126,8 +127,8 @@ onMounted(() => {
   scrollRefEl.value.scrollTop = 0;
   scrollRefEl.value?.addEventListener("scroll", throttle(handlerScroll, 500));
   // 如果已折叠,关闭组件初始渲染时的动画,然后自动开启
-  show.value =
-    scrollRefEl.value!.firstElementChild!.style.marginRight !== "0px";
+  // @ts-ignore
+  show.value = scrollRefEl.value!.firstElementChild!.style.marginRight !== "0px";
   enableAnimation = show.value;
 });
 
diff --git a/package.json b/package.json
index 50e65466..4721f56a 100644
--- a/package.json
+++ b/package.json
@@ -34,7 +34,7 @@
   "dependencies": {
     "@layui/hooks-vue": "^0.1.6",
     "@layui/icons-vue": "^1.0.2",
-    "@layui/layer-vue": "^1.2.2",
+    "@layui/layer-vue": "^1.2.3",
     "async-validator": "^4.0.7",
     "countup.js": "^2.0.8",
     "evtd": "^0.2.3",

From aec3db3503e17f1a725d86583202ef515c9721b3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=B0=B1=E7=9C=A0=E5=84=80=E5=BC=8F?= <854085467@qq.com>
Date: Sun, 2 Jan 2022 21:12:47 +0800
Subject: [PATCH 13/29] =?UTF-8?q?=E6=9B=B4=E6=96=B0=20layer=20=E6=96=87?=
 =?UTF-8?q?=E6=A1=A3,=20=E6=95=B4=E7=90=86=E6=9B=B4=E6=96=B0=E6=97=A5?=
 =?UTF-8?q?=E5=BF=97?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 example/docs/zh-CN/components/modal.md | 33 ++++++++++++++------------
 example/docs/zh-CN/guide/changelog.md  | 15 +++++++++++-
 src/index.ts                           |  6 ++---
 src/module/layer/README.md             |  0
 src/module/layer/index.ts              |  9 +++++++
 src/module/layer/modal/index.ts        |  9 -------
 6 files changed, 44 insertions(+), 28 deletions(-)
 delete mode 100644 src/module/layer/README.md
 create mode 100644 src/module/layer/index.ts
 delete mode 100644 src/module/layer/modal/index.ts

diff --git a/example/docs/zh-CN/components/modal.md b/example/docs/zh-CN/components/modal.md
index 9f6d7a35..bc93ea2b 100644
--- a/example/docs/zh-CN/components/modal.md
+++ b/example/docs/zh-CN/components/modal.md
@@ -8,9 +8,9 @@
 
 <template>
   <lay-button @click="changeVisible1" type="primary">基础使用</lay-button>
-  <lay-modal title="基础使用" v-model="visible1">
+  <lay-layer title="基础使用" v-model="visible1">
       内容  
-  </lay-modal>
+  </lay-layer>
 </template>
 
 <script>
@@ -41,9 +41,9 @@ export default {
 
 <template>
   <lay-button @click="changeVisible2" type="primary">允许拖动</lay-button>
-  <lay-modal title="允许拖动" v-model="visible2">
+  <lay-layer title="允许拖动" v-model="visible2">
       内容  
-  </lay-modal>
+  </lay-layer>
 </template>
 
 <script>
@@ -74,9 +74,9 @@ export default {
 
 <template>
   <lay-button @click="changeVisible3" type="primary">放大缩小</lay-button>
-  <lay-modal title="放大缩小" v-model="visible3" move="true" maxmin="true">
+  <lay-layer title="放大缩小" v-model="visible3" move="true" maxmin="true">
       内容  
-  </lay-modal>
+  </lay-layer>
 </template>
 
 <script>
@@ -107,9 +107,9 @@ export default {
 
 <template>
   <lay-button @click="changeVisible4" type="primary">指定位置</lay-button>
-  <lay-modal title="指定位置" v-model="visible4" move="true" :offset="['100px','100px']">
+  <lay-layer title="指定位置" v-model="visible4" move="true" :offset="['100px','100px']">
       内容  
-  </lay-modal>
+  </lay-layer>
 </template>
 
 <script>
@@ -140,9 +140,9 @@ export default {
 
 <template>
   <lay-button @click="changeVisible8" type="primary">尺寸拉伸</lay-button>
-  <lay-modal title="拉伸尺寸" resize="true" v-model="visible8" move="true">
+  <lay-layer title="拉伸尺寸" resize="true" v-model="visible8" move="true">
       内容  
-  </lay-modal>
+  </lay-layer>
 </template>
 
 <script>
@@ -173,7 +173,7 @@ export default {
 
 <template>
   <lay-button @click="changeVisible5" type="primary">远程窗体</lay-button>
-  <lay-modal title="加载 Iframe 内容" width="500px" height="400px" maxmin="true" v-model="visible5" move="true" :type="type5" content="http://www.pearadmin.com"></lay-modal>
+  <lay-layer title="加载 Iframe 内容" width="500px" height="400px" maxmin="true" v-model="visible5" move="true" :type="type5" content="http://www.pearadmin.com"></lay-layer>
 </template>
 
 <script>
@@ -206,9 +206,9 @@ export default {
 
 <template>
   <lay-button @click="changeVisible6" type="primary">定义操作</lay-button>
-  <lay-modal title="定义操作" v-model="visible6" move="true" :btn="btn6">
+  <lay-layer title="定义操作" v-model="visible6" move="true" :btn="btn6">
       内容  
-  </lay-modal>
+  </lay-layer>
 </template>
 
 <script>
@@ -244,9 +244,9 @@ export default {
 
 <template>
   <lay-button @click="changeVisible7" type="primary">开启遮盖</lay-button>
-  <lay-modal title="开启遮盖" move="true" shade="false" v-model="visible7">
+  <lay-layer title="开启遮盖" move="true" shade="false" v-model="visible7">
     内容  
-  </lay-modal>
+  </lay-layer>
 </template>
 
 <script>
@@ -329,6 +329,7 @@ export default {
 | content         | 内容          | --                         |
 | shade           | 开启遮盖      | --                         |
 | shadeClose      | 遮盖点击关闭  | --                         |
+| shadeOpacity    | 遮盖层透明度  | `0.1`                         |
 | zIndex          | 自定义层级    | --                         |
 | type            | 类型          | `1: component` `2: iframe` |
 | closeBtn        | 显示关闭      | true                       |
@@ -336,6 +337,8 @@ export default {
 | btnAlign        | 按钮布局      | `l` `r` `c`                |
 | anim            | 入场动画      | `0` `-` `6`                |
 | isOutAnim       | 关闭动画      | `true` `false`             |
+| success            | 显示回调   | --                |
+| end       | 关闭回调      | --             |
 
 :::
 
diff --git a/example/docs/zh-CN/guide/changelog.md b/example/docs/zh-CN/guide/changelog.md
index dc62b91e..e78e4534 100644
--- a/example/docs/zh-CN/guide/changelog.md
+++ b/example/docs/zh-CN/guide/changelog.md
@@ -11,7 +11,20 @@
 <template>
 <lay-timeline>
   <lay-timeline-item title="0.3.x">
-  <ul> 
+    <ul> 
+      <a name="0-3-1"> </a> 
+      <li> 
+        <h3>0.3.2 <span class="layui-badge-rim">2022-01-03</span></h3> 
+        <ul> 
+          <li>[新增] skeleton 骨架屏组件。</li>
+          <li>[重构] tooltip 内部 popper 组件，支持移动到 tooltip 内部。</li>
+          <li>[增强] layer 部分函数 msg open confirm 等, content 支持 VNode 类型。</li>
+          <li>[修复] layer.close layer.closeAll 函数无法触发 OutAnim 过度动画问题。</li>
+          <li>[升级] layer-vue 1.2.3。</li>
+        </ul> 
+      </li>
+    </ul>
+    <ul> 
       <a name="0-3-1"> </a> 
       <li> 
         <h3>0.3.1 <span class="layui-badge-rim">2021-12-28</span></h3> 
diff --git a/src/index.ts b/src/index.ts
index 30bc9169..6d82af97 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -6,7 +6,7 @@ import "@layui/layer-vue/lib/index.css";
 import "@layui/icons-vue/lib/index.css";
 import { layer } from "@layui/layer-vue";
 
-import LayModal from "./module/layer/modal/index";
+import LayLayer from "./module/layer/index";
 import LayBacktop from "./module/backTop/index";
 import LayAvatar from "./module/avatar/index";
 import LayRadio from "./module/radio/index";
@@ -128,7 +128,7 @@ const components: Record<string, IDefineComponent> = {
   LayCarousel,
   LayCarouselItem,
   LayColorPicker,
-  LayModal,
+  LayLayer,
   LayTooltip,
   LayInputNumber,
   LaySkeleton,
@@ -205,7 +205,7 @@ export {
   LayCarousel,
   LayCarouselItem,
   LayColorPicker,
-  LayModal
+  LayLayer
 };
 
 export { layer };
diff --git a/src/module/layer/README.md b/src/module/layer/README.md
deleted file mode 100644
index e69de29b..00000000
diff --git a/src/module/layer/index.ts b/src/module/layer/index.ts
new file mode 100644
index 00000000..04e153df
--- /dev/null
+++ b/src/module/layer/index.ts
@@ -0,0 +1,9 @@
+import type { App } from "vue";
+import { LayLayer } from "@layui/layer-vue";
+import type { IDefineComponent } from "../type/index";
+
+LayLayer.install = (app: App) => {
+  app.component(LayLayer.name || "LayLayer", LayLayer);
+};
+
+export default LayLayer as IDefineComponent;
diff --git a/src/module/layer/modal/index.ts b/src/module/layer/modal/index.ts
deleted file mode 100644
index d2d1dc0f..00000000
--- a/src/module/layer/modal/index.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-import type { App } from "vue";
-import { LayModal } from "@layui/layer-vue";
-import type { IDefineComponent } from "../../type/index";
-
-LayModal.install = (app: App) => {
-  app.component(LayModal.name || "LayModal", LayModal);
-};
-
-export default LayModal as IDefineComponent;

From 6d0ecc7f74e0f375efeae348f56b6af9bb9ac592 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=B0=B1=E7=9C=A0=E5=84=80=E5=BC=8F?= <854085467@qq.com>
Date: Sun, 2 Jan 2022 22:00:42 +0800
Subject: [PATCH 14/29] =?UTF-8?q?=E5=8D=87=E7=BA=A7=20layer-vue=201.2.4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 4721f56a..41e970c9 100644
--- a/package.json
+++ b/package.json
@@ -34,7 +34,7 @@
   "dependencies": {
     "@layui/hooks-vue": "^0.1.6",
     "@layui/icons-vue": "^1.0.2",
-    "@layui/layer-vue": "^1.2.3",
+    "@layui/layer-vue": "^1.2.4",
     "async-validator": "^4.0.7",
     "countup.js": "^2.0.8",
     "evtd": "^0.2.3",

From 923e16a5d7d48ca35f1b6da47211390d21e0083d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=B0=B1=E7=9C=A0=E5=84=80=E5=BC=8F?= <854085467@qq.com>
Date: Sun, 2 Jan 2022 22:49:12 +0800
Subject: [PATCH 15/29] =?UTF-8?q?=E5=BA=9F=E9=99=A4=20menu-children-item?=
 =?UTF-8?q?=20=E7=BB=84=E4=BB=B6,=20=E8=8F=9C=E5=8D=95=E5=88=9D=E6=AD=A5?=
 =?UTF-8?q?=E6=94=AF=E6=8C=81=E6=97=A0=E9=99=90=E6=9E=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 example/docs/zh-CN/components/menu.md | 20 ++++++++++++++------
 src/css/layui.css                     | 23 +++++++++++++++++++++--
 src/index.ts                          |  3 ---
 src/module/menuChildItem/index.ts     |  9 ---------
 src/module/menuChildItem/index.vue    | 25 -------------------------
 5 files changed, 35 insertions(+), 45 deletions(-)
 delete mode 100644 src/module/menuChildItem/index.ts
 delete mode 100644 src/module/menuChildItem/index.vue

diff --git a/example/docs/zh-CN/components/menu.md b/example/docs/zh-CN/components/menu.md
index 1ab24bb4..91525a7d 100644
--- a/example/docs/zh-CN/components/menu.md
+++ b/example/docs/zh-CN/components/menu.md
@@ -12,9 +12,13 @@
     <lay-menu-item title="用户" id="2"></lay-menu-item>
     <lay-menu-item title="角色" id="3"></lay-menu-item> 
     <lay-menu-item title="目录" id="7">
-        <lay-menu-child-item title="菜单一" id="4"></lay-menu-child-item> 
-        <lay-menu-child-item title="菜单二" id="5"></lay-menu-child-item>
-        <lay-menu-child-item title="菜单三" id="6"></lay-menu-child-item>
+        <lay-menu-item title="菜单一" id="8"></lay-menu-item> 
+        <lay-menu-item title="菜单二" id="9"></lay-menu-item>
+        <lay-menu-item title="菜单三" id="10">
+            <lay-menu-item title="菜单一" id="11"></lay-menu-item> 
+            <lay-menu-item title="菜单二" id="12"></lay-menu-item>
+            <lay-menu-item title="菜单三" id="13"></lay-menu-item>
+        </lay-menu-item>
     </lay-menu-item> 
   </lay-menu>
 </template>
@@ -52,9 +56,13 @@ export default {
     <lay-menu-item title="用户" id="2"></lay-menu-item>
     <lay-menu-item title="角色" id="3"></lay-menu-item> 
     <lay-menu-item title="目录" id="7">
-        <lay-menu-child-item title="菜单一" id="4"></lay-menu-child-item> 
-        <lay-menu-child-item title="菜单二" id="5"></lay-menu-child-item>
-        <lay-menu-child-item title="菜单三" id="6"></lay-menu-child-item>
+        <lay-menu-item title="菜单一" id="8"></lay-menu-item> 
+        <lay-menu-item title="菜单二" id="9"></lay-menu-item>
+        <lay-menu-item title="菜单三" id="10">
+            <lay-menu-item title="菜单一" id="11"></lay-menu-item> 
+            <lay-menu-item title="菜单二" id="12"></lay-menu-item>
+            <lay-menu-item title="菜单三" id="13"></lay-menu-item>
+        </lay-menu-item>
     </lay-menu-item> 
   </lay-menu>
 </template>
diff --git a/src/css/layui.css b/src/css/layui.css
index b7120770..fba9708a 100644
--- a/src/css/layui.css
+++ b/src/css/layui.css
@@ -2844,6 +2844,25 @@ body .layui-table-tips .layui-layer-content {
   color: #5fb878;
 }
 
+.layui-nav .layui-show.layui-anim-upbit .layui-show.layui-anim-upbit {
+  top: 0px;
+  left: 106px;
+}
+
+.layui-nav .layui-show.layui-anim-upbit .layui-nav-item {
+  display: block;
+  height: 40px;
+  line-height: 40px;
+}
+
+.layui-nav .layui-show.layui-anim-upbit .layui-nav-item.layui-this {
+  background-color: whitesmoke;
+}
+
+.layui-nav .layui-show.layui-anim-upbit .layui-nav-item.layui-this:after {
+  display: none;
+}
+
 .layui-nav {
   position: relative;
   padding: 0 20px;
@@ -2868,7 +2887,7 @@ body .layui-table-tips .layui-layer-content {
 
 .layui-nav .layui-nav-item a {
   display: block;
-  padding: 0 20px;
+  padding: 0 30px;
   color: #fff;
   color: rgba(255, 255, 255, 0.7);
   -webkit-transition: all 0.3s;
@@ -2917,7 +2936,7 @@ body .layui-table-tips .layui-layer-content {
 .layui-nav .layui-nav-more {
   position: absolute;
   top: 0;
-  right: 3px;
+  right: 8px;
   left: auto !important;
   margin-top: 0;
   font-size: 12.5px !important;
diff --git a/src/index.ts b/src/index.ts
index 6d82af97..4ed53ff9 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -40,7 +40,6 @@ import LayContainer from "./module/container/index";
 import LayCountUp from "./module/countUp/index";
 import LayMenu from "./module/menu/index";
 import LayMenuItem from "./module/menuItem/index";
-import LayMenuChildItem from "./module/menuChildItem/index";
 import LayCheckbox from "./module/checkbox/index";
 import LayCheckboxGroup from "./module/checkboxGroup/index";
 import LayForm from "./module/form/index";
@@ -101,7 +100,6 @@ const components: Record<string, IDefineComponent> = {
   LayContainer,
   LayMenu,
   LayMenuItem,
-  LayMenuChildItem,
   LayCheckbox,
   LayForm,
   LayBreadcrumb,
@@ -178,7 +176,6 @@ export {
   LayContainer,
   LayMenu,
   LayMenuItem,
-  LayMenuChildItem,
   LayCheckbox,
   LayForm,
   LayBreadcrumb,
diff --git a/src/module/menuChildItem/index.ts b/src/module/menuChildItem/index.ts
deleted file mode 100644
index b7fcf188..00000000
--- a/src/module/menuChildItem/index.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-import type { App } from "vue";
-import Component from "./index.vue";
-import type { IDefineComponent } from "../type/index";
-
-Component.install = (app: App) => {
-  app.component(Component.name || "LayMenuChildItem", Component);
-};
-
-export default Component as IDefineComponent;
diff --git a/src/module/menuChildItem/index.vue b/src/module/menuChildItem/index.vue
deleted file mode 100644
index ebae31d8..00000000
--- a/src/module/menuChildItem/index.vue
+++ /dev/null
@@ -1,25 +0,0 @@
-<template>
-  <dd :class="[selectedKey === id ? 'layui-this' : '']" @click="selectHandle()">
-    <slot v-if="slots.title" name="title"></slot>
-    <a v-else href="javascript:void(0)">
-      {{ title }}
-    </a>
-  </dd>
-</template>
-
-<script setup name="LayMenuChildItem" lang="ts">
-import { defineProps, inject, Ref, useSlots } from "vue";
-
-const slots = useSlots();
-
-const props = defineProps<{
-  id: string;
-  title: string;
-}>();
-
-const selectedKey: Ref<string> = inject("selectedKey") as Ref<string>;
-
-const selectHandle = function () {
-  selectedKey.value = props.id;
-};
-</script>

From ab0014a556baa69287c0f2e04b99ad9303866a06 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=B0=B1=E7=9C=A0=E5=84=80=E5=BC=8F?= <854085467@qq.com>
Date: Mon, 3 Jan 2022 00:04:05 +0800
Subject: [PATCH 16/29] =?UTF-8?q?=E4=BC=98=E5=8C=96=20anchor=20=E6=A0=B7?=
 =?UTF-8?q?=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 example/src/components/LayAnchor.vue | 22 ++++++++++------------
 1 file changed, 10 insertions(+), 12 deletions(-)

diff --git a/example/src/components/LayAnchor.vue b/example/src/components/LayAnchor.vue
index 3a0c06a2..d32891b6 100644
--- a/example/src/components/LayAnchor.vue
+++ b/example/src/components/LayAnchor.vue
@@ -206,14 +206,6 @@ const throttle = (func: Function, wait: number) => {
   border-radius: 2px;
   cursor: pointer;
   transition: all 0.1s cubic-bezier(0, 0, 1, 1);
-  &:hover {
-    background-color: #f6f6f6 !important;
-    color: #5fb878;
-  }
-  &:active {
-    background-color: #f6f6f6 !important;
-    color: #89d89f;
-  }
 }
 .lay-aside-list {
   position: relative;
@@ -226,10 +218,16 @@ const throttle = (func: Function, wait: number) => {
     background-color: #f6f6f6 !important;
     color: #5fb878;
   }
-}
-.active {
-  background-color: #f6f6f6 !important;
-  color: #5fb878 !important;
+  &:active {
+    background-color: #f6f6f6 !important;
+    color: #89d89f;
+  }
+  &.active {
+    background-color: #f6f6f6 !important;
+    * {
+      color: #5fb878 !important;
+    }
+  }
 }
 
 .lay-aside-collapse-btn {

From d3465cfae2372f86422a3e2908fb283e0e9e001e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=B0=B1=E7=9C=A0=E5=84=80=E5=BC=8F?= <854085467@qq.com>
Date: Mon, 3 Jan 2022 00:21:51 +0800
Subject: [PATCH 17/29] =?UTF-8?q?=E6=9B=B4=E6=96=B0=E6=97=A5=E5=BF=97?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 example/docs/zh-CN/guide/changelog.md | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/example/docs/zh-CN/guide/changelog.md b/example/docs/zh-CN/guide/changelog.md
index e78e4534..60dcfc21 100644
--- a/example/docs/zh-CN/guide/changelog.md
+++ b/example/docs/zh-CN/guide/changelog.md
@@ -19,8 +19,10 @@
           <li>[新增] skeleton 骨架屏组件。</li>
           <li>[重构] tooltip 内部 popper 组件，支持移动到 tooltip 内部。</li>
           <li>[增强] layer 部分函数 msg open confirm 等, content 支持 VNode 类型。</li>
+          <li>[增强] menu 菜单组件, 初步支持无限级嵌套。</li>
           <li>[修复] layer.close layer.closeAll 函数无法触发 OutAnim 过度动画问题。</li>
-          <li>[升级] layer-vue 1.2.3。</li>
+          <li>[废弃] menu-child-item 组件, 使用 menu-item 替代。</li>
+          <li>[升级] layer-vue 1.2.4。</li>
         </ul> 
       </li>
     </ul>

From 9432944fdffb566641796a9842f9482d78664c66 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=B0=B1=E7=9C=A0=E5=84=80=E5=BC=8F?= <854085467@qq.com>
Date: Mon, 3 Jan 2022 00:23:09 +0800
Subject: [PATCH 18/29] next-version

---
 example/docs/zh-CN/guide/changelog.md | 2 +-
 example/src/layouts/Layout.vue        | 2 +-
 example/src/view/index.vue            | 6 +++---
 package.json                          | 2 +-
 4 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/example/docs/zh-CN/guide/changelog.md b/example/docs/zh-CN/guide/changelog.md
index 60dcfc21..daf62e5b 100644
--- a/example/docs/zh-CN/guide/changelog.md
+++ b/example/docs/zh-CN/guide/changelog.md
@@ -12,7 +12,7 @@
 <lay-timeline>
   <lay-timeline-item title="0.3.x">
     <ul> 
-      <a name="0-3-1"> </a> 
+      <a name="0-3-2"> </a> 
       <li> 
         <h3>0.3.2 <span class="layui-badge-rim">2022-01-03</span></h3> 
         <ul> 
diff --git a/example/src/layouts/Layout.vue b/example/src/layouts/Layout.vue
index a50c7634..b94a11b6 100644
--- a/example/src/layouts/Layout.vue
+++ b/example/src/layouts/Layout.vue
@@ -43,7 +43,7 @@
           </a>
         </li>
         <li class="layui-nav-item">
-          <a href="javascript:void(0)"> 0.3.1 </a>
+          <a href="javascript:void(0)"> 0.3.2 </a>
         </li>
       </ul>
     </lay-header>
diff --git a/example/src/view/index.vue b/example/src/view/index.vue
index 604cf4d6..dd84852c 100644
--- a/example/src/view/index.vue
+++ b/example/src/view/index.vue
@@ -26,7 +26,7 @@
           >
         </div>
         <div class="site-version">
-          <span>当前版本：v<cite class="site-showv">0.3.1</cite></span>
+          <span>当前版本：v<cite class="site-showv">0.3.2</cite></span>
           <span
             ><router-link
               class="layui-inline site-down"
@@ -34,7 +34,7 @@
               >更新日志</router-link
             ></span
           >
-          <span>下载量：<em class="site-showdowns">2324</em></span>
+          <span>下载量：<em class="site-showdowns">3124</em></span>
         </div>
       </div>
       <div class="site-banner-other">
@@ -44,7 +44,7 @@
           rel="nofollow"
           class="site-star"
         >
-          <i class="layui-icon"></i> Star <cite id="getStars">521</cite>
+          <i class="layui-icon"></i> Star <cite id="getStars">544</cite>
         </a>
         <a
           href="https://gitee.com/layui-vue"
diff --git a/package.json b/package.json
index 41e970c9..d09e4301 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@layui/layui-vue",
-  "version": "0.3.1",
+  "version": "0.3.2",
   "author": "sleeprite",
   "license": "MIT",
   "description": "a component library for Vue 3 base on layui-vue",

From 9c188baccdd531c5f6e0ce6da39fed0b55b51332 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=B0=B1=E7=9C=A0=E5=84=80=E5=BC=8F?= <854085467@qq.com>
Date: Mon, 3 Jan 2022 01:23:18 +0800
Subject: [PATCH 19/29] =?UTF-8?q?=E5=8F=91=E5=B8=83=200.3.2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json      | 1 -
 src/css/layui.css | 8 ++++----
 2 files changed, 4 insertions(+), 5 deletions(-)

diff --git a/package.json b/package.json
index d09e4301..ad94b6b4 100644
--- a/package.json
+++ b/package.json
@@ -28,7 +28,6 @@
     "build:example": "vite build example",
     "lint:eslint": "eslint 'src/**/*.{vue,ts,tsx}' --fix",
     "lint:prettier": "prettier --write  'src/**/*'",
-    "publish": "npm run build && npm publish --access=public",
     "commit": "git cz"
   },
   "dependencies": {
diff --git a/src/css/layui.css b/src/css/layui.css
index fba9708a..8600b0dd 100644
--- a/src/css/layui.css
+++ b/src/css/layui.css
@@ -2900,7 +2900,7 @@ body .layui-table-tips .layui-layer-content {
   left: 0;
   top: 0;
   width: 0;
-  height: 5px;
+  height: 3px;
   background-color: #5fb878;
   transition: all 0.2s;
   -webkit-transition: all 0.2s;
@@ -3007,13 +3007,13 @@ body .layui-table-tips .layui-layer-content {
 .layui-nav-tree .layui-nav-item {
   display: block;
   width: 100%;
-  line-height: 40px;
+  line-height: 42px;
 }
 
 .layui-nav-tree .layui-nav-item a {
   position: relative;
-  height: 46px;
-  line-height: 46px;
+  height: 42px;
+  line-height: 42px;
   text-overflow: ellipsis;
   overflow: hidden;
   white-space: nowrap;

From 07a64cba8f5bcb62acd4d55ffb6ee9b97656f4d9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=B0=B1=E7=9C=A0=E5=84=80=E5=BC=8F?= <854085467@qq.com>
Date: Mon, 3 Jan 2022 11:58:05 +0000
Subject: [PATCH 20/29] update README.md.

---
 README.md | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/README.md b/README.md
index 2678c0a1..57780808 100644
--- a/README.md
+++ b/README.md
@@ -77,11 +77,13 @@ createApp(App).use(Layui).mount('#app')
 > 大概是因为 layui - vue 让开发者变得更懒，所以贡献者才这么少？  
 > 好的，姑且就这样认为吧。
 
-[![Giteye chart](https://chart.giteye.net/gitee/layui-vue/layui-vue/DBC9Z6HQ.png)](https://giteye.net/chart/DBC9Z6HQ)
+[![Giteye chart](https://images.gitee.com/uploads/images/2021/1223/004106_ca3f4b34_4835367.png)](https://giteye.net/chart/DBC9Z6HQ)
 
 ## 交流群
 
-![输入图片说明](https://images.gitee.com/uploads/images/2021/1008/090410_8b349271_4835367.png 'QQ图片20211008090242.png')
+| QQ | 微信 |
+|----|----|
+| <img src="https://images.gitee.com/uploads/images/2021/1008/090410_8b349271_4835367.png" width="180px" />  | <img src="https://images.gitee.com/uploads/images/2022/0103/195713_7e626723_4835367.png" width="180px" /> |
 
 ## 相关
 

From 02bcf9c3443ad9178096de4360dbdc1e606506c3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=B0=B1=E7=9C=A0=E5=84=80=E5=BC=8F?= <854085467@qq.com>
Date: Tue, 4 Jan 2022 05:22:08 +0000
Subject: [PATCH 21/29] update README.md.

---
 README.md | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/README.md b/README.md
index 57780808..1d3daf84 100644
--- a/README.md
+++ b/README.md
@@ -74,8 +74,7 @@ createApp(App).use(Layui).mount('#app')
 
 ### 贡献代码
 
-> 大概是因为 layui - vue 让开发者变得更懒，所以贡献者才这么少？  
-> 好的，姑且就这样认为吧。
+> 在人的尺度里，世界既无始也无终，唯一的信仰是，总有人认得你站在暴风雪里的样子。？  
 
 [![Giteye chart](https://images.gitee.com/uploads/images/2021/1223/004106_ca3f4b34_4835367.png)](https://giteye.net/chart/DBC9Z6HQ)
 

From 1595047437a78bfeadeaa61b7e86efe3cadd9656 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=B0=B1=E7=9C=A0=E5=84=80=E5=BC=8F?= <854085467@qq.com>
Date: Tue, 4 Jan 2022 05:51:30 +0000
Subject: [PATCH 22/29] update README.md.

---
 README.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/README.md b/README.md
index 1d3daf84..1036f3cd 100644
--- a/README.md
+++ b/README.md
@@ -1,6 +1,6 @@
 <p align="center">
   <a href="http://www.layui.com">
-    <img src="https://images.gitee.com/uploads/images/2021/1213/173638_d6911839_4835367.png" alt="layui" width="360">
+    <img src="https://images.gitee.com/uploads/images/2022/0104/135039_3f41c467_4835367.png" alt="layui" width="360">
   </a>
 </p>
 
@@ -74,7 +74,7 @@ createApp(App).use(Layui).mount('#app')
 
 ### 贡献代码
 
-> 在人的尺度里，世界既无始也无终，唯一的信仰是，总有人认得你站在暴风雪里的样子。？  
+> 在人的尺度里，世界既无始也无终，唯一的信仰是，总有人认得你站在暴风雪里的样子。  
 
 [![Giteye chart](https://images.gitee.com/uploads/images/2021/1223/004106_ca3f4b34_4835367.png)](https://giteye.net/chart/DBC9Z6HQ)
 

From 7c5c066f0eefc6f75090a02fdc29c10d18d8896e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=B0=B1=E7=9C=A0=E5=84=80=E5=BC=8F?= <854085467@qq.com>
Date: Tue, 4 Jan 2022 06:27:04 +0000
Subject: [PATCH 23/29] update README.md.

---
 README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/README.md b/README.md
index 1036f3cd..e921b1fc 100644
--- a/README.md
+++ b/README.md
@@ -76,7 +76,7 @@ createApp(App).use(Layui).mount('#app')
 
 > 在人的尺度里，世界既无始也无终，唯一的信仰是，总有人认得你站在暴风雪里的样子。  
 
-[![Giteye chart](https://images.gitee.com/uploads/images/2021/1223/004106_ca3f4b34_4835367.png)](https://giteye.net/chart/DBC9Z6HQ)
+[![Giteye chart](https://chart.giteye.net/gitee/layui-vue/layui-vue/DBC9Z6HQ.png)](https://giteye.net/chart/DBC9Z6HQ)
 
 ## 交流群
 

From 726379b3e02f47f7ce616299a00853f5073b8b5f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=B0=B1=E7=9C=A0=E5=84=80=E5=BC=8F?= <854085467@qq.com>
Date: Tue, 4 Jan 2022 09:04:16 +0000
Subject: [PATCH 24/29] update README.md.

---
 README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/README.md b/README.md
index e921b1fc..692557b6 100644
--- a/README.md
+++ b/README.md
@@ -70,7 +70,7 @@ createApp(App).use(Layui).mount('#app')
 
 ### 使用趋势
 
-[![Giteye chart](https://images.gitee.com/uploads/images/2021/1222/233241_e13a5449_4835367.png)](https://giteye.net/chart/5ZQ67WWS)
+[![Giteye chart](https://chart.giteye.net/gitee/layui-vue/layui-vue/5ZQ67WWS.png)](https://giteye.net/chart/5ZQ67WWS)
 
 ### 贡献代码
 

From acef2f91b05ad81330357fa98ea64d98e71381a9 Mon Sep 17 00:00:00 2001
From: dingyongya <yahya_dyy@163.com>
Date: Tue, 4 Jan 2022 18:12:13 +0800
Subject: [PATCH 25/29] =?UTF-8?q?1.=E6=AD=A5=E9=AA=A4=E6=9D=A1=E5=B0=81?=
 =?UTF-8?q?=E8=A3=85?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 example/docs/zh-CN/components/step.md | 384 +++++++++++++++++++++
 example/src/entry-server.ts           |  46 +--
 example/src/router/zh-CN.ts           | 469 +++++++++++++-------------
 example/src/view/component.vue        | 339 ++++++++++---------
 src/index.ts                          |  12 +-
 src/module/slider/index.vue           |   4 +-
 src/module/step/index.less            | 191 +++++++++++
 src/module/step/index.ts              |   9 +
 src/module/step/index.vue             |  43 +++
 src/module/stepItem/index.ts          |   9 +
 src/module/stepItem/index.vue         | 152 +++++++++
 11 files changed, 1236 insertions(+), 422 deletions(-)
 create mode 100644 example/docs/zh-CN/components/step.md
 create mode 100644 src/module/step/index.less
 create mode 100644 src/module/step/index.ts
 create mode 100644 src/module/step/index.vue
 create mode 100644 src/module/stepItem/index.ts
 create mode 100644 src/module/stepItem/index.vue

diff --git a/example/docs/zh-CN/components/step.md b/example/docs/zh-CN/components/step.md
new file mode 100644
index 00000000..61313e05
--- /dev/null
+++ b/example/docs/zh-CN/components/step.md
@@ -0,0 +1,384 @@
+::: anchor
+:::
+
+::: title 基础使用
+:::
+
+
+::: demo
+
+<template>
+<div>
+    <lay-step :active="active">
+        <lay-step-item></lay-step-item>
+        <lay-step-item></lay-step-item>
+        <lay-step-item></lay-step-item>
+        <lay-step-item></lay-step-item>
+    </lay-step>
+<lay-button size="xs" @click="nexts">下一步</lay-button>
+<lay-button size="xs" @click="previous">上一步</lay-button>
+</div>
+</template>
+
+<script>
+import { ref } from 'vue';
+
+export default {
+  setup() {
+    const loading = ref(true);
+    const active = ref(-1);
+    const nexts = () => {
+      if (active.value++ >=3) active.value = 0
+    };
+    const previous = () => {
+      if (active.value-- ===0) active.value = 0
+    };
+    return {
+        loading,
+        active
+    }
+  }
+}
+</script>
+
+:::
+
+::: title 带标题带描述
+:::
+
+
+::: demo
+
+<template>
+<div>
+    <lay-step :active="active">
+        <lay-step-item title="First" content="First step"></lay-step-item>
+        <lay-step-item title="Second" content="Second step"></lay-step-item>
+        <lay-step-item title="Third" content="Third step"></lay-step-item>
+        <lay-step-item title="Fourth" content="Fourth step"></lay-step-item>
+    </lay-step>
+</div>
+</template>
+
+<script>
+import { ref } from 'vue';
+
+export default {
+  setup() {
+    const loading = ref(true);
+    const active = ref(-1);
+    const nexts = () => {
+      if (active.value++ >=3) active.value = 0
+    };
+    const previous = () => {
+      if (active.value-- ===0) active.value = 0
+    };
+    return {
+        loading,
+        active
+    }
+  }
+}
+</script>
+
+:::
+
+::: title 设置当前选中状态
+:::
+
+
+::: demo
+
+<template>
+<div>
+    <lay-step :active="active" current-status="primary">
+        <lay-step-item title="First" content="First step"></lay-step-item>
+        <lay-step-item title="Second" content="Second step"></lay-step-item>
+        <lay-step-item title="Third" content="Third step"></lay-step-item>
+    </lay-step>
+<lay-button size="xs" @click="next">下一步</lay-button>
+<lay-button size="xs" @click="previous">上一步</lay-button>
+</div>
+</template>
+
+<script>
+import { ref } from 'vue';
+
+export default {
+  setup() {
+    const loading = ref(true);
+    const active = ref(-1);
+    const next = () => {
+      if (active.value++ >=2) active.value = 0
+    };
+    const previous = () => {
+      if (active.value-- ===0) active.value = 0
+    };
+    return {
+        loading,
+        active
+    }
+  }
+}
+</script>
+
+:::
+
+::: title 设置第几步状态
+:::
+
+这里设置`status` 会覆盖掉`current-status`
+
+::: demo
+
+<template>
+<div>
+    <lay-step :active="active" current-status="warning">
+        <lay-step-item title="First" content="First step"></lay-step-item>
+        <lay-step-item status="fail" title="Second" content="Second step"></lay-step-item>
+        <lay-step-item title="Third" content="Third step"></lay-step-item>
+        <lay-step-item title="Fourth" content="Fourth step"></lay-step-item>
+    </lay-step>
+<lay-button size="xs" @click="nexts">下一步</lay-button>
+<lay-button size="xs" @click="previous">上一步</lay-button>
+</div>
+</template>
+
+<script>
+import { ref } from 'vue';
+
+export default {
+  setup() {
+    const loading = ref(true);
+    const active = ref(-1);
+    const nexts = () => {
+      if (active.value++ >=3) active.value = 0
+    };
+    const previous = () => {
+      if (active.value-- ===0) active.value = 0
+    };
+    return {
+        loading,
+        active
+    }
+  }
+}
+</script>
+
+:::
+
+::: title 自定义宽度
+:::
+
+
+::: demo
+
+<template>
+<div>
+    <lay-step :active="active" space="200px">
+        <lay-step-item title="First" content="First step"></lay-step-item>
+        <lay-step-item title="Second" content="Second step"></lay-step-item>
+        <lay-step-item title="Third" content="Third step"></lay-step-item>
+    </lay-step>
+<lay-button size="xs" @click="next">下一步</lay-button>
+<lay-button size="xs" @click="previous">上一步</lay-button>
+</div>
+</template>
+
+<script>
+import { ref } from 'vue';
+
+export default {
+  setup() {
+    const loading = ref(true);
+    const active = ref(-1);
+    const next = () => {
+      if (active.value++ >=2) active.value = 0
+    };
+    const previous = () => {
+      if (active.value-- ===0) active.value = 0
+    };
+    return {
+        loading,
+        active
+    }
+  }
+}
+</script>
+
+:::
+
+::: title 自定义图标
+:::
+
+
+::: demo
+
+<template>
+<div>
+    <lay-step :active="active">
+        <lay-step-item title="First" content="First step" icon="layui-icon-release"></lay-step-item>
+        <lay-step-item title="Second" content="Second step" icon="layui-icon-tree"></lay-step-item>
+        <lay-step-item title="Third" content="Third step" icon="layui-icon-share"></lay-step-item>
+    </lay-step>
+<lay-button size="xs" @click="next">下一步</lay-button>
+<lay-button size="xs" @click="previous">上一步</lay-button>
+</div>
+</template>
+
+<script>
+import { ref } from 'vue';
+
+export default {
+  setup() {
+    const loading = ref(true);
+    const active = ref(-1);
+    const next = () => {
+      if (active.value++ >=2) active.value = 0
+    };
+    const previous = () => {
+      if (active.value-- ===0) active.value = 0
+    };
+    return {
+        loading,
+        active
+    }
+  }
+}
+</script>
+
+:::
+
+::: title 居中
+:::
+
+
+::: demo
+
+<template>
+<div>
+    <lay-step :active="active" center>
+        <lay-step-item title="First" content="First step">
+            <template #pace>
+                <lay-icon type="layui-icon-ok"></lay-icon>
+            </template>
+        </lay-step-item>
+        <lay-step-item title="Second" content="Second step"></lay-step-item>
+        <lay-step-item title="Third" content="Third step"></lay-step-item>
+    </lay-step>
+<lay-button size="xs" @click="next">下一步</lay-button>
+<lay-button size="xs" @click="previous">上一步</lay-button>
+</div>
+</template>
+
+<script>
+import { ref } from 'vue';
+
+export default {
+  setup() {
+    const loading = ref(true);
+    const active = ref(-1);
+    const next = () => {
+      if (active.value++ >=2) active.value = 0
+    };
+    const previous = () => {
+      if (active.value-- ===0) active.value = 0
+    };
+    return {
+        loading,
+        active
+    }
+  }
+}
+</script>
+
+:::
+
+::: title 垂直
+:::
+
+
+::: demo
+
+<template>
+<div style="height: 300px">
+    <lay-step :active="active" direction="vertical">
+        <lay-step-item title="First" content="First step">
+            <template #pace>
+                <lay-icon type="layui-icon-ok"></lay-icon>
+            </template>
+        </lay-step-item>
+        <lay-step-item title="Second" content="Second step"></lay-step-item>
+        <lay-step-item title="Third" content="Third step"></lay-step-item>
+    </lay-step>
+</div>
+</template>
+
+<script>
+import { ref } from 'vue';
+
+export default {
+  setup() {
+    const loading = ref(true);
+    const active = ref(-1);
+    const next = () => {
+      if (active.value++ >=2) active.value = 0
+    };
+    const previous = () => {
+      if (active.value-- ===0) active.value = 0
+    };
+    return {
+        loading,
+        active
+    }
+  }
+}
+</script>
+
+:::
+
+::: title step步骤条属性
+:::
+
+::: table
+
+| 属性  | 描述 | 类型 |可选值 | 默认值|
+| ----- | ---- | ------ | ---| ---|
+| active | 第几步 | number |-| 0 |
+| center | 居中布局 | boolean | `true` `false` | `false`  |
+| direction | 垂直/平行布局 | string |`horizontal` `vertical` | `horizontal` |
+| space | 宽度 | string | -    | `auto` |
+| currentStatus | 当前状态显示 | string | `primary` `success` `fail` `warning` | `primary` |
+
+:::
+
+
+::: title stepItem步骤条属性
+:::
+
+::: table
+
+| 属性  | 描述 | 类型 |可选值 | 默认值|
+| ----- | ---- | ------ | ---| ---|
+| title| 标题 | string    | - | - |
+| content | 内容描述 | string  | - | -|
+| icon | 图标 | string  | - | -|
+| status | 状态 | string  | `primary` `success` `fail` `warning` | `primary`|
+
+
+:::
+
+::: title stepItem步骤条slot
+:::
+
+::: table
+
+| 属性  | 描述 | 
+| ----- | ---- | 
+| pace | 圆圈内容自定义 | 
+| default | 内容区域自定义 |
+
+:::
+
+::: comment
+:::
\ No newline at end of file
diff --git a/example/src/entry-server.ts b/example/src/entry-server.ts
index f05fd03b..e405f83b 100644
--- a/example/src/entry-server.ts
+++ b/example/src/entry-server.ts
@@ -1,52 +1,52 @@
 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
 // @ts-nocheck
-import { createApp } from './main'
-import { renderToString } from '@vue/server-renderer'
+import { createApp } from "./main";
+import { renderToString } from "@vue/server-renderer";
 
 export async function render(url, manifest): Promise<string[]> {
-  const { app, router } = createApp()
+  const { app, router } = createApp();
 
   // set the router to the desired URL before rendering
-  router.push(url)
-  await router.isReady()
+  router.push(url);
+  await router.isReady();
 
   // passing SSR context object which will be available via useSSRContext()
-  // @vitejs/plugin-vue injects code into a component's setup() that registers
+  // @vitejs/plugin-vue injects code into a component's step() that registers
   // itself on ctx.modules. After the render, ctx.modules would contain all the
   // components that have been instantiated during this render call.
-  const ctx = {}
-  const html = await renderToString(app, ctx)
+  const ctx = {};
+  const html = await renderToString(app, ctx);
 
   // the SSR manifest generated by Vite contains module -> chunk/asset mapping
   // which we can then use to determine what files need to be preloaded for this
   // request.
-  const preloadLinks = renderPreloadLinks(ctx.modules, manifest)
-  return [html, preloadLinks]
+  const preloadLinks = renderPreloadLinks(ctx.modules, manifest);
+  return [html, preloadLinks];
 }
 
 function renderPreloadLinks(modules, manifest) {
-  let links = ''
-  const seen = new Set()
+  let links = "";
+  const seen = new Set();
   modules.forEach((id) => {
-    const files = manifest[id]
+    const files = manifest[id];
     if (files) {
       files.forEach((file) => {
         if (!seen.has(file)) {
-          seen.add(file)
-          links += renderPreloadLink(file)
+          seen.add(file);
+          links += renderPreloadLink(file);
         }
-      })
+      });
     }
-  })
-  return links
+  });
+  return links;
 }
 
 function renderPreloadLink(file) {
-  if (file.endsWith('.js')) {
-    return `<link rel="modulepreload" crossorigin href="${file}">`
-  } else if (file.endsWith('.css')) {
-    return `<link rel="stylesheet" href="${file}">`
+  if (file.endsWith(".js")) {
+    return `<link rel="modulepreload" crossorigin href="${file}">`;
+  } else if (file.endsWith(".css")) {
+    return `<link rel="stylesheet" href="${file}">`;
   } else {
-    return ''
+    return "";
   }
 }
diff --git a/example/src/router/zh-CN.ts b/example/src/router/zh-CN.ts
index dc8580db..652ad3be 100644
--- a/example/src/router/zh-CN.ts
+++ b/example/src/router/zh-CN.ts
@@ -1,362 +1,373 @@
-import BaseLayout from '../layouts/Layout.vue'
-import Component from '../view/component.vue'
-import Hooks from '../view/hooks.vue'
-import Guide from '../view/guide.vue'
-import Index from '../view/index.vue'
-import Ecology from '../view/ecology.vue'
+import BaseLayout from "../layouts/Layout.vue";
+import Component from "../view/component.vue";
+import Hooks from "../view/hooks.vue";
+import Guide from "../view/guide.vue";
+import Index from "../view/index.vue";
+import Ecology from "../view/ecology.vue";
 
 const zhCN = [
   {
-    path: '/',
-    redirect: '/zh-CN/index',
+    path: "/",
+    redirect: "/zh-CN/index",
     component: BaseLayout,
-    meta: { title: '首页' },
+    meta: { title: "首页" },
     children: [
       {
-        path: '/zh-CN/index',
+        path: "/zh-CN/index",
         component: Index,
-        meta: { title: '指南' },
+        meta: { title: "指南" },
       },
       {
-        path: '/zh-CN/ecology',
+        path: "/zh-CN/ecology",
         component: Ecology,
-        meta: { title: '生态' },
+        meta: { title: "生态" },
       },
       {
-        path: '/zh-CN/guide',
-        redirect: '/zh-CN/guide/introduce',
+        path: "/zh-CN/guide",
+        redirect: "/zh-CN/guide/introduce",
         component: Guide,
-        meta: { title: '指南' },
+        meta: { title: "指南" },
         children: [
           {
-            path: '/zh-CN/guide/introduce',
-            component: () => import('../../docs/zh-CN/guide/introduce.md'),
-            meta: { title: '介绍' },
+            path: "/zh-CN/guide/introduce",
+            component: () => import("../../docs/zh-CN/guide/introduce.md"),
+            meta: { title: "介绍" },
           },
           {
-            path: '/zh-CN/guide/getStarted',
-            component: () => import('../../docs/zh-CN/guide/getStarted.md'),
-            meta: { title: '安装' },
+            path: "/zh-CN/guide/getStarted",
+            component: () => import("../../docs/zh-CN/guide/getStarted.md"),
+            meta: { title: "安装" },
           },
           {
-            path: '/zh-CN/guide/changelog',
-            component: () => import('../../docs/zh-CN/guide/changelog.md'),
-            meta: { title: '更新' },
+            path: "/zh-CN/guide/changelog",
+            component: () => import("../../docs/zh-CN/guide/changelog.md"),
+            meta: { title: "更新" },
           },
           {
-            path: '/zh-CN/guide/problem',
-            component: () => import('../../docs/zh-CN/guide/problem.md'),
-            meta: { title: '问题' },
+            path: "/zh-CN/guide/problem",
+            component: () => import("../../docs/zh-CN/guide/problem.md"),
+            meta: { title: "问题" },
           },
           {
-            path: '/zh-CN/guide/member',
-            component: () => import('../../docs/zh-CN/guide/member.md'),
-            meta: { title: '团队' },
+            path: "/zh-CN/guide/member",
+            component: () => import("../../docs/zh-CN/guide/member.md"),
+            meta: { title: "团队" },
           },
           {
-            path: '/zh-CN/guide/norms',
-            component: () => import('../../docs/zh-CN/guide/norms.md'),
-            meta: { title: '规范' },
+            path: "/zh-CN/guide/norms",
+            component: () => import("../../docs/zh-CN/guide/norms.md"),
+            meta: { title: "规范" },
           },
           {
-            path: '/zh-CN/guide/theme',
-            component: () => import('../../docs/zh-CN/guide/theme.md'),
-            meta: { title: '主题' },
+            path: "/zh-CN/guide/theme",
+            component: () => import("../../docs/zh-CN/guide/theme.md"),
+            meta: { title: "主题" },
           },
           {
-            path: '/zh-CN/guide/sponsor',
-            component: () => import('../../docs/zh-CN/guide/sponsor.md'),
-            meta: { title: '赞助' },
+            path: "/zh-CN/guide/sponsor",
+            component: () => import("../../docs/zh-CN/guide/sponsor.md"),
+            meta: { title: "赞助" },
           },
         ],
       },
       {
-        path: '/zh-CN/components',
-        redirect: '/zh-CN/components/color',
+        path: "/zh-CN/components",
+        redirect: "/zh-CN/components/color",
         component: Component,
-        meta: { title: '组件' },
+        meta: { title: "组件" },
         children: [
           {
-            path: '/zh-CN/components/skeleton',
-            component: () => import('../../docs/zh-CN/components/skeleton.md'),
-            meta: { title: '骨架屏' },
+            path: "/zh-CN/components/step",
+            component: () => import("../../docs/zh-CN/components/step.md"),
+            meta: { title: "分步" },
           },
           {
-            path: '/zh-CN/components/layout',
-            component: () => import('../../docs/zh-CN/components/layout.md'),
-            meta: { title: '布局' },
+            path: "/zh-CN/components/skeleton",
+            component: () => import("../../docs/zh-CN/components/skeleton.md"),
+            meta: { title: "骨架屏" },
           },
           {
-            path: '/zh-CN/components/color',
-            component: () => import('../../docs/zh-CN/components/color.md'),
-            meta: { title: '颜色' },
+            path: "/zh-CN/components/layout",
+            component: () => import("../../docs/zh-CN/components/layout.md"),
+            meta: { title: "布局" },
           },
           {
-            path: '/zh-CN/components/container',
-            component: () => import('../../docs/zh-CN/components/container.md'),
-            meta: { title: '容器' },
+            path: "/zh-CN/components/color",
+            component: () => import("../../docs/zh-CN/components/color.md"),
+            meta: { title: "颜色" },
           },
           {
-            path: '/zh-CN/components/breadcrumb',
+            path: "/zh-CN/components/container",
+            component: () => import("../../docs/zh-CN/components/container.md"),
+            meta: { title: "容器" },
+          },
+          {
+            path: "/zh-CN/components/breadcrumb",
             component: () =>
-              import('../../docs/zh-CN/components/breadcrumb.md'),
-            meta: { title: '面包屑' },
+              import("../../docs/zh-CN/components/breadcrumb.md"),
+            meta: { title: "面包屑" },
           },
           {
-            path: '/zh-CN/components/button',
-            component: () => import('../../docs/zh-CN/components/button.md'),
-            meta: { title: '按钮' },
+            path: "/zh-CN/components/button",
+            component: () => import("../../docs/zh-CN/components/button.md"),
+            meta: { title: "按钮" },
           },
           {
-            path: '/zh-CN/components/icon',
-            component: () => import('../../docs/zh-CN/components/icon.md'),
-            meta: { title: '图标' },
+            path: "/zh-CN/components/icon",
+            component: () => import("../../docs/zh-CN/components/icon.md"),
+            meta: { title: "图标" },
           },
           {
-            path: '/zh-CN/components/panel',
-            component: () => import('../../docs/zh-CN/components/panel.md'),
-            meta: { title: '面板' },
+            path: "/zh-CN/components/panel",
+            component: () => import("../../docs/zh-CN/components/panel.md"),
+            meta: { title: "面板" },
           },
           {
-            path: '/zh-CN/components/animation',
-            component: () => import('../../docs/zh-CN/components/animation.md'),
-            meta: { title: '动画' },
+            path: "/zh-CN/components/animation",
+            component: () => import("../../docs/zh-CN/components/animation.md"),
+            meta: { title: "动画" },
           },
           {
-            path: '/zh-CN/components/card',
-            component: () => import('../../docs/zh-CN/components/card.md'),
-            meta: { title: '卡片' },
+            path: "/zh-CN/components/card",
+            component: () => import("../../docs/zh-CN/components/card.md"),
+            meta: { title: "卡片" },
           },
           {
-            path: '/zh-CN/components/grid',
-            component: () => import('../../docs/zh-CN/components/grid.md'),
-            meta: { title: '栅格' },
+            path: "/zh-CN/components/grid",
+            component: () => import("../../docs/zh-CN/components/grid.md"),
+            meta: { title: "栅格" },
           },
           {
-            path: '/zh-CN/components/form',
-            component: () => import('../../docs/zh-CN/components/form.md'),
-            meta: { title: '表单' },
+            path: "/zh-CN/components/form",
+            component: () => import("../../docs/zh-CN/components/form.md"),
+            meta: { title: "表单" },
           },
           {
-            path: '/zh-CN/components/badge',
-            component: () => import('../../docs/zh-CN/components/badge.md'),
-            meta: { title: '徽章' },
+            path: "/zh-CN/components/badge",
+            component: () => import("../../docs/zh-CN/components/badge.md"),
+            meta: { title: "徽章" },
           },
           {
-            path: '/zh-CN/components/block',
-            component: () => import('../../docs/zh-CN/components/block.md'),
-            meta: { title: '辅助' },
+            path: "/zh-CN/components/block",
+            component: () => import("../../docs/zh-CN/components/block.md"),
+            meta: { title: "辅助" },
           },
           {
-            path: '/zh-CN/components/line',
-            component: () => import('../../docs/zh-CN/components/line.md'),
-            meta: { title: '分割' },
+            path: "/zh-CN/components/line",
+            component: () => import("../../docs/zh-CN/components/line.md"),
+            meta: { title: "分割" },
           },
           {
-            path: '/zh-CN/components/progress',
-            component: () => import('../../docs/zh-CN/components/progress.md'),
-            meta: { title: '进度' },
+            path: "/zh-CN/components/progress",
+            component: () => import("../../docs/zh-CN/components/progress.md"),
+            meta: { title: "进度" },
           },
           {
-            path: '/zh-CN/components/menu',
-            component: () => import('../../docs/zh-CN/components/menu.md'),
-            meta: { title: '菜单' },
+            path: "/zh-CN/components/menu",
+            component: () => import("../../docs/zh-CN/components/menu.md"),
+            meta: { title: "菜单" },
           },
           {
-            path: '/zh-CN/components/timeline',
-            component: () => import('../../docs/zh-CN/components/timeline.md'),
-            meta: { title: '时间线' },
+            path: "/zh-CN/components/timeline",
+            component: () => import("../../docs/zh-CN/components/timeline.md"),
+            meta: { title: "时间线" },
           },
           {
-            path: '/zh-CN/components/collapse',
-            component: () => import('../../docs/zh-CN/components/collapse.md'),
-            meta: { title: '折叠面板' },
+            path: "/zh-CN/components/collapse",
+            component: () => import("../../docs/zh-CN/components/collapse.md"),
+            meta: { title: "折叠面板" },
           },
           {
-            path: '/zh-CN/components/table',
-            component: () => import('../../docs/zh-CN/components/table.md'),
-            meta: { title: '表格' },
+            path: "/zh-CN/components/table",
+            component: () => import("../../docs/zh-CN/components/table.md"),
+            meta: { title: "表格" },
           },
           {
-            path: '/zh-CN/components/avatar',
-            component: () => import('../../docs/zh-CN/components/avatar.md'),
-            meta: { title: '头像' },
+            path: "/zh-CN/components/avatar",
+            component: () => import("../../docs/zh-CN/components/avatar.md"),
+            meta: { title: "头像" },
           },
           {
-            path: '/zh-CN/components/field',
-            component: () => import('../../docs/zh-CN/components/field.md'),
-            meta: { title: '字段' },
+            path: "/zh-CN/components/field",
+            component: () => import("../../docs/zh-CN/components/field.md"),
+            meta: { title: "字段" },
           },
           {
-            path: '/zh-CN/components/empty',
-            component: () => import('../../docs/zh-CN/components/empty.md'),
-            meta: { title: '空' },
+            path: "/zh-CN/components/empty",
+            component: () => import("../../docs/zh-CN/components/empty.md"),
+            meta: { title: "空" },
           },
           {
-            path: '/zh-CN/components/rate',
-            component: () => import('../../docs/zh-CN/components/rate.md'),
-            meta: { title: '评分' },
+            path: "/zh-CN/components/rate",
+            component: () => import("../../docs/zh-CN/components/rate.md"),
+            meta: { title: "评分" },
           },
           {
-            path: '/zh-CN/components/dropdown',
-            component: () => import('../../docs/zh-CN/components/dropdown.md'),
-            meta: { title: '下拉' },
+            path: "/zh-CN/components/dropdown",
+            component: () => import("../../docs/zh-CN/components/dropdown.md"),
+            meta: { title: "下拉" },
           },
           {
-            path: '/zh-CN/components/tab',
-            component: () => import('../../docs/zh-CN/components/tab.md'),
-            meta: { title: '选项卡' },
+            path: "/zh-CN/components/tab",
+            component: () => import("../../docs/zh-CN/components/tab.md"),
+            meta: { title: "选项卡" },
           },
           {
-            path: '/zh-CN/components/iconPicker',
+            path: "/zh-CN/components/iconPicker",
             component: () =>
-              import('../../docs/zh-CN/components/iconPicker.md'),
-            meta: { title: '图标选择' },
+              import("../../docs/zh-CN/components/iconPicker.md"),
+            meta: { title: "图标选择" },
           },
           {
-            path: '/zh-CN/components/tree',
-            component: () => import('../../docs/zh-CN/components/tree.md'),
-            meta: { title: '树形组件' },
+            path: "/zh-CN/components/tree",
+            component: () => import("../../docs/zh-CN/components/tree.md"),
+            meta: { title: "树形组件" },
           },
           {
-            path: '/zh-CN/components/page',
-            component: () => import('../../docs/zh-CN/components/page.md'),
-            meta: { title: '分页' },
+            path: "/zh-CN/components/page",
+            component: () => import("../../docs/zh-CN/components/page.md"),
+            meta: { title: "分页" },
           },
           {
-            path: '/zh-CN/components/transfer',
-            component: () => import('../../docs/zh-CN/components/transfer.md'),
-            meta: { title: '穿梭框' },
+            path: "/zh-CN/components/transfer",
+            component: () => import("../../docs/zh-CN/components/transfer.md"),
+            meta: { title: "穿梭框" },
           },
           {
-            path: '/zh-CN/components/checkbox',
-            component: () => import('../../docs/zh-CN/components/checkbox.md'),
-            meta: { title: '复选框' },
+            path: "/zh-CN/components/checkbox",
+            component: () => import("../../docs/zh-CN/components/checkbox.md"),
+            meta: { title: "复选框" },
           },
           {
-            path: '/zh-CN/components/radio',
-            component: () => import('../../docs/zh-CN/components/radio.md'),
-            meta: { title: '单选框' },
+            path: "/zh-CN/components/radio",
+            component: () => import("../../docs/zh-CN/components/radio.md"),
+            meta: { title: "单选框" },
           },
           {
-            path: '/zh-CN/components/input',
-            component: () => import('../../docs/zh-CN/components/input.md'),
-            meta: { title: '输入框' },
+            path: "/zh-CN/components/input",
+            component: () => import("../../docs/zh-CN/components/input.md"),
+            meta: { title: "输入框" },
           },
           {
-            path: '/zh-CN/components/inputNumber',
-            component: () => import('../../docs/zh-CN/components/inputNumber.md'),
-            meta: { title: '数字输入框' },
-          },
-          {
-            path: '/zh-CN/components/textarea',
-            component: () => import('../../docs/zh-CN/components/textarea.md'),
-            meta: { title: '文本域' },
-          },
-          {
-            path: '/zh-CN/components/switch',
-            component: () => import('../../docs/zh-CN/components/switch.md'),
-            meta: { title: '开关' },
-          },
-          {
-            path: '/zh-CN/components/slider',
-            component: () => import('../../docs/zh-CN/components/slider.md'),
-            meta: { title: '滑块' },
-          },
-          {
-            path: '/zh-CN/components/carousel',
-            component: () => import('../../docs/zh-CN/components/carousel.md'),
-            meta: { title: '轮播' },
-          },
-          {
-            path: '/zh-CN/components/select',
-            component: () => import('../../docs/zh-CN/components/select.md'),
-            meta: { title: '下拉选择' },
-          },
-          {
-            path: '/zh-CN/components/colorPicker',
+            path: "/zh-CN/components/inputNumber",
             component: () =>
-              import('../../docs/zh-CN/components/colorPicker.md'),
-            meta: { title: '颜色选择器' },
-          },{
-            path: '/zh-CN/components/layer',
-            component: () => import('../../docs/zh-CN/components/layer.md'),
-            meta: { title: '简介' },
+              import("../../docs/zh-CN/components/inputNumber.md"),
+            meta: { title: "数字输入框" },
           },
           {
-            path: '/zh-CN/components/tooltip',
-            component: () => import('../../docs/zh-CN/components/tooltip.md'),
-            meta: { title: '文字提示' },
+            path: "/zh-CN/components/textarea",
+            component: () => import("../../docs/zh-CN/components/textarea.md"),
+            meta: { title: "文本域" },
           },
           {
-            path: '/zh-CN/components/modal',
-            component: () => import('../../docs/zh-CN/components/modal.md'),
-            meta: { title: '弹层' },
-          },{
-            path: '/zh-CN/components/load',
-            component: () => import('../../docs/zh-CN/components/load.md'),
-            meta: { title: '加载' },
-          },{
-            path: '/zh-CN/components/confirm',
-            component: () => import('../../docs/zh-CN/components/confirm.md'),
-            meta: { title: '询问' },
-          },{
-            path: '/zh-CN/components/msg',
-            component: () => import('../../docs/zh-CN/components/msg.md'),
-            meta: { title: '信息' },
-          },{
-            path: '/zh-CN/components/backtop',
-            component: () => import('../../docs/zh-CN/components/backtop.md'),
-            meta: { title: '返回顶部' },
+            path: "/zh-CN/components/switch",
+            component: () => import("../../docs/zh-CN/components/switch.md"),
+            meta: { title: "开关" },
           },
           {
-            path: '/zh-CN/components/countup',
-            component: () => import('../../docs/zh-CN/components/countup.md'),
-            meta: { title: '数字滚动' },
+            path: "/zh-CN/components/slider",
+            component: () => import("../../docs/zh-CN/components/slider.md"),
+            meta: { title: "滑块" },
+          },
+          {
+            path: "/zh-CN/components/carousel",
+            component: () => import("../../docs/zh-CN/components/carousel.md"),
+            meta: { title: "轮播" },
+          },
+          {
+            path: "/zh-CN/components/select",
+            component: () => import("../../docs/zh-CN/components/select.md"),
+            meta: { title: "下拉选择" },
+          },
+          {
+            path: "/zh-CN/components/colorPicker",
+            component: () =>
+              import("../../docs/zh-CN/components/colorPicker.md"),
+            meta: { title: "颜色选择器" },
+          },
+          {
+            path: "/zh-CN/components/layer",
+            component: () => import("../../docs/zh-CN/components/layer.md"),
+            meta: { title: "简介" },
+          },
+          {
+            path: "/zh-CN/components/tooltip",
+            component: () => import("../../docs/zh-CN/components/tooltip.md"),
+            meta: { title: "文字提示" },
+          },
+          {
+            path: "/zh-CN/components/modal",
+            component: () => import("../../docs/zh-CN/components/modal.md"),
+            meta: { title: "弹层" },
+          },
+          {
+            path: "/zh-CN/components/load",
+            component: () => import("../../docs/zh-CN/components/load.md"),
+            meta: { title: "加载" },
+          },
+          {
+            path: "/zh-CN/components/confirm",
+            component: () => import("../../docs/zh-CN/components/confirm.md"),
+            meta: { title: "询问" },
+          },
+          {
+            path: "/zh-CN/components/msg",
+            component: () => import("../../docs/zh-CN/components/msg.md"),
+            meta: { title: "信息" },
+          },
+          {
+            path: "/zh-CN/components/backtop",
+            component: () => import("../../docs/zh-CN/components/backtop.md"),
+            meta: { title: "返回顶部" },
+          },
+          {
+            path: "/zh-CN/components/countup",
+            component: () => import("../../docs/zh-CN/components/countup.md"),
+            meta: { title: "数字滚动" },
           },
         ],
       },
       {
-        path: '/zh-CN/hooks',
-        redirect: '/zh-CN/hooks/useStarted',
+        path: "/zh-CN/hooks",
+        redirect: "/zh-CN/hooks/useStarted",
         component: Hooks,
-        meta: { title: 'hooks' },
+        meta: { title: "hooks" },
         children: [
           {
-            path: '/zh-CN/hooks/useStarted',
+            path: "/zh-CN/hooks/useStarted",
+            component: () => import("../../docs/zh-CN/hooks/useStarted.md"),
+            meta: { title: "useStarted" },
+          },
+          {
+            path: "/zh-CN/hooks/useClickOutside",
             component: () =>
-              import('../../docs/zh-CN/hooks/useStarted.md'),
-            meta: { title: 'useStarted' },
+              import("../../docs/zh-CN/hooks/useClickOutside.md"),
+            meta: { title: "useClickOutside" },
           },
           {
-            path: '/zh-CN/hooks/useClickOutside',
-            component: () =>
-              import('../../docs/zh-CN/hooks/useClickOutside.md'),
-            meta: { title: 'useClickOutside' },
+            path: "/zh-CN/hooks/useFullScreen",
+            component: () => import("../../docs/zh-CN/hooks/useFullScreen.md"),
+            meta: { title: "useFullScreen" },
           },
           {
-            path: '/zh-CN/hooks/useFullScreen',
-            component: () => import('../../docs/zh-CN/hooks/useFullScreen.md'),
-            meta: { title: 'useFullScreen' },
+            path: "/zh-CN/hooks/useMove",
+            component: () => import("../../docs/zh-CN/hooks/useMove.md"),
+            meta: { title: "useMove" },
           },
           {
-            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/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' },
+            path: "/zh-CN/hooks/useBoolean",
+            component: () => import("../../docs/zh-CN/hooks/useBoolean.md"),
+            meta: { title: "useBoolean" },
           },
         ],
       },
     ],
   },
-]
+];
 
-export default zhCN
+export default zhCN;
diff --git a/example/src/view/component.vue b/example/src/view/component.vue
index 5443eac9..0d1a3e66 100644
--- a/example/src/view/component.vue
+++ b/example/src/view/component.vue
@@ -44,362 +44,371 @@
   </lay-layout>
 </template>
 <script>
-import { ref, watch } from 'vue'
-import { useRouter, useRoute } from 'vue-router'
+import { ref, watch } from "vue";
+import { useRouter, useRoute } from "vue-router";
 export default {
   setup() {
-    const route = useRoute()
-    const router = useRouter()
-    const currentPath = ref('/zh-CN/guide')
+    const route = useRoute();
+    const router = useRouter();
+    const currentPath = ref("/zh-CN/guide");
 
     watch(
       () => route.path,
       (val) => {
-        currentPath.value = val
+        currentPath.value = val;
       },
       {
         immediate: true,
         deep: true,
       }
-    )
+    );
 
     const menus = [
       {
         id: 1,
-        title: '通用',
+        title: "通用",
         children: [
           {
             id: 20,
-            title: '颜色',
-            subTitle: 'color',
-            path: '/zh-CN/components/color',
+            title: "颜色",
+            subTitle: "color",
+            path: "/zh-CN/components/color",
           },
           {
             id: 6,
-            title: '按钮',
-            subTitle: 'button',
-            path: '/zh-CN/components/button',
+            title: "按钮",
+            subTitle: "button",
+            path: "/zh-CN/components/button",
           },
           {
             id: 7,
-            title: '图标',
-            subTitle: 'iconfont',
-            path: '/zh-CN/components/icon',
+            title: "图标",
+            subTitle: "iconfont",
+            path: "/zh-CN/components/icon",
           },
           {
             id: 10,
-            title: '动画',
-            subTitle: 'animation',
-            path: '/zh-CN/components/animation',
+            title: "动画",
+            subTitle: "animation",
+            path: "/zh-CN/components/animation",
           },
         ],
       },
       {
         id: 1,
-        title: '布局',
+        title: "布局",
         children: [
           {
             id: 111,
-            title: '骨架屏',
-            subTitle: 'skeleton',
-            path: '/zh-CN/components/skeleton',
+            title: "骨架屏",
+            subTitle: "skeleton",
+            path: "/zh-CN/components/skeleton",
           },
           {
             id: 4,
-            title: '布局',
-            subTitle: 'layout',
-            path: '/zh-CN/components/layout',
+            title: "布局",
+            subTitle: "layout",
+            path: "/zh-CN/components/layout",
           },
           {
             id: 5,
-            title: '容器',
-            subTitle: 'container',
-            path: '/zh-CN/components/container',
+            title: "容器",
+            subTitle: "container",
+            path: "/zh-CN/components/container",
           },
           {
             id: 11,
-            title: '栅格',
-            subTitle: 'grid',
-            path: '/zh-CN/components/grid',
+            title: "栅格",
+            subTitle: "grid",
+            path: "/zh-CN/components/grid",
           },
           {
             id: 8,
-            title: '面板',
-            subTitle: 'panel',
-            path: '/zh-CN/components/panel',
+            title: "面板",
+            subTitle: "panel",
+            path: "/zh-CN/components/panel",
           },
           {
             id: 9,
-            title: '卡片',
-            subTitle: 'card',
-            path: '/zh-CN/components/card',
+            title: "卡片",
+            subTitle: "card",
+            path: "/zh-CN/components/card",
           },
         ],
       },
       {
         id: 1,
-        title: '导航',
+        title: "导航",
         children: [
           {
             id: 16,
-            title: '菜单',
-            subTitle: 'nav',
-            path: '/zh-CN/components/menu',
+            title: "菜单",
+            subTitle: "nav",
+            path: "/zh-CN/components/menu",
           },
           {
             id: 17,
-            title: '面包屑',
-            subTitle: 'breadcrumb',
-            path: '/zh-CN/components/breadcrumb',
+            title: "面包屑",
+            subTitle: "breadcrumb",
+            path: "/zh-CN/components/breadcrumb",
           },
           {
             id: 28,
-            title: '选项卡',
-            subTitle: 'tab',
-            path: '/zh-CN/components/tab',
+            title: "选项卡",
+            subTitle: "tab",
+            path: "/zh-CN/components/tab",
           },
           {
             id: 27,
-            title: '下拉菜单',
-            subTitle: 'dropdown',
-            path: '/zh-CN/components/dropdown',
+            title: "下拉菜单",
+            subTitle: "dropdown",
+            path: "/zh-CN/components/dropdown",
           },
           {
             id: 42,
-            title: '返回顶部',
-            subTitle: 'backtop',
-            path: '/zh-CN/components/backtop',
+            title: "返回顶部",
+            subTitle: "backtop",
+            path: "/zh-CN/components/backtop",
           },
         ],
       },
       {
         id: 1,
-        title: '表单',
+        title: "表单",
         children: [
           {
             id: 36,
-            title: '开关',
-            subTitle: 'switch',
-            path: '/zh-CN/components/switch',
+            title: "开关",
+            subTitle: "switch",
+            path: "/zh-CN/components/switch",
           },
           {
             id: 32,
-            title: '复选框',
-            subTitle: 'checkbox',
-            path: '/zh-CN/components/checkbox',
+            title: "复选框",
+            subTitle: "checkbox",
+            path: "/zh-CN/components/checkbox",
           },
           {
             id: 33,
-            title: '单选框',
-            subTitle: 'radio',
-            path: '/zh-CN/components/radio',
+            title: "单选框",
+            subTitle: "radio",
+            path: "/zh-CN/components/radio",
           },
           {
             id: 34,
-            title: '输入框',
-            subTitle: 'input',
-            path: '/zh-CN/components/input',
+            title: "输入框",
+            subTitle: "input",
+            path: "/zh-CN/components/input",
           },
           {
             id: 341,
-            title: '数字输入框',
-            subTitle: 'inputNumber',
-            path: '/zh-CN/components/inputNumber',
+            title: "数字输入框",
+            subTitle: "inputNumber",
+            path: "/zh-CN/components/inputNumber",
           },
           {
             id: 35,
-            title: '文本域',
-            subTitle: 'textarea',
-            path: '/zh-CN/components/textarea',
+            title: "文本域",
+            subTitle: "textarea",
+            path: "/zh-CN/components/textarea",
           },
           {
             id: 39,
-            title: '下拉选择',
-            subTitle: 'select',
-            path: '/zh-CN/components/select',
+            title: "下拉选择",
+            subTitle: "select",
+            path: "/zh-CN/components/select",
           },
           {
             id: 40,
-            title: '颜色选择器',
-            subTitle: 'colorPicker',
-            path: '/zh-CN/components/colorPicker',
+            title: "颜色选择器",
+            subTitle: "colorPicker",
+            path: "/zh-CN/components/colorPicker",
           },
           {
             id: 29,
-            title: '图标选择器',
-            subTitle: 'iconPicker',
-            path: '/zh-CN/components/iconPicker',
+            title: "图标选择器",
+            subTitle: "iconPicker",
+            path: "/zh-CN/components/iconPicker",
           },
           {
             id: 26,
-            title: '评分',
-            subTitle: 'rate',
-            path: '/zh-CN/components/rate',
+            title: "评分",
+            subTitle: "rate",
+            path: "/zh-CN/components/rate",
           },
           {
             id: 37,
-            title: '滑块',
-            subTitle: 'slider',
-            path: '/zh-CN/components/slider',
+            title: "滑块",
+            subTitle: "slider",
+            path: "/zh-CN/components/slider",
           },
           {
             id: 12,
-            title: '表单',
-            subTitle: 'form',
-            path: '/zh-CN/components/form',
+            title: "表单",
+            subTitle: "form",
+            path: "/zh-CN/components/form",
           },
         ],
       },
       {
         id: 1,
-        title: '展示',
+        title: "展示",
         children: [
           {
             id: 18,
-            title: '进度',
-            subTitle: 'progress',
-            path: '/zh-CN/components/progress',
+            title: "进度",
+            subTitle: "progress",
+            path: "/zh-CN/components/progress",
           },
           {
             id: 19,
-            title: '时间线',
-            subTitle: 'timeline',
-            path: '/zh-CN/components/timeline',
+            title: "时间线",
+            subTitle: "timeline",
+            path: "/zh-CN/components/timeline",
           },
           {
             id: 21,
-            title: '折叠面板',
-            subTitle: 'collapse',
-            path: '/zh-CN/components/collapse',
+            title: "折叠面板",
+            subTitle: "collapse",
+            path: "/zh-CN/components/collapse",
           },
           {
             id: 22,
-            title: '表格',
-            subTitle: 'table',
-            path: '/zh-CN/components/table',
+            title: "表格",
+            subTitle: "table",
+            path: "/zh-CN/components/table",
           },
           {
             id: 23,
-            title: '头像',
-            subTitle: 'avatar',
-            path: '/zh-CN/components/avatar',
+            title: "头像",
+            subTitle: "avatar",
+            path: "/zh-CN/components/avatar",
           },
           {
             id: 25,
-            title: '空',
-            subTitle: 'empty',
-            path: '/zh-CN/components/empty',
+            title: "空",
+            subTitle: "empty",
+            path: "/zh-CN/components/empty",
           },
           {
             id: 29,
-            title: '分页',
-            subTitle: 'page',
-            path: '/zh-CN/components/page',
+            title: "分页",
+            subTitle: "page",
+            path: "/zh-CN/components/page",
           },
           {
             id: 30,
-            title: '树形组件',
-            subTitle: 'tree',
-            path: '/zh-CN/components/tree',
+            title: "树形组件",
+            subTitle: "tree",
+            path: "/zh-CN/components/tree",
           },
           {
             id: 31,
-            title: '穿梭框',
-            subTitle: 'transfer',
-            path: '/zh-CN/components/transfer',
+            title: "穿梭框",
+            subTitle: "transfer",
+            path: "/zh-CN/components/transfer",
           },
           {
             id: 38,
-            title: '轮播',
-            subTitle: 'carousel',
-            path: '/zh-CN/components/carousel',
+            title: "轮播",
+            subTitle: "carousel",
+            path: "/zh-CN/components/carousel",
           },
           {
             id: 43,
-            title: '数字滚动',
-            subTitle: 'countUp',
-            path: '/zh-CN/components/countup',
+            title: "数字滚动",
+            subTitle: "countUp",
+            path: "/zh-CN/components/countup",
           },
         ],
       },
       {
         id: 1,
-        title: '辅助',
+        title: "辅助",
         children: [
           {
             id: 13,
-            title: '徽章',
-            subTitle: 'badge',
-            path: '/zh-CN/components/badge',
+            title: "徽章",
+            subTitle: "badge",
+            path: "/zh-CN/components/badge",
           },
           {
             id: 14,
-            title: '区块',
-            subTitle: 'block',
-            path: '/zh-CN/components/block',
+            title: "区块",
+            subTitle: "block",
+            path: "/zh-CN/components/block",
           },
           {
             id: 15,
-            title: '分割',
-            subTitle: 'line',
-            path: '/zh-CN/components/line',
+            title: "分割",
+            subTitle: "line",
+            path: "/zh-CN/components/line",
           },
           {
             id: 24,
-            title: '字段',
-            subTitle: 'field',
-            path: '/zh-CN/components/field',
+            title: "字段",
+            subTitle: "field",
+            path: "/zh-CN/components/field",
           },
           {
             id: 25,
-            title: '文字提示',
-            subTitle: 'tooltip',
-            path: '/zh-CN/components/tooltip',
+            title: "文字提示",
+            subTitle: "tooltip",
+            path: "/zh-CN/components/tooltip",
+          },
+          {
+            id: 99,
+            title: "分步",
+            subTitle: "setup",
+            path: "/zh-CN/components/step",
           },
         ],
       },
       {
         id: 1,
-        title: '反馈',
+        title: "反馈",
         children: [
           {
             id: 90,
-            title: '弹层',
-            subTitle: 'modal',
-            path: '/zh-CN/components/modal',
-          },{
+            title: "弹层",
+            subTitle: "modal",
+            path: "/zh-CN/components/modal",
+          },
+          {
             id: 91,
-            title: '加载',
-            subTitle: 'modal',
-            path: '/zh-CN/components/load',
-          },{
+            title: "加载",
+            subTitle: "modal",
+            path: "/zh-CN/components/load",
+          },
+          {
             id: 92,
-            title: '询问',
-            subTitle: 'confirm',
-            path: '/zh-CN/components/confirm',
-          },{
+            title: "询问",
+            subTitle: "confirm",
+            path: "/zh-CN/components/confirm",
+          },
+          {
             id: 93,
-            title: '消息',
-            subTitle: 'msg',
-            path: '/zh-CN/components/msg',
+            title: "消息",
+            subTitle: "msg",
+            path: "/zh-CN/components/msg",
           },
         ],
       },
-    ]
+    ];
 
-    const selected = ref(1)
+    const selected = ref(1);
 
     const handleClick = function (menu) {
-      selected.value = menu.id
-      router.push(menu.path)
-    }
+      selected.value = menu.id;
+      router.push(menu.path);
+    };
 
     return {
       menus,
       selected,
       currentPath,
       handleClick,
-    }
+    };
   },
-}
+};
 </script>
diff --git a/src/index.ts b/src/index.ts
index 30bc9169..1ebbc37b 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -67,8 +67,10 @@ import LayCarouselItem from "./module/carouselItem/index";
 import LayColorPicker from "./module/colorPicker/index";
 import LayTooltip from "./module/tooltip/index";
 import LayInputNumber from "./module/inputNumber/index";
-import LaySkeleton from './module/skeleton/index';
-import LaySkeletonItem from './module/skeletonItem/index';
+import LaySkeleton from "./module/skeleton/index";
+import LaySkeletonItem from "./module/skeletonItem/index";
+import LayStep from "./module/step/index";
+import LayStepItem from "./module/stepItem/index";
 
 const components: Record<string, IDefineComponent> = {
   LayRadio,
@@ -134,6 +136,8 @@ const components: Record<string, IDefineComponent> = {
   LaySkeleton,
   LaySkeletonItem,
   LayCountUp,
+  LayStep,
+  LayStepItem,
 };
 
 const install = (app: App, options?: InstallOptions): void => {
@@ -146,6 +150,8 @@ const install = (app: App, options?: InstallOptions): void => {
 };
 
 export {
+  LayStep,
+  LayStepItem,
   LaySkeleton,
   LaySkeletonItem,
   LayRadio,
@@ -205,7 +211,7 @@ export {
   LayCarousel,
   LayCarouselItem,
   LayColorPicker,
-  LayModal
+  LayModal,
 };
 
 export { layer };
diff --git a/src/module/slider/index.vue b/src/module/slider/index.vue
index e9de0ceb..afdc5d59 100644
--- a/src/module/slider/index.vue
+++ b/src/module/slider/index.vue
@@ -108,13 +108,13 @@ const props = withDefaults(defineProps<LaySliderProps>(), {
 
 let rangeValue: Ref<number[]> = ref([0, 0]);
 if (Array.isArray(props.modelValue)) {
-  // eslint-disable-next-line vue/no-setup-props-destructure
+  // eslint-disable-next-line vue/no-step-props-destructure
   rangeValue.value = props.modelValue;
 }
 
 let verticalRangeValue: Ref<number[]> = ref([0, 0]);
 if (Array.isArray(props.modelValue)) {
-  // eslint-disable-next-line vue/no-setup-props-destructure
+  // eslint-disable-next-line vue/no-step-props-destructure
   verticalRangeValue.value = props.modelValue;
 }
 
diff --git a/src/module/step/index.less b/src/module/step/index.less
new file mode 100644
index 00000000..95e78172
--- /dev/null
+++ b/src/module/step/index.less
@@ -0,0 +1,191 @@
+@width-height-pace: 20px;
+@step-color: #5FB878;
+
+.lay-step{
+  display: flex;
+  flex-wrap: nowrap;
+  .lay-step-item{
+    flex-grow: 1;
+  }
+
+  .is-item-center{
+    text-align: center;
+  }
+
+  .lay-step-item-last {
+    flex-grow: 0 !important;
+  }
+  .lay-step-item-pace{
+    width: @width-height-pace;
+    height: @width-height-pace;
+    border: 2px #8D8D8D solid;
+    border-radius: 50%;
+    text-align: center;
+    line-height: @width-height-pace;
+    background: #FFFFFF;
+  }
+  .is-center{
+    margin: 0 auto;
+  }
+  .lay-step-item-active{
+    border: 2px @step-color solid;
+    color: #FFFFFF;
+    background: @step-color;
+  }
+  .lay-step-item-wait{
+    border: 2px #000000 solid;
+    color: #000000;
+  }
+
+  .lay-step-item--success {
+    border: 2px @step-color solid;
+    color: #FFFFFF;
+    background: @step-color;
+  }
+
+  .lay-step-item--fail{
+    border: 2px #FF5722 solid;
+    color: #FFFFFF;
+    background: #FF5722;
+  }
+
+  .lay-step-item--warning{
+    border: 2px #FFB800 solid;
+    color: #FFFFFF;
+    background: #FFB800;
+  }
+  .lay-step-item--primary{
+    border: 2px #1E9FFF solid;
+    color: #FFFFFF;
+    background: #1E9FFF;
+  }
+
+  .lay-step-item-success {
+    border: 2px @step-color solid;
+    color: #FFFFFF;
+    background: @step-color;
+  }
+
+  .lay-step-item-fail{
+    border: 2px #FF5722 solid;
+    color: #FFFFFF;
+    background: #FF5722;
+  }
+
+  .lay-step-item-warning{
+    border: 2px #FFB800 solid;
+    color: #FFFFFF;
+    background: #FFB800;
+  }
+  .lay-step-item-primary{
+    border: 2px #1E9FFF solid;
+    color: #FFFFFF;
+    background: #1E9FFF;
+  }
+
+  .lay-step-item-content{
+    color: #8D8D8D;
+    .lay-step-item-content-title{
+      font-weight: bold;
+      font-size: 16px;
+    }
+  }
+
+  .lay-step-item-content-active{
+    color: @step-color;
+  }
+
+  .lay-step-item-content--success{
+    color: @step-color;
+  }
+  .lay-step-item-content--fail{
+    color: #FF5722;
+  }
+  .lay-step-item-content--warning{
+    color: #FFB800;
+  }
+  .lay-step-item-content--primary{
+    color: #1E9FFF;
+  }
+
+  .lay-step-item-content-wait{
+    color: #000000;
+  }
+  .lay-step-item-content-success{
+    color: @step-color;
+  }
+  .lay-step-item-content-fail{
+    color: #FF5722;
+  }
+  .lay-step-item-content-warning{
+    color: #FFB800;
+  }
+  .lay-step-item-content-primary{
+    color: #1E9FFF;
+  }
+
+
+  .lay-step-item-line{
+    position: relative;
+  }
+
+  .lay-step-item-line:before {
+    z-index: -1;
+    content: "";
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    display: block;
+    height: 2px;
+    width: 100%;
+    background: #C9C5C5;
+  }
+  .is-line-center:before {
+    left: 50%;
+  }
+
+  .lay-step-item-line-active:before {
+    transition: background 150ms;
+    background: #5FB878 !important;
+  }
+
+  .lay-step-item-line-fail:before {
+    transition: background 150ms;
+    background: #FF5722 !important;
+  }
+
+  .lay-step-item-line-warning:before {
+    transition: background 150ms;
+    background: #FFB800 !important;
+  }
+
+  .lay-step-item-line-primary:before {
+    transition: background 150ms;
+    background: #1E9FFF !important;
+  }
+
+}
+.lay-step-column {
+  height: 100%;
+  flex-flow: column;
+  .lay-step-item-line{
+    position: relative;
+    height: 100%;
+    width: 24px;
+  }
+  .lay-step-item-line:before {
+    z-index: -1;
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 50%;
+    transform: translateX(-50%);
+    display: block;
+    width: 2px;
+    height: 100%;
+    background: #C9C5C5;
+  }
+  .is-vertical{
+    display: flex;
+  }
+}
\ No newline at end of file
diff --git a/src/module/step/index.ts b/src/module/step/index.ts
new file mode 100644
index 00000000..653031e9
--- /dev/null
+++ b/src/module/step/index.ts
@@ -0,0 +1,9 @@
+import type { App } from "vue";
+import Component from "./index.vue";
+import type { IDefineComponent } from "../type/index";
+
+Component.install = (app: App) => {
+  app.component(Component.name || "laySetup", Component);
+};
+
+export default Component as IDefineComponent;
diff --git a/src/module/step/index.vue b/src/module/step/index.vue
new file mode 100644
index 00000000..9dc9d4cf
--- /dev/null
+++ b/src/module/step/index.vue
@@ -0,0 +1,43 @@
+<template>
+  <div :class="['lay-step', direction !== 'vertical' ? '' : 'lay-step-column']">
+    <slot></slot>
+  </div>
+</template>
+
+<script setup name="layStep" lang="ts">
+import { ref, watch, provide, defineProps, withDefaults } from "vue";
+import "./index.less";
+
+export interface LayStepProps {
+  active?: number;
+  center?: boolean;
+  direction?: string;
+  space?: string;
+  currentStatus?: string;
+}
+
+const props = withDefaults(defineProps<LayStepProps>(), {
+  active: 0,
+  center: false,
+  direction: "horizontal",
+  space: "auto",
+  currentStatus: "primary",
+});
+
+const steps = ref([]);
+
+watch(steps, () => {
+  steps.value.forEach(
+    (instance: { setIndex: (arg0: any) => void }, index: any) => {
+      instance.setIndex(index);
+    }
+  );
+});
+
+provide("LayStep", {
+  props,
+  steps,
+});
+</script>
+
+<style scoped></style>
diff --git a/src/module/stepItem/index.ts b/src/module/stepItem/index.ts
new file mode 100644
index 00000000..9b8c7296
--- /dev/null
+++ b/src/module/stepItem/index.ts
@@ -0,0 +1,9 @@
+import type { App } from "vue";
+import Component from "./index.vue";
+import type { IDefineComponent } from "../type/index";
+
+Component.install = (app: App) => {
+  app.component(Component.name || "laySetupItem", Component);
+};
+
+export default Component as IDefineComponent;
diff --git a/src/module/stepItem/index.vue b/src/module/stepItem/index.vue
new file mode 100644
index 00000000..912681a9
--- /dev/null
+++ b/src/module/stepItem/index.vue
@@ -0,0 +1,152 @@
+<template>
+  <div
+    :class="[
+      'lay-step-item',
+      isLast && !isCenter ? 'lay-step-item-last' : '',
+      isCenter ? 'is-item-center' : '',
+      isVertical ? 'is-vertical' : '',
+    ]"
+    :style="{ flexBasis: space, flexGrow: space === 'auto' ? 1 : 0 }"
+  >
+    <div
+      :class="[
+        !isLast
+          ? isLineActive
+            ? `lay-step-item-line lay-step-item-line-${status || 'active'}`
+            : 'lay-step-item-line'
+          : '',
+        isCenter ? 'is-line-center' : '',
+      ]"
+    >
+      <div
+        :class="[
+          'lay-step-item-pace',
+          isActive ? `lay-step-item-active` : '',
+          isCurrent === index ? `lay-step-item--${currentStatus}` : '',
+          status ? `lay-step-item-${status}` : '',
+          isWait ? 'lay-step-item-wait' : '',
+          isCenter ? 'is-center' : '',
+        ]"
+      >
+        <slot name="pace">
+          <template v-if="icon">
+            <lay-icon :type="icon"></lay-icon>
+          </template>
+          <template v-else>
+            <span v-if="!isActive">{{ index + 1 }}</span>
+            <lay-icon
+              v-else
+              :type="status === 'fail' ? 'layui-icon-close' : 'layui-icon-ok'"
+            ></lay-icon>
+          </template>
+        </slot>
+      </div>
+    </div>
+    <slot>
+      <div
+        :class="[
+          'lay-step-item-content',
+          isActive ? `lay-step-item-content-active` : '',
+          isCurrent === index ? `lay-step-item-content--${currentStatus}` : '',
+          status ? `lay-step-item-content-${status}` : '',
+          isWait ? 'lay-step-item-content-wait' : '',
+        ]"
+      >
+        <div class="lay-step-item-content-title">{{ title }}</div>
+        <p>{{ content }}</p>
+      </div>
+    </slot>
+  </div>
+</template>
+
+<script setup name="LayStepItem" lang="ts">
+import {
+  ref,
+  inject,
+  onMounted,
+  computed,
+  getCurrentInstance,
+  onBeforeUnmount,
+  reactive,
+  defineProps,
+  withDefaults,
+} from "vue";
+
+import type { ComputedRef } from "vue";
+
+export interface LayStepItemProps {
+  title?: string;
+  content?: string;
+  icon?: string;
+  status?: string;
+}
+
+const props = withDefaults(defineProps<LayStepItemProps>(), {
+  title: "",
+  content: "",
+  icon: "",
+  status: "",
+});
+
+const index = ref(-1);
+const parents: any = inject("LayStep");
+const currentInstance: any = getCurrentInstance();
+const setIndex = (val: number) => {
+  index.value = val;
+};
+
+const stepsCount = computed(() => {
+  return parents.steps.value.length;
+});
+
+const currentStatus = computed(() => {
+  return parents.props.currentStatus;
+});
+const isCurrent = computed(() => {
+  return parents.props.active;
+});
+console.log(isCurrent);
+const space = computed(() => {
+  return parents.props.space;
+});
+
+const isVertical = computed(() => {
+  return parents.props.direction === "vertical";
+});
+
+const isCenter = computed(() => {
+  return parents.props.center;
+});
+
+const isLineActive: ComputedRef<boolean> = computed(() => {
+  return index.value <= parents.props.active - 1;
+});
+
+const isWait: ComputedRef<boolean> = computed(() => {
+  return index.value === parents.props.active + 1;
+});
+
+const isActive: ComputedRef<boolean> = computed(() => {
+  return index.value <= parents.props.active;
+});
+const isLast: ComputedRef<boolean> = computed(() => {
+  return (
+    parents.steps.value[stepsCount.value - 1]?.itemId === currentInstance.uid
+  );
+});
+
+const stepItemState = reactive({
+  itemId: computed(() => currentInstance?.uid),
+  setIndex,
+});
+
+parents.steps.value = [...parents.steps.value, stepItemState];
+
+onMounted(() => {});
+
+onBeforeUnmount(() => {
+  parents.steps.value = parents.steps.value.filter(
+    (instance: { itemId: any }) => instance.itemId !== currentInstance.uid
+  );
+});
+</script>

From d3e57feb5de38f3ec83ffc0ec2e9b3380e3b2bba Mon Sep 17 00:00:00 2001
From: dingyongya <yahya_dyy@163.com>
Date: Tue, 4 Jan 2022 18:19:21 +0800
Subject: [PATCH 26/29] =?UTF-8?q?1.=E6=AD=A5=E9=AA=A4=E6=9D=A1=E5=B0=81?=
 =?UTF-8?q?=E8=A3=85?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 example/src/router/zh-CN.ts | 469 ++++++++++++++++++------------------
 1 file changed, 240 insertions(+), 229 deletions(-)

diff --git a/example/src/router/zh-CN.ts b/example/src/router/zh-CN.ts
index 746ed43d..8f5347f9 100644
--- a/example/src/router/zh-CN.ts
+++ b/example/src/router/zh-CN.ts
@@ -1,362 +1,373 @@
-import BaseLayout from '../layouts/Layout.vue'
-import Component from '../view/component.vue'
-import Hooks from '../view/hooks.vue'
-import Guide from '../view/guide.vue'
-import Index from '../view/index.vue'
-import Ecology from '../view/ecology.vue'
+import BaseLayout from "../layouts/Layout.vue";
+import Component from "../view/component.vue";
+import Hooks from "../view/hooks.vue";
+import Guide from "../view/guide.vue";
+import Index from "../view/index.vue";
+import Ecology from "../view/ecology.vue";
 
 const zhCN = [
   {
-    path: '/',
-    redirect: '/zh-CN/index',
+    path: "/",
+    redirect: "/zh-CN/index",
     component: BaseLayout,
-    meta: { title: '首页' },
+    meta: { title: "首页" },
     children: [
       {
-        path: '/zh-CN/index',
+        path: "/zh-CN/index",
         component: Index,
-        meta: { title: '指南' },
+        meta: { title: "指南" },
       },
       {
-        path: '/zh-CN/ecology',
+        path: "/zh-CN/ecology",
         component: Ecology,
-        meta: { title: '生态' },
+        meta: { title: "生态" },
       },
       {
-        path: '/zh-CN/guide',
-        redirect: '/zh-CN/guide/introduce',
+        path: "/zh-CN/guide",
+        redirect: "/zh-CN/guide/introduce",
         component: Guide,
-        meta: { title: '指南' },
+        meta: { title: "指南" },
         children: [
           {
-            path: '/zh-CN/guide/introduce',
-            component: () => import('../../docs/zh-CN/guide/introduce.md'),
-            meta: { title: '介绍' },
+            path: "/zh-CN/guide/introduce",
+            component: () => import("../../docs/zh-CN/guide/introduce.md"),
+            meta: { title: "介绍" },
           },
           {
-            path: '/zh-CN/guide/getStarted',
-            component: () => import('../../docs/zh-CN/guide/getStarted.md'),
-            meta: { title: '安装' },
+            path: "/zh-CN/guide/getStarted",
+            component: () => import("../../docs/zh-CN/guide/getStarted.md"),
+            meta: { title: "安装" },
           },
           {
-            path: '/zh-CN/guide/changelog',
-            component: () => import('../../docs/zh-CN/guide/changelog.md'),
-            meta: { title: '更新' },
+            path: "/zh-CN/guide/changelog",
+            component: () => import("../../docs/zh-CN/guide/changelog.md"),
+            meta: { title: "更新" },
           },
           {
-            path: '/zh-CN/guide/problem',
-            component: () => import('../../docs/zh-CN/guide/problem.md'),
-            meta: { title: '问题' },
+            path: "/zh-CN/guide/problem",
+            component: () => import("../../docs/zh-CN/guide/problem.md"),
+            meta: { title: "问题" },
           },
           {
-            path: '/zh-CN/guide/member',
-            component: () => import('../../docs/zh-CN/guide/member.md'),
-            meta: { title: '团队' },
+            path: "/zh-CN/guide/member",
+            component: () => import("../../docs/zh-CN/guide/member.md"),
+            meta: { title: "团队" },
           },
           {
-            path: '/zh-CN/guide/norms',
-            component: () => import('../../docs/zh-CN/guide/norms.md'),
-            meta: { title: '规范' },
+            path: "/zh-CN/guide/norms",
+            component: () => import("../../docs/zh-CN/guide/norms.md"),
+            meta: { title: "规范" },
           },
           {
-            path: '/zh-CN/guide/theme',
-            component: () => import('../../docs/zh-CN/guide/theme.md'),
-            meta: { title: '主题' },
+            path: "/zh-CN/guide/theme",
+            component: () => import("../../docs/zh-CN/guide/theme.md"),
+            meta: { title: "主题" },
           },
           {
-            path: '/zh-CN/guide/sponsor',
-            component: () => import('../../docs/zh-CN/guide/sponsor.md'),
-            meta: { title: '赞助' },
+            path: "/zh-CN/guide/sponsor",
+            component: () => import("../../docs/zh-CN/guide/sponsor.md"),
+            meta: { title: "赞助" },
           },
         ],
       },
       {
-        path: '/zh-CN/components',
-        redirect: '/zh-CN/components/color',
+        path: "/zh-CN/components",
+        redirect: "/zh-CN/components/color",
         component: Component,
-        meta: { title: '组件' },
+        meta: { title: "组件" },
         children: [
           {
-            path: '/zh-CN/components/skeleton',
-            component: () => import('../../docs/zh-CN/components/skeleton.md'),
-            meta: { title: '骨架屏' },
+            path: "/zh-CN/components/skeleton",
+            component: () => import("../../docs/zh-CN/components/skeleton.md"),
+            meta: { title: "骨架屏" },
           },
           {
-            path: '/zh-CN/components/layout',
-            component: () => import('../../docs/zh-CN/components/layout.md'),
-            meta: { title: '布局' },
+            path: "/zh-CN/components/layout",
+            component: () => import("../../docs/zh-CN/components/layout.md"),
+            meta: { title: "布局" },
           },
           {
-            path: '/zh-CN/components/color',
-            component: () => import('../../docs/zh-CN/components/color.md'),
-            meta: { title: '颜色' },
+            path: "/zh-CN/components/color",
+            component: () => import("../../docs/zh-CN/components/color.md"),
+            meta: { title: "颜色" },
           },
           {
-            path: '/zh-CN/components/container',
-            component: () => import('../../docs/zh-CN/components/container.md'),
-            meta: { title: '容器' },
+            path: "/zh-CN/components/container",
+            component: () => import("../../docs/zh-CN/components/container.md"),
+            meta: { title: "容器" },
           },
           {
-            path: '/zh-CN/components/breadcrumb',
+            path: "/zh-CN/components/breadcrumb",
             component: () =>
-              import('../../docs/zh-CN/components/breadcrumb.md'),
-            meta: { title: '面包屑' },
+              import("../../docs/zh-CN/components/breadcrumb.md"),
+            meta: { title: "面包屑" },
           },
           {
-            path: '/zh-CN/components/button',
-            component: () => import('../../docs/zh-CN/components/button.md'),
-            meta: { title: '按钮' },
+            path: "/zh-CN/components/button",
+            component: () => import("../../docs/zh-CN/components/button.md"),
+            meta: { title: "按钮" },
           },
           {
-            path: '/zh-CN/components/icon',
-            component: () => import('../../docs/zh-CN/components/icon.md'),
-            meta: { title: '图标' },
+            path: "/zh-CN/components/icon",
+            component: () => import("../../docs/zh-CN/components/icon.md"),
+            meta: { title: "图标" },
           },
           {
-            path: '/zh-CN/components/panel',
-            component: () => import('../../docs/zh-CN/components/panel.md'),
-            meta: { title: '面板' },
+            path: "/zh-CN/components/panel",
+            component: () => import("../../docs/zh-CN/components/panel.md"),
+            meta: { title: "面板" },
           },
           {
-            path: '/zh-CN/components/animation',
-            component: () => import('../../docs/zh-CN/components/animation.md'),
-            meta: { title: '动画' },
+            path: "/zh-CN/components/animation",
+            component: () => import("../../docs/zh-CN/components/animation.md"),
+            meta: { title: "动画" },
           },
           {
-            path: '/zh-CN/components/card',
-            component: () => import('../../docs/zh-CN/components/card.md'),
-            meta: { title: '卡片' },
+            path: "/zh-CN/components/card",
+            component: () => import("../../docs/zh-CN/components/card.md"),
+            meta: { title: "卡片" },
           },
           {
-            path: '/zh-CN/components/grid',
-            component: () => import('../../docs/zh-CN/components/grid.md'),
-            meta: { title: '栅格' },
+            path: "/zh-CN/components/grid",
+            component: () => import("../../docs/zh-CN/components/grid.md"),
+            meta: { title: "栅格" },
           },
           {
-            path: '/zh-CN/components/form',
-            component: () => import('../../docs/zh-CN/components/form.md'),
-            meta: { title: '表单' },
+            path: "/zh-CN/components/form",
+            component: () => import("../../docs/zh-CN/components/form.md"),
+            meta: { title: "表单" },
           },
           {
-            path: '/zh-CN/components/badge',
-            component: () => import('../../docs/zh-CN/components/badge.md'),
-            meta: { title: '徽章' },
+            path: "/zh-CN/components/badge",
+            component: () => import("../../docs/zh-CN/components/badge.md"),
+            meta: { title: "徽章" },
           },
           {
-            path: '/zh-CN/components/block',
-            component: () => import('../../docs/zh-CN/components/block.md'),
-            meta: { title: '辅助' },
+            path: "/zh-CN/components/block",
+            component: () => import("../../docs/zh-CN/components/block.md"),
+            meta: { title: "辅助" },
           },
           {
-            path: '/zh-CN/components/line',
-            component: () => import('../../docs/zh-CN/components/line.md'),
-            meta: { title: '分割' },
+            path: "/zh-CN/components/line",
+            component: () => import("../../docs/zh-CN/components/line.md"),
+            meta: { title: "分割" },
           },
           {
-            path: '/zh-CN/components/progress',
-            component: () => import('../../docs/zh-CN/components/progress.md'),
-            meta: { title: '进度' },
+            path: "/zh-CN/components/progress",
+            component: () => import("../../docs/zh-CN/components/progress.md"),
+            meta: { title: "进度" },
           },
           {
-            path: '/zh-CN/components/menu',
-            component: () => import('../../docs/zh-CN/components/menu.md'),
-            meta: { title: '菜单' },
+            path: "/zh-CN/components/menu",
+            component: () => import("../../docs/zh-CN/components/menu.md"),
+            meta: { title: "菜单" },
           },
           {
-            path: '/zh-CN/components/timeline',
-            component: () => import('../../docs/zh-CN/components/timeline.md'),
-            meta: { title: '时间线' },
+            path: "/zh-CN/components/timeline",
+            component: () => import("../../docs/zh-CN/components/timeline.md"),
+            meta: { title: "时间线" },
           },
           {
-            path: '/zh-CN/components/collapse',
-            component: () => import('../../docs/zh-CN/components/collapse.md'),
-            meta: { title: '折叠面板' },
+            path: "/zh-CN/components/collapse",
+            component: () => import("../../docs/zh-CN/components/collapse.md"),
+            meta: { title: "折叠面板" },
           },
           {
-            path: '/zh-CN/components/table',
-            component: () => import('../../docs/zh-CN/components/table.md'),
-            meta: { title: '表格' },
+            path: "/zh-CN/components/step",
+            component: () => import("../../docs/zh-CN/components/step.md"),
+            meta: { title: "分步" },
           },
           {
-            path: '/zh-CN/components/avatar',
-            component: () => import('../../docs/zh-CN/components/avatar.md'),
-            meta: { title: '头像' },
+            path: "/zh-CN/components/table",
+            component: () => import("../../docs/zh-CN/components/table.md"),
+            meta: { title: "表格" },
           },
           {
-            path: '/zh-CN/components/field',
-            component: () => import('../../docs/zh-CN/components/field.md'),
-            meta: { title: '字段' },
+            path: "/zh-CN/components/avatar",
+            component: () => import("../../docs/zh-CN/components/avatar.md"),
+            meta: { title: "头像" },
           },
           {
-            path: '/zh-CN/components/empty',
-            component: () => import('../../docs/zh-CN/components/empty.md'),
-            meta: { title: '空' },
+            path: "/zh-CN/components/field",
+            component: () => import("../../docs/zh-CN/components/field.md"),
+            meta: { title: "字段" },
           },
           {
-            path: '/zh-CN/components/rate',
-            component: () => import('../../docs/zh-CN/components/rate.md'),
-            meta: { title: '评分' },
+            path: "/zh-CN/components/empty",
+            component: () => import("../../docs/zh-CN/components/empty.md"),
+            meta: { title: "空" },
           },
           {
-            path: '/zh-CN/components/dropdown',
-            component: () => import('../../docs/zh-CN/components/dropdown.md'),
-            meta: { title: '下拉' },
+            path: "/zh-CN/components/rate",
+            component: () => import("../../docs/zh-CN/components/rate.md"),
+            meta: { title: "评分" },
           },
           {
-            path: '/zh-CN/components/tab',
-            component: () => import('../../docs/zh-CN/components/tab.md'),
-            meta: { title: '选项卡' },
+            path: "/zh-CN/components/dropdown",
+            component: () => import("../../docs/zh-CN/components/dropdown.md"),
+            meta: { title: "下拉" },
           },
           {
-            path: '/zh-CN/components/iconPicker',
+            path: "/zh-CN/components/tab",
+            component: () => import("../../docs/zh-CN/components/tab.md"),
+            meta: { title: "选项卡" },
+          },
+          {
+            path: "/zh-CN/components/iconPicker",
             component: () =>
-              import('../../docs/zh-CN/components/iconPicker.md'),
-            meta: { title: '图标选择' },
+              import("../../docs/zh-CN/components/iconPicker.md"),
+            meta: { title: "图标选择" },
           },
           {
-            path: '/zh-CN/components/tree',
-            component: () => import('../../docs/zh-CN/components/tree.md'),
-            meta: { title: '树形组件' },
+            path: "/zh-CN/components/tree",
+            component: () => import("../../docs/zh-CN/components/tree.md"),
+            meta: { title: "树形组件" },
           },
           {
-            path: '/zh-CN/components/page',
-            component: () => import('../../docs/zh-CN/components/page.md'),
-            meta: { title: '分页' },
+            path: "/zh-CN/components/page",
+            component: () => import("../../docs/zh-CN/components/page.md"),
+            meta: { title: "分页" },
           },
           {
-            path: '/zh-CN/components/transfer',
-            component: () => import('../../docs/zh-CN/components/transfer.md'),
-            meta: { title: '穿梭框' },
+            path: "/zh-CN/components/transfer",
+            component: () => import("../../docs/zh-CN/components/transfer.md"),
+            meta: { title: "穿梭框" },
           },
           {
-            path: '/zh-CN/components/checkbox',
-            component: () => import('../../docs/zh-CN/components/checkbox.md'),
-            meta: { title: '复选框' },
+            path: "/zh-CN/components/checkbox",
+            component: () => import("../../docs/zh-CN/components/checkbox.md"),
+            meta: { title: "复选框" },
           },
           {
-            path: '/zh-CN/components/radio',
-            component: () => import('../../docs/zh-CN/components/radio.md'),
-            meta: { title: '单选框' },
+            path: "/zh-CN/components/radio",
+            component: () => import("../../docs/zh-CN/components/radio.md"),
+            meta: { title: "单选框" },
           },
           {
-            path: '/zh-CN/components/input',
-            component: () => import('../../docs/zh-CN/components/input.md'),
-            meta: { title: '输入框' },
+            path: "/zh-CN/components/input",
+            component: () => import("../../docs/zh-CN/components/input.md"),
+            meta: { title: "输入框" },
           },
           {
-            path: '/zh-CN/components/inputNumber',
-            component: () => import('../../docs/zh-CN/components/inputNumber.md'),
-            meta: { title: '数字输入框' },
-          },
-          {
-            path: '/zh-CN/components/textarea',
-            component: () => import('../../docs/zh-CN/components/textarea.md'),
-            meta: { title: '文本域' },
-          },
-          {
-            path: '/zh-CN/components/switch',
-            component: () => import('../../docs/zh-CN/components/switch.md'),
-            meta: { title: '开关' },
-          },
-          {
-            path: '/zh-CN/components/slider',
-            component: () => import('../../docs/zh-CN/components/slider.md'),
-            meta: { title: '滑块' },
-          },
-          {
-            path: '/zh-CN/components/carousel',
-            component: () => import('../../docs/zh-CN/components/carousel.md'),
-            meta: { title: '轮播' },
-          },
-          {
-            path: '/zh-CN/components/select',
-            component: () => import('../../docs/zh-CN/components/select.md'),
-            meta: { title: '下拉选择' },
-          },
-          {
-            path: '/zh-CN/components/colorPicker',
+            path: "/zh-CN/components/inputNumber",
             component: () =>
-              import('../../docs/zh-CN/components/colorPicker.md'),
-            meta: { title: '颜色选择器' },
-          },{
-            path: '/zh-CN/components/layer',
-            component: () => import('../../docs/zh-CN/components/layer.md'),
-            meta: { title: '简介' },
+              import("../../docs/zh-CN/components/inputNumber.md"),
+            meta: { title: "数字输入框" },
           },
           {
-            path: '/zh-CN/components/tooltip',
-            component: () => import('../../docs/zh-CN/components/tooltip.md'),
-            meta: { title: '文字提示' },
+            path: "/zh-CN/components/textarea",
+            component: () => import("../../docs/zh-CN/components/textarea.md"),
+            meta: { title: "文本域" },
           },
           {
-            path: '/zh-CN/components/modal',
-            component: () => import('../../docs/zh-CN/components/modal.md'),
-            meta: { title: '弹层' },
-          },{
-            path: '/zh-CN/components/load',
-            component: () => import('../../docs/zh-CN/components/load.md'),
-            meta: { title: '加载' },
-          },{
-            path: '/zh-CN/components/confirm',
-            component: () => import('../../docs/zh-CN/components/confirm.md'),
-            meta: { title: '询问' },
-          },{
-            path: '/zh-CN/components/msg',
-            component: () => import('../../docs/zh-CN/components/msg.md'),
-            meta: { title: '信息' },
-          },{
-            path: '/zh-CN/components/backtop',
-            component: () => import('../../docs/zh-CN/components/backtop.md'),
-            meta: { title: '返回顶部' },
+            path: "/zh-CN/components/switch",
+            component: () => import("../../docs/zh-CN/components/switch.md"),
+            meta: { title: "开关" },
           },
           {
-            path: '/zh-CN/components/countup',
-            component: () => import('../../docs/zh-CN/components/countup.md'),
-            meta: { title: '数字滚动' },
+            path: "/zh-CN/components/slider",
+            component: () => import("../../docs/zh-CN/components/slider.md"),
+            meta: { title: "滑块" },
+          },
+          {
+            path: "/zh-CN/components/carousel",
+            component: () => import("../../docs/zh-CN/components/carousel.md"),
+            meta: { title: "轮播" },
+          },
+          {
+            path: "/zh-CN/components/select",
+            component: () => import("../../docs/zh-CN/components/select.md"),
+            meta: { title: "下拉选择" },
+          },
+          {
+            path: "/zh-CN/components/colorPicker",
+            component: () =>
+              import("../../docs/zh-CN/components/colorPicker.md"),
+            meta: { title: "颜色选择器" },
+          },
+          {
+            path: "/zh-CN/components/layer",
+            component: () => import("../../docs/zh-CN/components/layer.md"),
+            meta: { title: "简介" },
+          },
+          {
+            path: "/zh-CN/components/tooltip",
+            component: () => import("../../docs/zh-CN/components/tooltip.md"),
+            meta: { title: "文字提示" },
+          },
+          {
+            path: "/zh-CN/components/modal",
+            component: () => import("../../docs/zh-CN/components/modal.md"),
+            meta: { title: "弹层" },
+          },
+          {
+            path: "/zh-CN/components/load",
+            component: () => import("../../docs/zh-CN/components/load.md"),
+            meta: { title: "加载" },
+          },
+          {
+            path: "/zh-CN/components/confirm",
+            component: () => import("../../docs/zh-CN/components/confirm.md"),
+            meta: { title: "询问" },
+          },
+          {
+            path: "/zh-CN/components/msg",
+            component: () => import("../../docs/zh-CN/components/msg.md"),
+            meta: { title: "信息" },
+          },
+          {
+            path: "/zh-CN/components/backtop",
+            component: () => import("../../docs/zh-CN/components/backtop.md"),
+            meta: { title: "返回顶部" },
+          },
+          {
+            path: "/zh-CN/components/countup",
+            component: () => import("../../docs/zh-CN/components/countup.md"),
+            meta: { title: "数字滚动" },
           },
         ],
       },
       {
-        path: '/zh-CN/hooks',
-        redirect: '/zh-CN/hooks/useStarted',
+        path: "/zh-CN/hooks",
+        redirect: "/zh-CN/hooks/useStarted",
         component: Hooks,
-        meta: { title: 'hooks' },
+        meta: { title: "hooks" },
         children: [
           {
-            path: '/zh-CN/hooks/useStarted',
+            path: "/zh-CN/hooks/useStarted",
+            component: () => import("../../docs/zh-CN/hooks/useStarted.md"),
+            meta: { title: "useStarted" },
+          },
+          {
+            path: "/zh-CN/hooks/useClickOutside",
             component: () =>
-              import('../../docs/zh-CN/hooks/useStarted.md'),
-            meta: { title: 'useStarted' },
+              import("../../docs/zh-CN/hooks/useClickOutside.md"),
+            meta: { title: "useClickOutside" },
           },
           {
-            path: '/zh-CN/hooks/useClickOutside',
-            component: () =>
-              import('../../docs/zh-CN/hooks/useClickOutside.md'),
-            meta: { title: 'useClickOutside' },
+            path: "/zh-CN/hooks/useFullScreen",
+            component: () => import("../../docs/zh-CN/hooks/useFullScreen.md"),
+            meta: { title: "useFullScreen" },
           },
           {
-            path: '/zh-CN/hooks/useFullScreen',
-            component: () => import('../../docs/zh-CN/hooks/useFullScreen.md'),
-            meta: { title: 'useFullScreen' },
+            path: "/zh-CN/hooks/useMove",
+            component: () => import("../../docs/zh-CN/hooks/useMove.md"),
+            meta: { title: "useMove" },
           },
           {
-            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/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' },
+            path: "/zh-CN/hooks/useBoolean",
+            component: () => import("../../docs/zh-CN/hooks/useBoolean.md"),
+            meta: { title: "useBoolean" },
           },
         ],
       },
     ],
   },
-]
+];
 
-export default zhCN
\ No newline at end of file
+export default zhCN;

From abf4b76c3078578cf9237c265a561cb552f01c9b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=B0=B1=E7=9C=A0=E5=84=80=E5=BC=8F?= <854085467@qq.com>
Date: Tue, 4 Jan 2022 22:32:48 +0800
Subject: [PATCH 27/29] =?UTF-8?q?=E4=BF=AE=E5=A4=8D=20menu=20=E5=AF=BC?=
 =?UTF-8?q?=E8=88=AA=E6=A8=A1=E5=BC=8F=E4=B8=8B=E7=9A=84=20more=20?=
 =?UTF-8?q?=E5=8A=A8=E7=94=BB?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 example/docs/zh-CN/components/modal.md    |  2 +-
 example/docs/zh-CN/components/timeline.md | 46 ++++++++++++++++++++++-
 src/module/menuItem/index.vue             |  2 +-
 src/module/timelineItem/index.vue         |  9 ++++-
 4 files changed, 54 insertions(+), 5 deletions(-)

diff --git a/example/docs/zh-CN/components/modal.md b/example/docs/zh-CN/components/modal.md
index bc93ea2b..49e73f39 100644
--- a/example/docs/zh-CN/components/modal.md
+++ b/example/docs/zh-CN/components/modal.md
@@ -319,7 +319,7 @@ export default {
 ::: table
 
 | 备注            | 描述          | 默认值                     |
-| --------------- | ------------- | -------------------------- |
+| --------------- | ------------- | --------------------------|
 | title           | 标题          | --                         |
 | move            | 允许拖拽      | `false`                    |
 | maxmin          | 最小化 最大化 | `false`                    |
diff --git a/example/docs/zh-CN/components/timeline.md b/example/docs/zh-CN/components/timeline.md
index 9641fcb3..f52cb769 100644
--- a/example/docs/zh-CN/components/timeline.md
+++ b/example/docs/zh-CN/components/timeline.md
@@ -75,7 +75,40 @@ export default {
 
 :::
 
-::: title timeline-item attributes
+
+::: title 节点插槽
+:::
+
+::: demo
+
+<template>
+    <lay-timeline>
+        <lay-timeline-item title="2021年，layui vue 里程碑版本 1.0 发布" simple></lay-timeline-item>
+        <lay-timeline-item title="2017年，layui 里程碑版本 2.0 发布" simple></lay-timeline-item>
+        <lay-timeline-item title="2016年，layui 首个版本发布" simple></lay-timeline-item>
+        <lay-timeline-item title="2015年，layui 孵化" simple>
+            <template #dot>
+                <lay-icon type="layui-icon-face-smile" color="red"></lay-icon>
+            </template>
+        </lay-timeline-item>
+    </lay-timeline>
+</template>
+
+<script>
+import { ref } from 'vue'
+
+export default {
+  setup() {
+
+    return {
+    }
+  }
+}
+</script>
+
+:::
+
+::: title Timeline Item 属性
 :::
 
 ::: table
@@ -87,5 +120,16 @@ export default {
 
 :::
 
+::: title Timeline Item 属性
+:::
+
+::: table
+
+|        |          |     |
+| ------ | -------- | --- |
+| dot | 节点 | --  |
+
+:::
+
 ::: comment
 :::
\ No newline at end of file
diff --git a/src/module/menuItem/index.vue b/src/module/menuItem/index.vue
index 2bcb0e41..3965432e 100644
--- a/src/module/menuItem/index.vue
+++ b/src/module/menuItem/index.vue
@@ -6,7 +6,7 @@
   >
     <a href="javascript:void(0)" @click="openHandle">
       {{ title }}
-      <i class="layui-icon layui-icon-down layui-nav-more"></i>
+      <i :class="[openKeys.includes(id) && !isTree ? 'layui-nav-mored' : '']" class="layui-icon layui-icon-down layui-nav-more"></i>
     </a>
     <dl
       class="layui-nav-child"
diff --git a/src/module/timelineItem/index.vue b/src/module/timelineItem/index.vue
index 7ecc8f37..79f76802 100644
--- a/src/module/timelineItem/index.vue
+++ b/src/module/timelineItem/index.vue
@@ -1,6 +1,9 @@
 <template>
   <li class="layui-timeline-item">
-    <i class="layui-icon layui-timeline-axis"></i>
+    <i class="layui-icon layui-timeline-axis" v-if="slot.dot">
+      <slot name="dot"></slot>
+    </i>
+    <i class="layui-icon layui-timeline-axis" v-else></i>
     <div class="layui-timeline-content layui-text">
       <div v-if="simple" class="layui-timeline-title">
         {{ title }}
@@ -20,7 +23,9 @@ export default {
 </script>
 
 <script setup lang="ts">
-import { defineProps } from "vue";
+import { defineProps, useSlots } from "vue";
+
+const slot = useSlots();
 
 export interface LayTimelineItemProps {
   title: string;

From 94af5979cad210f0335e531c4f967277e1afbfb2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=B0=B1=E7=9C=A0=E5=84=80=E5=BC=8F?= <854085467@qq.com>
Date: Tue, 4 Jan 2022 22:46:04 +0800
Subject: [PATCH 28/29] =?UTF-8?q?=E6=9B=B4=E6=96=B0=E6=97=A5=E5=BF=97?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 example/docs/zh-CN/guide/changelog.md | 11 +++++++++++
 1 file changed, 11 insertions(+)

diff --git a/example/docs/zh-CN/guide/changelog.md b/example/docs/zh-CN/guide/changelog.md
index daf62e5b..ae4577dc 100644
--- a/example/docs/zh-CN/guide/changelog.md
+++ b/example/docs/zh-CN/guide/changelog.md
@@ -11,6 +11,17 @@
 <template>
 <lay-timeline>
   <lay-timeline-item title="0.3.x">
+    <ul> 
+      <a name="0-3-3"> </a> 
+      <li> 
+        <h3>0.3.3 <span class="layui-badge-rim">2022-01-03</span></h3> 
+        <ul> 
+          <li>[新增] setup 步骤条组件。</li>
+          <li>[新增] timeline-item 时间线组件 dot 插槽, 支持自定义节点内容。</li>
+          <li>[修复] menu 组件 layui-nav-more 切换动画。</li>
+        </ul> 
+      </li>
+    </ul>
     <ul> 
       <a name="0-3-2"> </a> 
       <li> 

From ead411ca832b17bac83df3d9c0091efad058ab3a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=B0=B1=E7=9C=A0=E5=84=80=E5=BC=8F?= <854085467@qq.com>
Date: Tue, 4 Jan 2022 23:43:15 +0800
Subject: [PATCH 29/29] =?UTF-8?q?=E6=9B=B4=E6=96=B0=E6=88=90=E5=91=98?=
 =?UTF-8?q?=E4=BF=A1=E6=81=AF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 example/docs/zh-CN/guide/member.md | 44 +++++++++++++++---------------
 1 file changed, 22 insertions(+), 22 deletions(-)

diff --git a/example/docs/zh-CN/guide/member.md b/example/docs/zh-CN/guide/member.md
index 7cd1230c..6c30b8b7 100644
--- a/example/docs/zh-CN/guide/member.md
+++ b/example/docs/zh-CN/guide/member.md
@@ -3,13 +3,13 @@
 
 <lay-card>
     <lay-row>
-        <lay-col md="1">
+        <lay-col md="2">
             <lay-avatar src="https://portrait.gitee.com/uploads/avatars/user/1611/4835367_Jmysy_1578975358.png"></lay-avatar>
         </lay-col>
-        <lay-col md="2">
+        <lay-col md="3">
             就眠仪式
         </lay-col>
-        <lay-col md="10">
+        <lay-col md="8">
             焦点：layui-vue
         </lay-col>
         <lay-col md="4">
@@ -22,13 +22,13 @@
 </lay-card>
 <lay-card>
     <lay-row>
-        <lay-col md="1">
+        <lay-col md="2">
             <lay-avatar src="https://portrait.gitee.com/uploads/avatars/user/1755/5267877_jobin_jia_1608578025.png"></lay-avatar>
         </lay-col>
-        <lay-col md="2">
+        <lay-col md="3">
             落小梅
         </lay-col>
-        <lay-col md="10">
+        <lay-col md="8">
             焦点：tree table
         </lay-col>
         <lay-col md="4">
@@ -42,13 +42,13 @@
 
 <lay-card>
     <lay-row>
-        <lay-col md="1">
+        <lay-col md="2">
             <lay-avatar src="https://portrait.gitee.com/uploads/avatars/user/702/2106738_wanglin300_1639442830.png"></lay-avatar>
         </lay-col>
-        <lay-col md="2">
+        <lay-col md="3">
             halo
         </lay-col>
-        <lay-col md="10">
+        <lay-col md="8">
             焦点：slider
         </lay-col>
         <lay-col md="4">
@@ -62,13 +62,13 @@
 
 <lay-card>
     <lay-row>
-        <lay-col md="1">
+        <lay-col md="2">
             <lay-avatar src="https://portrait.gitee.com/uploads/avatars/user/1871/5614379_xumisky_1607057214.png"></lay-avatar>
         </lay-col>
-        <lay-col md="2">
+        <lay-col md="3">
             须弥
         </lay-col>
-        <lay-col md="10">
+        <lay-col md="8">
             焦点：layui-vue
         </lay-col>
         <lay-col md="4">
@@ -82,13 +82,13 @@
 
 <lay-card>
     <lay-row>
-        <lay-col md="1">
+        <lay-col md="2">
             <lay-avatar src="https://portrait.gitee.com/uploads/avatars/user/2469/7407590_wcg666_1640528494.png"></lay-avatar>
         </lay-col>
-        <lay-col md="2">
+        <lay-col md="3">
             Sight
         </lay-col>
-        <lay-col md="10">
+        <lay-col md="8">
             焦点：count-up backtop
         </lay-col>
         <lay-col md="4">
@@ -102,13 +102,13 @@
 
 <lay-card>
     <lay-row>
-        <lay-col md="1">
+        <lay-col md="2">
             <lay-avatar src="https://portrait.gitee.com/uploads/avatars/user/2596/7789823_finalsummer_1613993823.png"></lay-avatar>
         </lay-col>
-        <lay-col md="2">
+        <lay-col md="3">
             finalsummer
         </lay-col>
-        <lay-col md="10">
+        <lay-col md="8">
             焦点：layer-vue
         </lay-col>
         <lay-col md="4">
@@ -122,14 +122,14 @@
 
 <lay-card>
     <lay-row>
-        <lay-col md="1">
+        <lay-col md="2">
             <lay-avatar src="http://mms0.baidu.com/it/u=1690972933,1482111264&fm=253&app=138&f=JPEG&fmt=auto&q=75?w=500&h=500"></lay-avatar>
         </lay-col>
-        <lay-col md="2">
+        <lay-col md="3">
             莫名点
         </lay-col>
-        <lay-col md="10">
-            焦点：skeleton
+        <lay-col md="8">
+            焦点：skeleton setup
         </lay-col>
         <lay-col md="4">
             地点：中国 未知