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 1/2] =?UTF-8?q?feat(docs):1.md=E7=9B=AE=E5=BD=95=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6=202.=E7=94=B1=E4=BA=8Ebody=E5=8F=98=E7=AA=84=EF=BC=8C?=
 =?UTF-8?q?=E4=BF=AE=E6=94=B9md=20table=E5=88=9D=E5=A7=8B=E5=AE=BD?=
 =?UTF-8?q?=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 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 2/2] =?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";
         }
       },
     },