Merge branch 'develop' of https://gitee.com/dingyongya/layui-vue into setup

Conflicts: example/src/router/zh-CN.ts src/index.ts
2022-01-04 18:15:23 +08:00
parent acef2f91b0 726379b3e0
commit b53e16e7a7
27 changed files with 508 additions and 422 deletions
--- 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,41 +33,138 @@
  </aside>
 </template>
 <script setup lang="ts">
-import { computed, ref } from "vue";
+import { computed, onMounted, ref, shallowRef, watch } 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);
+/**折叠动画 */
+let enableAnimation = false;

-const anchorsComput = computed(() => {
-  return typeof anchor === "string" ? anchor?.split(",") : anchor;
+const anchorList = computed(() => {
+  return typeof anchors === "string" ? anchors?.split(",") : anchors;
 });

 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;
+}
+
+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;
+      }
+    }
+  });
+}
+
+const handlerCollapse = () => {
  iconType.value = show.value ? "layui-icon-right" : "layui-icon-left";
+  // @ts-ignore
+  scrollRefEl.value!.firstElementChild!.style.marginRight = show.value
+    ? "180px"
+    : "0px";
+}
+
+watch(show, () => {
+  handlerCollapse();
+});
+
+onMounted(() => {
+  // @ts-ignore TODO 封装 hooks
+  scrollRefEl.value = document.querySelector(".layui-body");
+  if (!scrollRefEl.value) {
+    throw new Error(`scroll element is not existed: ".layui-body"`);
+  }
+  scrollRefEl.value.scrollTop = 0;
+  scrollRefEl.value?.addEventListener("scroll", throttle(handlerScroll, 500));
+  // 如果已折叠,关闭组件初始渲染时的动画,然后自动开启
+  // @ts-ignore
+  show.value = scrollRefEl.value!.firstElementChild!.style.marginRight !== "0px";
+  enableAnimation = show.value;
+});
+
+/**获取滚动高度 */
+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 {
@@ -81,10 +179,16 @@ const handlerBtnClick = () => {
  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;
 }
@@ -102,14 +206,6 @@ const handlerBtnClick = () => {
  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;
@@ -122,15 +218,16 @@ const handlerBtnClick = () => {
    background-color: #f6f6f6 !important;
    color: #5fb878;
  }
-}
-.active {
-  background-color: #f6f6f6 !important;
-  color: #5fb878 !important;
-}
-
-.lay-aside-collapse {
-  right: -180px;
-  opacity: 0.7;
+  &:active {
+    background-color: #f6f6f6 !important;
+    color: #89d89f;
+  }
+  &.active {
+    background-color: #f6f6f6 !important;
+    * {
+      color: #5fb878 !important;
+    }
+  }
 }

 .lay-aside-collapse-btn {
@@ -148,14 +245,20 @@ const handlerBtnClick = () => {
  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;
  }
 }
 .lay-aside-collapse-btn-collapse {
-  right:0px;
+  right: 0px;
+}
+
+.lay-aside-animation {
+  transition: right 200ms;
+  -webkit-transition: right 200ms;
 }

@media screen and (max-width: 768px) {
@@ -171,8 +274,8 @@ const handlerBtnClick = () => {
  .lay-aside-list {
    max-width: 68px;
  }
-  .layui-side-scroll-bar{
+  .layui-side-scroll-bar {
    max-width: 68px;
-  }   
+  }
 }
 </style>
--- 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;
--- 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>
--- 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
--- 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,
--- 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(
--- 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(
      },
    },
  ]
-}
+}
--- 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(
      },
    },
  ]
-}
+}
--- 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(
      },
    },
  ]
-}
+}
--- 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'
        }
      },
    },
  ]
-}
+}
--- 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)
-}
+}
--- a/example/src/router/zh-CN.ts
+++ b/example/src/router/zh-CN.ts
@@ -1,373 +1,362 @@
-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/step",
-            component: () => import("../../docs/zh-CN/components/step.md"),
-            meta: { title: "分步" },
+            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/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",
+            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',
            component: () =>
-              import("../../docs/zh-CN/components/inputNumber.md"),
-            meta: { title: "数字输入框" },
+              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/textarea",
-            component: () => import("../../docs/zh-CN/components/textarea.md"),
-            meta: { title: "文本域" },
+            path: '/zh-CN/components/tooltip',
+            component: () => import('../../docs/zh-CN/components/tooltip.md'),
+            meta: { title: '文字提示' },
          },
          {
-            path: "/zh-CN/components/switch",
-            component: () => import("../../docs/zh-CN/components/switch.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/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/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",
-            component: () => import("../../docs/zh-CN/hooks/useStarted.md"),
-            meta: { title: "useStarted" },
-          },
-          {
-            path: "/zh-CN/hooks/useClickOutside",
+            path: '/zh-CN/hooks/useStarted',
            component: () =>
-              import("../../docs/zh-CN/hooks/useClickOutside.md"),
-            meta: { title: "useClickOutside" },
+              import('../../docs/zh-CN/hooks/useStarted.md'),
+            meta: { title: 'useStarted' },
          },
          {
-            path: "/zh-CN/hooks/useFullScreen",
-            component: () => import("../../docs/zh-CN/hooks/useFullScreen.md"),
-            meta: { title: "useFullScreen" },
+            path: '/zh-CN/hooks/useClickOutside',
+            component: () =>
+              import('../../docs/zh-CN/hooks/useClickOutside.md'),
+            meta: { title: 'useClickOutside' },
          },
          {
-            path: "/zh-CN/hooks/useMove",
-            component: () => import("../../docs/zh-CN/hooks/useMove.md"),
-            meta: { title: "useMove" },
+            path: '/zh-CN/hooks/useFullScreen',
+            component: () => import('../../docs/zh-CN/hooks/useFullScreen.md'),
+            meta: { title: 'useFullScreen' },
          },
          {
-            path: "/zh-CN/hooks/useState",
-            component: () => import("../../docs/zh-CN/hooks/useState.md"),
-            meta: { title: "useState" },
+            path: '/zh-CN/hooks/useMove',
+            component: () => import('../../docs/zh-CN/hooks/useMove.md'),
+            meta: { title: 'useMove' },
+          },          {
+            path: '/zh-CN/hooks/useState',
+            component: () => import('../../docs/zh-CN/hooks/useState.md'),
+            meta: { title: 'useState' },
          },
          {
-            path: "/zh-CN/hooks/useBoolean",
-            component: () => import("../../docs/zh-CN/hooks/useBoolean.md"),
-            meta: { title: "useBoolean" },
+            path: '/zh-CN/hooks/useBoolean',
+            component: () => import('../../docs/zh-CN/hooks/useBoolean.md'),
+            meta: { title: 'useBoolean' },
          },
        ],
      },
    ],
  },
-];
+]

-export default zhCN;
+export default zhCN
--- 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>
--- 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"