From 4d5006d729634af65082b2cdd1c34fb38c9a4f48 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=83=AD=E8=B6=85?= <408493323@qq.com>
Date: Fri, 10 Dec 2021 15:16:06 +0800
Subject: [PATCH 01/22] =?UTF-8?q?fix=20=E6=8C=89=E9=92=AE=E6=96=87?=
 =?UTF-8?q?=E5=AD=97=E5=9E=82=E7=9B=B4=E5=B1=85=E4=B8=AD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/module/button/index.less | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/module/button/index.less b/src/module/button/index.less
index 74be8434..4d7ef9b0 100644
--- a/src/module/button/index.less
+++ b/src/module/button/index.less
@@ -1,6 +1,6 @@
 .layui-btn {
     height: 38px;
-    line-height: 38px;
+    line-height: 36px;
     border: 1px solid transparent;
     padding: 0 18px;
     background-color: #009688;

From 522c8a1a3274ba17d98e56f6ce5535a865d40e02 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: Sat, 11 Dec 2021 00:35:18 +0800
Subject: [PATCH 02/22] hooks module replace ecology

---
 example/docs/zh-CN/components/layer.md |  0
 example/docs/zh-CN/guide/changelog.md  |  3 ++
 example/src/layouts/Layout.vue         |  4 +-
 example/src/router/zh-CN.ts            | 10 +++++
 example/src/view/component.vue         |  6 +++
 example/src/view/ecology.vue           | 58 ++++++++++++++++++++++++++
 example/src/view/index.vue             |  4 +-
 package.json                           |  2 +-
 8 files changed, 82 insertions(+), 5 deletions(-)
 create mode 100644 example/docs/zh-CN/components/layer.md
 create mode 100644 example/src/view/ecology.vue

diff --git a/example/docs/zh-CN/components/layer.md b/example/docs/zh-CN/components/layer.md
new file mode 100644
index 00000000..e69de29b
diff --git a/example/docs/zh-CN/guide/changelog.md b/example/docs/zh-CN/guide/changelog.md
index ece7a912..16c0cff1 100644
--- a/example/docs/zh-CN/guide/changelog.md
+++ b/example/docs/zh-CN/guide/changelog.md
@@ -10,6 +10,9 @@
 ::: demo
 <template>
 <lay-timeline>
+<lay-timeline-item title="0.2.8">
+[完善] rate 评分组件。<br>
+</lay-timeline-item>
 <lay-timeline-item title="0.2.7">
 [完善] rate 评分组件。<br>
 [完善] collapse 手风琴组件。<br>
diff --git a/example/src/layouts/Layout.vue b/example/src/layouts/Layout.vue
index 77f4abf1..69397131 100644
--- a/example/src/layouts/Layout.vue
+++ b/example/src/layouts/Layout.vue
@@ -18,7 +18,7 @@
           <router-link to="/zh-CN/components"> 组件 </router-link>
         </li>
         <li class="layui-nav-item">
-          <router-link to="/zh-CN/hooks"> hooks </router-link>
+          <router-link to="/zh-CN/ecology"> 生态 </router-link>
         </li>
         <li class="layui-nav-item">
           <lay-form>
@@ -43,7 +43,7 @@
           </a>
         </li>
         <li class="layui-nav-item">
-          <a href="javascript:void(0)"> 0.2.7 </a>
+          <a href="javascript:void(0)"> 0.2.8 </a>
         </li>
       </ul>
     </lay-header>
diff --git a/example/src/router/zh-CN.ts b/example/src/router/zh-CN.ts
index f34f94ba..29ef0a6d 100644
--- a/example/src/router/zh-CN.ts
+++ b/example/src/router/zh-CN.ts
@@ -3,6 +3,7 @@ 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 = [
   {
@@ -16,6 +17,11 @@ const zhCN = [
         component: Index,
         meta: { title: '指南' },
       },
+      {
+        path: '/zh-CN/ecology',
+        component: Ecology,
+        meta: { title: '生态' },
+      },
       {
         path: '/zh-CN/guide',
         redirect: '/zh-CN/guide/introduce',
@@ -262,6 +268,10 @@ const zhCN = [
             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/modal',
diff --git a/example/src/view/component.vue b/example/src/view/component.vue
index 168b1c49..8e9e7923 100644
--- a/example/src/view/component.vue
+++ b/example/src/view/component.vue
@@ -332,6 +332,12 @@ export default {
         id: 1,
         title: '反馈',
         children: [
+          {
+            id: 90,
+            title: '简介',
+            subTitle: 'layer',
+            path: '/zh-CN/components/layer',
+          },
           {
             id: 90,
             title: '弹层',
diff --git a/example/src/view/ecology.vue b/example/src/view/ecology.vue
new file mode 100644
index 00000000..f5abd23a
--- /dev/null
+++ b/example/src/view/ecology.vue
@@ -0,0 +1,58 @@
+<template>
+  <div
+    style="margin-top: 60px; height: 100%; width: 80%"
+    class="layui-container"
+  >
+    <blockquote class="layui-elem-quote layui-text" style="margin: 30px 0">
+      尽管 layui 中包含了这些组件，但因为它们受众群体广泛或应用广泛，特从 layui
+      中抽取出来个副本，可独立引用。我们也会对它们进行同步维护。
+    </blockquote>
+    <fieldset class="layui-elem-field layui-field-title">
+      <legend style="margin-bottom: 20px; text-align: center">独立组件</legend>
+      <div class="layui-field-box">
+        <ul class="layui-row layui-col-space6">
+          <li class="layui-col-sm12">
+            <div class="alone">
+              <a href="https://gitee.com/layui-vue/layer-vue" target="_blank"
+                >layer - vue<cite>layer vue is a web elastic layer component</cite></a
+              >
+            </div>
+          </li>
+          <li class="layui-col-sm12">
+            <div class="alone">
+              <a href="https://gitee.com/layui-vue/icons-vue" target="_blank"
+                >icons - vue<cite>the abstract trees of the layui iconfont icons.</cite></a
+              >
+            </div>
+          </li>
+        </ul>
+      </div>
+    </fieldset>
+  </div>
+</template>
+
+<style>
+.alone {
+  text-align: center;
+  background-color: #009688;
+  color: #fff;
+  font-weight: 300;
+  transition: all 0.3s;
+  -webkit-transition: all 0.3s;
+}
+.alone:hover a {
+  color: white !important;
+  background-color: #5fb878;
+}
+.alone a {
+  display: block;
+  padding: 50px 20px;
+  color: #fff;
+  font-size: 30px;
+}
+.alone a cite {
+  display: block;
+  padding-top: 10px;
+  font-size: 14px;
+}
+</style>
\ No newline at end of file
diff --git a/example/src/view/index.vue b/example/src/view/index.vue
index bf75fcc7..f1a09192 100644
--- a/example/src/view/index.vue
+++ b/example/src/view/index.vue
@@ -23,12 +23,12 @@
         <div class="site-download">
           <router-link
             class="layui-inline site-down"
-            to="/zh-CN/guide/getStarted"
+            to="/zh-CN/guide"
             >Get Started</router-link
           >
         </div>
         <div class="site-version">
-          <span>当前版本：v<cite class="site-showv">0.2.7</cite></span>
+          <span>当前版本：v<cite class="site-showv">0.2.8</cite></span>
           <span
             ><router-link
               class="layui-inline site-down"
diff --git a/package.json b/package.json
index 36e4eb24..905b84fa 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@layui/layui-vue",
-  "version": "0.2.7",
+  "version": "0.2.8",
   "description": "a component library for Vue 3 base on layui-vue",
   "homepage": "https://gitee.com/layui-vue/layui-vue/blob/master/README.md",
   "module": "lib/layui-vue.es.js",

From 961eac012793e98b3278a5a821ac1d8adea886ac Mon Sep 17 00:00:00 2001
From: xumi <hmxing1105@163.com>
Date: Sun, 12 Dec 2021 17:39:02 +0800
Subject: [PATCH 03/22] =?UTF-8?q?=E2=9C=A8=20=E6=96=B0=E5=A2=9Einput-numbe?=
 =?UTF-8?q?r(=E6=95=B0=E5=AD=97=E8=BE=93=E5=85=A5=E6=A1=86)=E3=80=81toolti?=
 =?UTF-8?q?p(=E6=96=87=E5=AD=97=E6=8F=90=E7=A4=BA)=E3=80=81=E4=BF=AE?=
 =?UTF-8?q?=E6=94=B9input=E7=BB=84=E4=BB=B6=E5=8F=AF=E6=8E=A5=E5=8F=97numb?=
 =?UTF-8?q?er=E7=B1=BB=E5=9E=8B=E5=80=BC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 example/docs/zh-CN/components/inputNumber.md | 139 ++++++++++++++++++
 example/docs/zh-CN/components/tooltip.md     |  75 ++++++++++
 example/src/layouts/Layout.vue               |  11 ++
 example/src/router/zh-CN.ts                  |  10 ++
 example/src/view/component.vue               |  12 ++
 src/index.ts                                 |   4 +
 src/module/input/index.vue                   |   3 +-
 src/module/inputNumber/index.less            | 120 ++++++++++++++++
 src/module/inputNumber/index.ts              |   9 ++
 src/module/inputNumber/index.vue             | 144 +++++++++++++++++++
 src/module/popper/calcPosition.ts            |  50 +++++++
 src/module/popper/index.less                 | 100 +++++++++++++
 src/module/popper/index.vue                  |  89 ++++++++++++
 src/module/popper/usePopper.ts               |  26 ++++
 src/module/tooltip/index.ts                  |   9 ++
 src/module/tooltip/index.vue                 |  30 ++++
 src/tools/domUtil.js                         |  27 ++++
 17 files changed, 857 insertions(+), 1 deletion(-)
 create mode 100644 example/docs/zh-CN/components/inputNumber.md
 create mode 100644 example/docs/zh-CN/components/tooltip.md
 create mode 100644 src/module/inputNumber/index.less
 create mode 100644 src/module/inputNumber/index.ts
 create mode 100644 src/module/inputNumber/index.vue
 create mode 100644 src/module/popper/calcPosition.ts
 create mode 100644 src/module/popper/index.less
 create mode 100644 src/module/popper/index.vue
 create mode 100644 src/module/popper/usePopper.ts
 create mode 100644 src/module/tooltip/index.ts
 create mode 100644 src/module/tooltip/index.vue
 create mode 100644 src/tools/domUtil.js

diff --git a/example/docs/zh-CN/components/inputNumber.md b/example/docs/zh-CN/components/inputNumber.md
new file mode 100644
index 00000000..c19c1cca
--- /dev/null
+++ b/example/docs/zh-CN/components/inputNumber.md
@@ -0,0 +1,139 @@
+::: title 基础使用
+:::
+
+::: demo
+
+<template>
+  <lay-input-number v-model="data"></lay-input-number>
+  <lay-input-number v-model="data2"  position="right"></lay-input-number>
+</template>
+
+<script>
+  import { ref } from 'vue';
+  const data = ref(0);
+  const data2 = ref(0);
+  export default {
+    setup() {
+      return {
+        data,
+        data2,
+      }
+    }
+  }
+</script>
+
+:::
+
+::: title 尺寸
+:::
+
+::: demo
+
+<template>
+  <div>
+    <div>
+      <lay-input-number></lay-input-number>
+      <lay-input-number size="md"></lay-input-number>
+      <lay-input-number size="sm"></lay-input-number>
+      <lay-input-number size="xs"></lay-input-number>
+    </div>
+    <div>
+      <lay-input-number position="right"></lay-input-number>
+      <lay-input-number position="right" size="md"></lay-input-number>
+      <lay-input-number position="right" size="sm"></lay-input-number>
+      <lay-input-number position="right" size="xs"></lay-input-number>
+    </div>
+  </div>
+</template>
+
+<script>
+</script>
+
+:::
+
+::: title 限制数字大小
+:::
+
+::: demo
+
+<template>
+  <lay-input-number :min="0" :max="10"></lay-input-number>
+</template>
+
+<script>
+</script>
+
+:::
+
+::: title 数字步数
+:::
+
+::: demo
+
+<template>
+  <lay-input-number :step="10"></lay-input-number>
+</template>
+
+<script>
+</script>
+
+:::
+
+::: title 禁用
+:::
+
+::: demo
+
+<template>
+  <p>禁用输入</p>
+  <lay-input-number v-model="data" disabled-input></lay-input-number>
+  <p>全部禁用</p>
+  <lay-input-number v-model="data2" disabled></lay-input-number>
+</template>
+
+<script>
+  import { ref } from 'vue';
+  const data = ref(10);
+  const data2 = ref(25);
+  export default {
+    setup() {
+      return {
+        data,
+        data2
+      }
+    }
+  }
+</script>
+
+:::
+
+
+::: title input-number属性
+:::
+
+::: table
+
+| 属性     | 描述           | 类型 | 默认值 |
+| -------- | ------------- | ------ | ------ |
+| v-model  | 值            | `number` | 0     |
+| name     | 原生属性`name` | `number` | 5     |
+| disabledInput | 禁用输入框输入 | `boolean` | false     |
+| disabled | 禁用操作 | `boolean` | false     |
+| step     | 数字增减的步数 | `number` | 1     |
+| position     | 控制按钮显示位置, 目前除了默认值，只有`right`可填 | `string` | --     |
+| min     | 最小可输入的数 | `number` | --     |
+| max     | 最大可输入的数 | `number` | --     |
+| size     | 尺寸, 可选值`md` / `sm` / `xs`| `string` | 默认为最大尺寸   |
+
+:::
+
+::: title 事件
+:::
+
+::: table
+
+| 属性     | 描述      | 回调参数 |
+| -------- | -------- | ------ |
+| change  | 值更改触发事件   | (value: number) |
+
+:::
diff --git a/example/docs/zh-CN/components/tooltip.md b/example/docs/zh-CN/components/tooltip.md
new file mode 100644
index 00000000..c067e82f
--- /dev/null
+++ b/example/docs/zh-CN/components/tooltip.md
@@ -0,0 +1,75 @@
+::: title 基础使用
+:::
+
+::: demo
+
+<template>
+  <lay-tooltip content="假装这里有文字提示">
+    <lay-button>tooltip</lay-button>
+  </lay-tooltip>
+</template>
+
+<style>
+</style>
+:::
+
+::: title 显示位置
+:::
+
+::: demo
+
+<template>
+  <div style="padding: 100px;max-width:400px;">
+    <div style="text-align: center;">
+      <lay-tooltip content="假装这里有文字提示">
+        <lay-button>上边</lay-button>
+      </lay-tooltip>
+    </div>
+    <div>
+      <lay-tooltip content="假装这里有文字提示假装这里有文字提示假装这里有文字提示假装这里有文字提示假装这里有文字提示" position="left">
+        <lay-button style="float:left;">左边</lay-button>
+      </lay-tooltip>
+      <lay-tooltip content="假装这里有文字提示假装这里有文字提示假装这里有文字提示假装这里有文字提示假装这里有文字提示" position="right">
+        <lay-button style="float:right;">右边</lay-button>
+      </lay-tooltip>
+      <div style="clear: both;"></div>
+    </div>
+    <div style="text-align: center;">
+      <lay-tooltip content="假装这里有文字提示假装这里有文字提示假装这里有文字提示假装这里有文字提示" position="bottom">
+        <lay-button>下边</lay-button>
+      </lay-tooltip>
+    </div>
+  </div>
+</template>
+
+<style>
+</style>
+:::
+
+::: title 浅色主题
+:::
+
+::: demo
+
+<template>
+  <lay-tooltip content="假装这里有文字提示" :is-dark="false">
+    <lay-button>tooltip</lay-button>
+  </lay-tooltip>
+</template>
+
+<style>
+</style>
+:::
+
+::: title tooltip属性
+:::
+
+::: table
+
+| 属性        | 描述     | 可选值         |
+| ----------- | -------- | -------------- |
+| content     | 显示内容 | --             |
+| position    | 显示位置 | `top`(默认值)、`bottom`、`left`、`right` |
+| isDark      | 是否为黑色主题 | `true`(默认值)、`false`(浅色)   |
+
+:::
diff --git a/example/src/layouts/Layout.vue b/example/src/layouts/Layout.vue
index 69397131..8fe5d80a 100644
--- a/example/src/layouts/Layout.vue
+++ b/example/src/layouts/Layout.vue
@@ -280,6 +280,12 @@ export default {
         title: '输入框',
         subTitle: 'input',
         path: '/zh-CN/components/input',
+      }, 
+      {
+        id: 341,
+        title: '数字输入框',
+        subTitle: 'inputNumber',
+        path: '/zh-CN/components/inputNumber',
       },
       {
         id: 35,
@@ -316,6 +322,11 @@ export default {
         title: '颜色选择器',
         subTitle: 'colorPicker',
         path: '/zh-CN/components/colorPicker',
+      }, {
+        id: 41,
+        title: '文字提示',
+        subTitle: 'tooltip',
+        path: '/zh-CN/components/tooltip',
       },
     ]
 
diff --git a/example/src/router/zh-CN.ts b/example/src/router/zh-CN.ts
index 29ef0a6d..11c89fe2 100644
--- a/example/src/router/zh-CN.ts
+++ b/example/src/router/zh-CN.ts
@@ -238,6 +238,11 @@ const zhCN = [
             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'),
@@ -273,6 +278,11 @@ const zhCN = [
             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'),
diff --git a/example/src/view/component.vue b/example/src/view/component.vue
index 8e9e7923..bd5e7fef 100644
--- a/example/src/view/component.vue
+++ b/example/src/view/component.vue
@@ -188,6 +188,12 @@ export default {
             subTitle: 'input',
             path: '/zh-CN/components/input',
           },
+          {
+            id: 341,
+            title: '数字输入框',
+            subTitle: 'inputNumber',
+            path: '/zh-CN/components/inputNumber',
+          },
           {
             id: 35,
             title: '文本域',
@@ -326,6 +332,12 @@ export default {
             subTitle: 'field',
             path: '/zh-CN/components/field',
           },
+          {
+            id: 25,
+            title: '文字提示',
+            subTitle: 'tooltip',
+            path: '/zh-CN/components/tooltip',
+          },
         ],
       },
       {
diff --git a/src/index.ts b/src/index.ts
index 3e266429..ac62fc12 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -64,6 +64,8 @@ import LaySlider from './module/slider/index'
 import LayCarousel from './module/carousel/index'
 import LayCarouselItem from './module/carouselItem/index'
 import LayColorPicker from './module/colorPicker/index'
+import LayTooltip from './module/tooltip/index'
+import LayInputNumber from './module/inputNumber/index'
 
 const components: Record<string, IDefineComponent> = {
   LayRadio,
@@ -123,6 +125,8 @@ const components: Record<string, IDefineComponent> = {
   LayCarouselItem,
   LayColorPicker,
   LayModal,
+  LayTooltip,
+  LayInputNumber,
 }
 
 const install = (app: App, options?: InstallOptions): void => {
diff --git a/src/module/input/index.vue b/src/module/input/index.vue
index ca987567..381b9a7e 100644
--- a/src/module/input/index.vue
+++ b/src/module/input/index.vue
@@ -20,7 +20,7 @@ export interface LayInputProps {
   name?: string;
   type?: string;
   disabled?: boolean;
-  modelValue?: string;
+  modelValue?: string | number;
   placeholder?: string;
 }
 
@@ -41,4 +41,5 @@ const onFocus = function (event: FocusEvent) {
 const onBlur = function () {
   emit("blur");
 };
+
 </script>
diff --git a/src/module/inputNumber/index.less b/src/module/inputNumber/index.less
new file mode 100644
index 00000000..161090b9
--- /dev/null
+++ b/src/module/inputNumber/index.less
@@ -0,0 +1,120 @@
+@border-color: #cacaca;
+@hover-border-color: #1E9FFF;
+@lg: 40px;
+@lg-wdith: 200px;
+@lg-right: 20px;
+@md: 32px;
+@md-wdith: 160px;
+@md-right: 16px;
+@sm: 28px;
+@sm-wdith: 140px;
+@sm-right: 14px;
+@xs: 24px;
+@xs-wdith: 120px;
+@xs-right: 12px;
+
+.set-size(@width, @size, @right-size){
+  &{
+    height: @size;
+    width: @width;
+    .layui-input{
+      height: @size;
+      line-height: @size;
+      padding: 0 @size;
+    }
+    .layui-control-btn {
+      width: @size;
+      height: @size;
+      line-height: @size;
+    }
+    &[position=right]{
+      .layui-input{
+        padding: 0 @size 0 0;
+      }
+      .layui-control-btn {
+        height: @right-size;
+        line-height: @right-size;
+      }
+      .layui-subtraction-btn{
+        top: @right-size - 1;
+      }
+    }
+  }
+}
+
+.layui-input-number{
+  position: relative;
+  display: inline-block;
+  box-sizing: border-box;
+  border: 1px solid @border-color;
+  border-color: @border-color;
+  border-radius: 3px;
+  overflow: hidden;
+  .set-size(@lg-wdith, @lg, @lg-right);
+  margin-left: 5px;
+  &:hover {
+    border-color: @hover-border-color;
+  }
+  .layui-input{
+    text-align: center;
+    border: 0;
+  }
+  .layui-control-btn {
+    position: absolute;
+    box-sizing: border-box;
+    border: 0;
+    border-color: @border-color;
+    border-style: solid;
+    border-radius: 0;
+    padding: 0;
+    text-align: center;
+    top: 0;
+    &:hover{
+      color: @hover-border-color;
+    }
+    &.layui-subtraction-btn{
+      border-right-width: 1px;
+    }
+    &.layui-addition-btn{
+      border-left-width: 1px;
+      right: 0;
+    }
+    .layui-icon{
+      padding: 0px;
+    }
+  }
+  /* 谷歌--去掉自带的控制按钮 */
+  input.layui-input::-webkit-outer-spin-button,
+  input.layui-input::-webkit-inner-spin-button {
+    -webkit-appearance: none;
+  }
+
+  /* 火狐--去掉自带的控制按钮 */
+  input.layui-input[type="number"]{
+    -moz-appearance: textfield;
+  }
+
+  &[position=right]{
+    .layui-subtraction-btn{
+      right: 0;
+      border-right-width: 0px;
+      border-left-width: 1px;
+    }
+    .layui-addition-btn{
+      border-bottom-width: 1px;
+    }
+  }
+
+  &[size=md] {
+    .set-size(@md-wdith,@md, @md-right)
+  }
+
+  &[size=sm] {
+    .set-size(@sm-wdith, @sm, @sm-right)
+  }
+
+  &[size=xs] {
+    .set-size(@xs-wdith, @xs, @xs-right)
+  }
+
+}
\ No newline at end of file
diff --git a/src/module/inputNumber/index.ts b/src/module/inputNumber/index.ts
new file mode 100644
index 00000000..4ad6c2ef
--- /dev/null
+++ b/src/module/inputNumber/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 || 'LayInputNumber', Component)
+}
+
+export default Component as IDefineComponent
diff --git a/src/module/inputNumber/index.vue b/src/module/inputNumber/index.vue
new file mode 100644
index 00000000..c4952d36
--- /dev/null
+++ b/src/module/inputNumber/index.vue
@@ -0,0 +1,144 @@
+<template>
+  <div class="layui-input-number" :position="position" :size="size">
+    <lay-button
+      type="primary"
+      size="gl"
+      @mousedown="longDown(subtraction)"
+      @mouseup="cancelLongDown"
+      @blur="cancelLongDown"
+      :disabled="minControl"
+      class="layui-control-btn layui-subtraction-btn"
+    >
+      <lay-icon :type="position==='right' ? 'layui-icon-down' : 'layui-icon-subtraction'"></lay-icon>
+    </lay-button>
+    <div class="layui-input-number-input">
+      <lay-input
+        v-model="num"
+        :readonly="disabledInput || disabled"
+        type="number"
+        :name="name"
+        @change="inputChange"
+      ></lay-input>
+    </div>
+    <lay-button
+      type="primary"
+      size="gl"
+      @mousedown="longDown(addition)"
+      @mouseup="cancelLongDown"
+      @blur="cancelLongDown"
+      :disabled="maxControl"
+      class="layui-control-btn layui-addition-btn"
+    >
+      <lay-icon :type="position==='right' ? 'layui-icon-up' : 'layui-icon-addition'"></lay-icon>
+    </lay-button>
+  </div>
+</template>
+
+<script lang="ts">
+  export default {
+    name: "LayInputNumber",
+  };
+</script>
+
+<script setup lang="ts">
+import layButton from "../button/index";
+import layIcon from "../icon/index";
+import layInput from "../input/index";
+import "./index.less";
+import {
+  defineProps,
+  defineEmits,
+  ref,
+  watch,
+  withDefaults,
+  computed,
+} from "vue";
+
+export interface LayInputNumberProps {
+  modelValue?: number;
+  name?: string;
+  disabled?: boolean;
+  disabledInput?: boolean;
+  step?: number;
+  position?: "right";
+  min?: number;
+  max?: number;
+  size?: "md" | "sm" | "xs";
+}
+
+const props = withDefaults(defineProps<LayInputNumberProps>(), {
+  disabled: false,
+  disabledInput: false,
+  modelValue: 0,
+  step: 1,
+  min: -Infinity,
+  max: Infinity,
+});
+
+const emit = defineEmits(["update:modelValue", "change"]);
+
+let num = ref(props.modelValue);
+watch(num, (val) => {
+  if (props.max !== Infinity && val > props.max) {
+    num.value = props.max;
+    return;
+  }
+  if (props.min !== -Infinity && val < props.min) {
+    num.value = props.min;
+    return;
+  }
+  if (isNumber(num.value)) {
+    tempValue.value = Number(num.value);
+    emit("update:modelValue", tempValue.value);
+    emit("change", tempValue.value);
+  }
+});
+
+watch(()=>props.modelValue, (val) => {
+  if (val !== num.value) {
+    num.value = props.modelValue;
+  }
+});
+const tempValue = ref(0);
+let timer: any = 0;
+
+const minControl = computed(
+  () => props.min !== -Infinity && Number(props.min) >= num.value
+);
+const maxControl = computed(
+  () => props.max !== Infinity && Number(props.max) <= num.value
+);
+
+const addition = function () {
+  num.value += Number(props.step);
+};
+
+const subtraction = function () {
+  num.value -= Number(props.step);
+};
+
+const longDown = function (fn: Function) {
+  cancelLongDown();
+  if (props.disabled) {
+    return;
+  }
+  timer = setInterval(() => fn.call(timer), 100);
+  fn.call(timer);
+};
+
+const cancelLongDown = function () {
+  clearInterval(timer);
+};
+
+const inputChange = function () {
+  if (isNumber(num.value)) {
+    tempValue.value = Number(num.value);
+    return;
+  }
+  num.value = tempValue.value;
+};
+
+const isNumber = function (num: any) {
+  return /^\d+(\.\d+)?$/.test(num);
+};
+</script>
diff --git a/src/module/popper/calcPosition.ts b/src/module/popper/calcPosition.ts
new file mode 100644
index 00000000..e6cebc22
--- /dev/null
+++ b/src/module/popper/calcPosition.ts
@@ -0,0 +1,50 @@
+import { Ref } from "vue";
+// 计算各个方向位置
+const postionFns: any = {
+    top(el: HTMLElement, popper: HTMLElement, innnerPosition: Ref, called: boolean) {
+        let {top, left, bottom} = el.getBoundingClientRect()
+        if ((top = top - popper.offsetHeight - 6) < 0 && bottom > popper.offsetHeight) {
+            innnerPosition.value = 'bottom';
+            top = bottom;
+        }
+        return {
+            top: `${top}px`,
+            left: `${left - (popper.offsetWidth - el.offsetWidth) / 2}px`
+        }
+    },
+    bottom(el: HTMLElement, popper: HTMLElement, innnerPosition: Ref, called: boolean) {
+        let { top, left, bottom } = el.getBoundingClientRect()
+        if (window.innerHeight - bottom < popper.offsetHeight + 6) {
+            innnerPosition.value = 'top';
+            bottom = top - popper.offsetHeight - 6;
+        }
+        return {
+            top: `${bottom}px`,
+            left: `${left - (popper.offsetWidth - el.offsetWidth) / 2}px`
+        }
+    },
+    left(el: HTMLElement, popper: HTMLElement, innnerPosition: Ref, called : boolean) {
+        let {top, left, right} = el.getBoundingClientRect()
+        left = left - popper.offsetWidth - 6;
+        if (left < 0) {
+            innnerPosition.value = 'right';
+            left = right;
+        }
+        return {
+            top: `${top - Math.abs(popper.offsetHeight - el.offsetHeight) / 2}px`,
+            left: `${left}px`
+        }
+    },
+    right(el: HTMLElement, popper: HTMLElement, innnerPosition: Ref, called: boolean) {
+        let { top, left, right } = el.getBoundingClientRect()
+        if (window.innerWidth < right + popper.offsetWidth + 6) {
+            innnerPosition.value = 'left';
+            right = left - popper.offsetWidth - 6;
+        }
+        return {
+            top: `${top - Math.abs(popper.offsetHeight - el.offsetHeight) / 2}px`,
+            left: `${right}px`
+        }
+    }
+}
+export default postionFns;
\ No newline at end of file
diff --git a/src/module/popper/index.less b/src/module/popper/index.less
new file mode 100644
index 00000000..be53e2f7
--- /dev/null
+++ b/src/module/popper/index.less
@@ -0,0 +1,100 @@
+// 主题颜色
+// 浅色 --> 默认使用
+@ligh-background: #FFF;
+@ligh-color: #3a3a3a;
+
+// 深色
+@dark-background: #353535;
+@dark-color: #FFF;
+
+@border-clor: #cecece;
+
+// 单一设置主题
+.single-theme(@position, @contrary_position, @margin_postion, @color) {
+    @attr : ~'[position=@{position}]';
+    &.layui-popper@{attr}{
+        margin-@{contrary_position}: 6px;
+        .layui-popper-arrow {
+            @{contrary_position}: -6px;
+            border-@{contrary_position}-width: 0;
+            border-@{position}-color: @border-clor;
+            &::after{
+                @{contrary_position}: 1px;
+                border-@{contrary_position}-width: 0;
+                margin-@{margin_postion}: -6px;
+                border-@{position}-color: @color; 
+            }
+        }
+    }
+}
+// 统一设置四个方向的主题
+.theme(@background-color, @color) {
+    background-color: @background-color;
+    color: @color;
+    .single-theme(top, bottom, left, @background-color);
+    .single-theme(bottom, top, left, @background-color);
+    .single-theme(right, left, top, @background-color);
+    .single-theme(left, right, top, @background-color);
+}
+
+// 箭头默认居中
+.arrow-default-center(@position, @prop) {
+    @attr : ~'[position=@{position}]';
+    &.layui-popper@{attr} {
+        .layui-popper-arrow{
+            @{prop}: -moz-calc(50% - 6px);
+            @{prop}: -webkit-calc(50% - 6px);
+            @{prop}: calc(50% - 6px);
+        }
+    }
+}
+.all-arrow-default-center() {
+    .arrow-default-center(top, left);
+    .arrow-default-center(bottom, left);
+    .arrow-default-center(left, top);
+    .arrow-default-center(right, top);
+}
+
+// 样式开始
+.layui-popper {
+    position: fixed;
+    padding: 10px;
+    border-radius: 3px;
+    word-wrap: break-word;
+    min-width: 12px;
+    min-height: 12px;
+    font-size: 14px;
+    box-sizing: border-box;
+    border: 1px solid @border-clor;
+    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.15);
+    .theme(@ligh-background, @ligh-color);
+    max-width: 300px;
+    z-index: 9999;
+
+    // 箭头默认居中
+    .all-arrow-default-center();
+
+    .layui-popper-arrow {
+        &,&::after{
+             position: absolute;
+            display: block;
+            width: 0;
+            height: 0;
+            border-width: 6px;
+            border-style: solid;
+            border-color: transparent;
+        }
+
+        &::after{
+            content: ' ';
+        }
+
+    }
+
+    /* 深色主题 */
+    &.layui-dark {
+        .theme(@dark-background, @dark-color);
+        border: 0;
+    }
+
+}
\ No newline at end of file
diff --git a/src/module/popper/index.vue b/src/module/popper/index.vue
new file mode 100644
index 00000000..8351d981
--- /dev/null
+++ b/src/module/popper/index.vue
@@ -0,0 +1,89 @@
+<template>
+    <transition v-show="visible">
+        <div :class="['layui-popper', {'layui-dark' : isDark}]" :style="style" :position="innnerPosition">
+            <slot>{{content}}</slot>
+            <div class="layui-popper-arrow"></div>
+        </div>
+    </transition>
+</template>
+<script lang="ts">
+    const NAME = "LayPopper";
+    export default {
+        name: NAME
+    }
+</script>
+
+<script setup lang="ts">
+    import "./index.less";
+    import postionFns from "./calcPosition";
+    import { getCurrentInstance, CSSProperties, ref, watch, onUpdated, defineEmits, onMounted} from "vue";
+    import {on} from "../../tools/domUtil";
+    const props = withDefaults(
+        defineProps<{
+            el : any,
+            content ?: string,
+            position ?: string,
+            trigger ?: string,
+            enterable ?: boolean,
+            isDark ?: boolean,
+            modelValue ?: boolean
+        }>(),
+        {
+            position : 'top',
+            enterable : true,
+            isDark : false,
+            trigger : 'hover',
+            modelValue : true
+        }
+    );
+
+    const EVENT_MAP : any = {
+        'hover' : ['mouseenter', null, 'mouseleave', false],
+        'click' : ['click', document, 'click', true]
+    }
+
+    const triggerArr = EVENT_MAP[props.trigger];
+    if (!triggerArr) {
+        console.error(`${NAME} render error!cause: 'Trigger' must be 'hover/click' `)
+    }
+
+    const style = ref<CSSProperties>({top: (-window.innerHeight) + 'px',left:0});
+    const visible = ref(props.modelValue);
+    const checkTarget = ref(false);
+    const popper = ref();
+    const innnerPosition = ref(props.position);
+
+    const emit = defineEmits(['update:modelValue'])
+    watch(visible, (val)=>{
+        emit('update:modelValue', val);
+    })
+
+    const doShow = function(){
+        visible.value = true;
+    }
+
+    const doHidden = function(e : MouseEvent){
+        if ((checkTarget.value && props.el.contains(e.target)) || (props.enterable && popper.value.contains(e.target))) return;
+        style.value = {top: (-window.innerHeight) + 'px',left:0};
+        visible.value = false;
+        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[props.position] && (style.value = postionFns[props.position](props.el, popper.value, innnerPosition));
+    }
+
+    // 节点变化, 获取当前实例对应的dom, 如果为显示状态，则计算位置显示
+    const nodeChange = function(){
+        popper.value = getCurrentInstance()?.vnode.el;
+        visible.value && (popper.value.offsetWidth === 0 ? setTimeout(showPosistion, 0) : showPosistion());
+    }
+    onMounted(nodeChange)
+    onUpdated(nodeChange)
+</script>
\ No newline at end of file
diff --git a/src/module/popper/usePopper.ts b/src/module/popper/usePopper.ts
new file mode 100644
index 00000000..515ab485
--- /dev/null
+++ b/src/module/popper/usePopper.ts
@@ -0,0 +1,26 @@
+import { h, render} 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], () => {
+            const _props = {...props};
+            _props.el = el;
+            _this.renderPopper(_props);
+        })
+    },
+    renderPopper(props: any) {
+        const container: HTMLDivElement = document.createElement("div");
+        // container.setAttribute("class", "lay-div");
+        const node = h(popper, props);
+        render(h(popper, props), container);
+        container.firstElementChild && document.body.appendChild(container.firstElementChild);
+        return node;
+    }
+} 
+export default usePopper;
\ No newline at end of file
diff --git a/src/module/tooltip/index.ts b/src/module/tooltip/index.ts
new file mode 100644
index 00000000..82ddc5d6
--- /dev/null
+++ b/src/module/tooltip/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 || 'LayTooltip', Component)
+}
+
+export default Component as IDefineComponent
\ No newline at end of file
diff --git a/src/module/tooltip/index.vue b/src/module/tooltip/index.vue
new file mode 100644
index 00000000..cc422212
--- /dev/null
+++ b/src/module/tooltip/index.vue
@@ -0,0 +1,30 @@
+<script lang="ts">
+import usePopper from "../popper/usePopper";
+import { defineComponent} from "vue";
+export default defineComponent({
+  name: "LayTooltip",
+  props: {
+    content: {
+      type: String,
+      required: true,
+    },
+    position: {
+      type: String,
+      default: "top",
+    },
+    isDark: {
+      type: Boolean,
+      default: true,
+    }
+  },
+  render() {
+    return this.$slots.default && this.$slots.default()[0];
+  },
+  mounted() {
+    const _this = this;
+    this.$nextTick(() => {
+      usePopper.createPopper(_this.$el, _this.$props, "hover");
+    });
+  },
+});
+</script>
diff --git a/src/tools/domUtil.js b/src/tools/domUtil.js
new file mode 100644
index 00000000..1895887a
--- /dev/null
+++ b/src/tools/domUtil.js
@@ -0,0 +1,27 @@
+// 获取标签与窗口顶边距离
+export function getTop(elem) {
+    return elem.offsetTop + (elem.offsetParent && getTop(elem.offsetParent) || 0);
+}
+
+// 获取标签与窗口左边距离
+export function getLeft(elem) {
+    return elem.offsetLeft + (elem.offsetParent && getLeft(elem.offsetParent) || 0);
+}
+
+// 事件绑定
+export function on(elem, events, handler) {
+    [].concat(events).forEach(event => elem.addEventListener(event, handler, false));
+}
+
+export function once (elem, events, handler) {
+    const listener = function (_this, args) {
+        handler.apply(_this, args)
+        off(elem, events, listener);
+    }
+    on(elem, events, listener)
+}
+
+// 事件解除
+export function off(elem, events, handler) {
+    [].concat(events).forEach(event => elem.removeEventListener(event, handler, false));
+}
\ No newline at end of file

From 753658ea931c416ac77446d32eb1f85927d2e901 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, 12 Dec 2021 18:55:04 +0800
Subject: [PATCH 04/22] =?UTF-8?q?=E5=8D=87=E7=BA=A7=20layer=201.1.3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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

diff --git a/example/src/view/ecology.vue b/example/src/view/ecology.vue
index f5abd23a..a6c25814 100644
--- a/example/src/view/ecology.vue
+++ b/example/src/view/ecology.vue
@@ -14,14 +14,14 @@
           <li class="layui-col-sm12">
             <div class="alone">
               <a href="https://gitee.com/layui-vue/layer-vue" target="_blank"
-                >layer - vue<cite>layer vue is a web elastic layer component</cite></a
+                >layer - vue<cite>通用型弹出层组件</cite></a
               >
             </div>
           </li>
           <li class="layui-col-sm12">
             <div class="alone">
               <a href="https://gitee.com/layui-vue/icons-vue" target="_blank"
-                >icons - vue<cite>the abstract trees of the layui iconfont icons.</cite></a
+                >icons - vue<cite>图标组件化解决方案</cite></a
               >
             </div>
           </li>
@@ -54,5 +54,6 @@
   display: block;
   padding-top: 10px;
   font-size: 14px;
+  letter-spacing:2px;
 }
 </style>
\ No newline at end of file
diff --git a/package.json b/package.json
index 905b84fa..44d18c21 100644
--- a/package.json
+++ b/package.json
@@ -30,14 +30,14 @@
   "peerDependencies": {
     "vue": "^3.2.24",
     "vue-router": "^4.0.12",
-    "@layui/layer-vue": "^1.1.2",
+    "@layui/layer-vue": "^1.1.3",
     "@layui/icons-vue": "^1.0.1",
     "@layui/hooks-vue": "^0.1.6"
   },
   "dependencies": {
     "vue": "^3.2.24",
     "vue-router": "^4.0.12",
-    "@layui/layer-vue": "^1.1.2",
+    "@layui/layer-vue": "^1.1.3",
     "@layui/icons-vue": "^1.0.1",
     "@layui/hooks-vue": "^0.1.6"
   },

From 09f14720580a5d622680656bd42fdccbe0fc1de2 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, 12 Dec 2021 19:51:42 +0800
Subject: [PATCH 05/22] =?UTF-8?q?=E8=B0=83=E6=95=B4=20input=20number=20?=
 =?UTF-8?q?=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 example/docs/zh-CN/guide/changelog.md | 5 ++++-
 src/module/inputNumber/index.less     | 9 +++------
 src/module/inputNumber/index.vue      | 2 +-
 3 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/example/docs/zh-CN/guide/changelog.md b/example/docs/zh-CN/guide/changelog.md
index 16c0cff1..45c33051 100644
--- a/example/docs/zh-CN/guide/changelog.md
+++ b/example/docs/zh-CN/guide/changelog.md
@@ -11,7 +11,10 @@
 <template>
 <lay-timeline>
 <lay-timeline-item title="0.2.8">
-[完善] rate 评分组件。<br>
+[新增] tooltip 提示信息组件。<br>
+[新增] input-number 数字输入框。<br>
+[新增] layer 弹层 area 属性 auto 类型。<br>
+[升级] layer-vue 1.1.3。<br>
 </lay-timeline-item>
 <lay-timeline-item title="0.2.7">
 [完善] rate 评分组件。<br>
diff --git a/src/module/inputNumber/index.less b/src/module/inputNumber/index.less
index 161090b9..02942be5 100644
--- a/src/module/inputNumber/index.less
+++ b/src/module/inputNumber/index.less
@@ -1,5 +1,5 @@
-@border-color: #cacaca;
-@hover-border-color: #1E9FFF;
+@border-color: #eee;
+@hover-border-color: #5fb878;
 @lg: 40px;
 @lg-wdith: 200px;
 @lg-right: 20px;
@@ -48,13 +48,10 @@
   box-sizing: border-box;
   border: 1px solid @border-color;
   border-color: @border-color;
-  border-radius: 3px;
+  border-radius: 2px;
   overflow: hidden;
   .set-size(@lg-wdith, @lg, @lg-right);
   margin-left: 5px;
-  &:hover {
-    border-color: @hover-border-color;
-  }
   .layui-input{
     text-align: center;
     border: 0;
diff --git a/src/module/inputNumber/index.vue b/src/module/inputNumber/index.vue
index c4952d36..ebcb207b 100644
--- a/src/module/inputNumber/index.vue
+++ b/src/module/inputNumber/index.vue
@@ -122,7 +122,7 @@ const longDown = function (fn: Function) {
   if (props.disabled) {
     return;
   }
-  timer = setInterval(() => fn.call(timer), 100);
+  timer = setInterval(() => fn.call(timer), 150);
   fn.call(timer);
 };
 

From 6d0600fcc1ad73f1f57593380f3b2485969f6aab Mon Sep 17 00:00:00 2001
From: xumi <hmxing1105@163.com>
Date: Sun, 12 Dec 2021 19:53:33 +0800
Subject: [PATCH 06/22] =?UTF-8?q?=F0=9F=90=9B[=E5=AE=8C=E5=96=84]lay-code?=
 =?UTF-8?q?=20=E6=96=87=E6=A1=A3=20demo=20=E4=BB=A3=E7=A0=81=E5=A4=8D?=
 =?UTF-8?q?=E5=88=B6=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 example/src/components/LayCode.vue | 12 +++++++++---
 1 file changed, 9 insertions(+), 3 deletions(-)

diff --git a/example/src/components/LayCode.vue b/example/src/components/LayCode.vue
index ace7fd0c..3fa909b6 100644
--- a/example/src/components/LayCode.vue
+++ b/example/src/components/LayCode.vue
@@ -19,6 +19,7 @@
 </template>
 
 <script setup lang="ts">
+import { layer } from '@layui/layer-vue'
 import { onMounted, onUnmounted, ref, watch } from 'vue'
 
 const meta = ref<HTMLElement>({} as HTMLElement)
@@ -32,9 +33,14 @@ const toggle = function () {
 }
 
 const copy = function () {
-  var Url2 = document.getElementById('source') as any
-  Url2.select()
-  document.execCommand('Copy')
+  const foundCodes = meta.value.getElementsByClassName('language-html')
+  if (document.hasFocus()) {
+    const text = foundCodes[0].textContent || "";
+    navigator.clipboard.writeText(text);
+    layer.msg("复制成功", { icon : 1, time: 1000}, ()=>{})
+  } else {
+    layer.msg("复制失败", { icon : 2, time: 1000}, ()=>{})
+  }
 }
 
 onMounted(() => {

From 5c11b731d557ff3440790002da6f9f4a3e441f52 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, 12 Dec 2021 22:46:40 +0800
Subject: [PATCH 07/22] =?UTF-8?q?=E5=8D=87=E7=BA=A7=20layer=201.1.6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json              | 4 ++--
 src/module/type/public.ts | 1 +
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/package.json b/package.json
index 44d18c21..fcafe5a0 100644
--- a/package.json
+++ b/package.json
@@ -30,14 +30,14 @@
   "peerDependencies": {
     "vue": "^3.2.24",
     "vue-router": "^4.0.12",
-    "@layui/layer-vue": "^1.1.3",
+    "@layui/layer-vue": "^1.1.6",
     "@layui/icons-vue": "^1.0.1",
     "@layui/hooks-vue": "^0.1.6"
   },
   "dependencies": {
     "vue": "^3.2.24",
     "vue-router": "^4.0.12",
-    "@layui/layer-vue": "^1.1.3",
+    "@layui/layer-vue": "^1.1.6",
     "@layui/icons-vue": "^1.0.1",
     "@layui/hooks-vue": "^0.1.6"
   },
diff --git a/src/module/type/public.ts b/src/module/type/public.ts
index 8ca0102c..e3a622c4 100644
--- a/src/module/type/public.ts
+++ b/src/module/type/public.ts
@@ -1,4 +1,5 @@
 import type { App, DefineComponent, Ref } from 'vue'
+
 export type StringObject = Record<string, unknown>
 
 export type UnknownObject = Record<string | number, unknown>

From 9d829729f4b8569e0f051b4a4842e88e50ca8188 Mon Sep 17 00:00:00 2001
From: xumi <hmxing1105@163.com>
Date: Mon, 13 Dec 2021 22:53:13 +0800
Subject: [PATCH 08/22] =?UTF-8?q?[=E4=B8=B4=E6=97=B6=E4=BF=AE=E5=A4=8D]?=
 =?UTF-8?q?=E8=A7=A3=E5=86=B3tooltip=E6=95=B0=E6=8D=AE=E4=B8=8D=E6=9B=B4?=
 =?UTF-8?q?=E6=96=B0=E7=9A=84=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/module/popper/index.vue  |  9 +++++----
 src/module/tooltip/index.vue | 10 ++++++++--
 2 files changed, 13 insertions(+), 6 deletions(-)

diff --git a/src/module/popper/index.vue b/src/module/popper/index.vue
index 8351d981..a70ee04f 100644
--- a/src/module/popper/index.vue
+++ b/src/module/popper/index.vue
@@ -1,5 +1,5 @@
 <template>
-    <transition v-show="visible">
+    <transition v-if="visible">
         <div :class="['layui-popper', {'layui-dark' : isDark}]" :style="style" :position="innnerPosition">
             <slot>{{content}}</slot>
             <div class="layui-popper-arrow"></div>
@@ -16,7 +16,7 @@
 <script setup lang="ts">
     import "./index.less";
     import postionFns from "./calcPosition";
-    import { getCurrentInstance, CSSProperties, ref, watch, onUpdated, defineEmits, onMounted} from "vue";
+    import { getCurrentInstance, CSSProperties, ref, watch, onUpdated, defineEmits, onMounted, des} from "vue";
     import {on} from "../../tools/domUtil";
     const props = withDefaults(
         defineProps<{
@@ -65,12 +65,13 @@
     const doHidden = function(e : MouseEvent){
         if ((checkTarget.value && props.el.contains(e.target)) || (props.enterable && popper.value.contains(e.target))) return;
         style.value = {top: (-window.innerHeight) + 'px',left:0};
-        visible.value = false;
+        popper.value.remove();
+        // visible.value = false;
         innnerPosition.value = props.position;
     }
 
     // 事件绑定
-    on(props.el, triggerArr[0], doShow);
+    // on(props.el, triggerArr[0], doShow);
     on(triggerArr[1]??props.el, triggerArr[2], doHidden);
     checkTarget.value = triggerArr[3];
 
diff --git a/src/module/tooltip/index.vue b/src/module/tooltip/index.vue
index cc422212..6cb1bbec 100644
--- a/src/module/tooltip/index.vue
+++ b/src/module/tooltip/index.vue
@@ -1,6 +1,8 @@
 <script lang="ts">
 import usePopper from "../popper/usePopper";
-import { defineComponent} from "vue";
+import { on } from "../../tools/domUtil";
+import { defineComponent, h, render} from "vue";
+import popper from "../popper/index.vue";
 export default defineComponent({
   name: "LayTooltip",
   props: {
@@ -23,7 +25,11 @@ export default defineComponent({
   mounted() {
     const _this = this;
     this.$nextTick(() => {
-      usePopper.createPopper(_this.$el, _this.$props, "hover");
+      on(_this.$el, 'mouseenter', () => {
+          const container: HTMLDivElement = document.createElement("div");
+          render(h(popper, {...this.$props, el: this.$el}), container);
+          container.firstElementChild && document.body.appendChild(container.firstElementChild);
+      })
     });
   },
 });

From 6dd0bd791f6bc8504d45f3ba4ed638f1ac7c6289 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, 14 Dec 2021 01:15:36 +0800
Subject: [PATCH 09/22] =?UTF-8?q?=E6=8F=90=E4=BA=A4=20Github=20=E5=9C=B0?=
 =?UTF-8?q?=E5=9D=80,=20=E6=9B=B4=E6=94=B9=20ChangeLog=20=E6=A0=BC?=
 =?UTF-8?q?=E5=BC=8F?=
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/color.md     |   2 +-
 example/docs/zh-CN/components/modal.md     |   8 +-
 example/docs/zh-CN/guide/changelog.md      | 202 +++------------------
 example/docs/zh-CN/guide/contribution.md   |   8 +
 example/docs/zh-CN/guide/introduce.md      |   6 +-
 example/src/components/LaySearch.vue       |   2 +-
 example/src/layouts/Layout.vue             |   6 +-
 example/src/view/component.vue             |   2 +-
 example/src/view/index.vue                 |  12 +-
 package.json                               |   4 +-
 src/index.ts                               |   3 +
 src/module/backTop/index.ts                |   9 +
 src/module/backTop/index.vue               |  14 ++
 14 files changed, 94 insertions(+), 187 deletions(-)
 create mode 100644 src/module/backTop/index.ts
 create mode 100644 src/module/backTop/index.vue

diff --git a/example/docs/zh-CN/components/animation.md b/example/docs/zh-CN/components/animation.md
index e50b1aa6..80400f6d 100644
--- a/example/docs/zh-CN/components/animation.md
+++ b/example/docs/zh-CN/components/animation.md
@@ -92,3 +92,6 @@ export default {
 | layui-anim-rotate layui-anim-loop | 循环动画     | `layui-anim layui-anim-rotate layui-anim-loop` |
 
 :::
+
+::: footer
+:::
\ No newline at end of file
diff --git a/example/docs/zh-CN/components/color.md b/example/docs/zh-CN/components/color.md
index 46a96638..9aaac970 100644
--- a/example/docs/zh-CN/components/color.md
+++ b/example/docs/zh-CN/components/color.md
@@ -159,4 +159,4 @@ export default {
 | layui-bg-blue   | 蓝色 | class="layui-bg-blue"   |
 | layui-bg-black  | 雅黑 | class="layui-bg-black"  |
 
-:::
+:::
\ No newline at end of file
diff --git a/example/docs/zh-CN/components/modal.md b/example/docs/zh-CN/components/modal.md
index 04ec7641..591943d5 100644
--- a/example/docs/zh-CN/components/modal.md
+++ b/example/docs/zh-CN/components/modal.md
@@ -6,6 +6,7 @@
 <template>
   <lay-button @click="changeVisible1" type="primary">基础使用</lay-button>
   <lay-modal title="基础使用" v-model="visible1">
+      内容  
   </lay-modal>
 </template>
 
@@ -38,6 +39,7 @@ export default {
 <template>
   <lay-button @click="changeVisible2" type="primary">允许拖动</lay-button>
   <lay-modal title="允许拖动" v-model="visible2">
+      内容  
   </lay-modal>
 </template>
 
@@ -70,6 +72,7 @@ export default {
 <template>
   <lay-button @click="changeVisible3" type="primary">放大缩小</lay-button>
   <lay-modal title="放大缩小" v-model="visible3" move="true" maxmin="true">
+      内容  
   </lay-modal>
 </template>
 
@@ -102,6 +105,7 @@ export default {
 <template>
   <lay-button @click="changeVisible4" type="primary">指定位置</lay-button>
   <lay-modal title="指定位置" v-model="visible4" move="true" :offset="['100px','100px']">
+      内容  
   </lay-modal>
 </template>
 
@@ -167,6 +171,7 @@ export default {
 <template>
   <lay-button @click="changeVisible6" type="primary">定义操作</lay-button>
   <lay-modal title="定义操作" v-model="visible6" move="true" :btn="btn6">
+      内容  
   </lay-modal>
 </template>
 
@@ -203,7 +208,8 @@ export default {
 
 <template>
   <lay-button @click="changeVisible7" type="primary">开启遮盖</lay-button>
-  <lay-modal title="开启遮盖" move="true" shade="false" v-model="visible7">  
+  <lay-modal title="开启遮盖" move="true" shade="false" v-model="visible7">
+    内容  
   </lay-modal>
 </template>
 
diff --git a/example/docs/zh-CN/guide/changelog.md b/example/docs/zh-CN/guide/changelog.md
index 45c33051..54bfe768 100644
--- a/example/docs/zh-CN/guide/changelog.md
+++ b/example/docs/zh-CN/guide/changelog.md
@@ -10,180 +10,34 @@
 ::: demo
 <template>
 <lay-timeline>
-<lay-timeline-item title="0.2.8">
-[新增] tooltip 提示信息组件。<br>
-[新增] input-number 数字输入框。<br>
-[新增] layer 弹层 area 属性 auto 类型。<br>
-[升级] layer-vue 1.1.3。<br>
-</lay-timeline-item>
-<lay-timeline-item title="0.2.7">
-[完善] rate 评分组件。<br>
-[完善] collapse 手风琴组件。<br>
-[新增] useState 变量状态管理。<br>
-[新增] useBoolean 布尔变量状态管理。<br>
-[新增] tab 选项卡 before-close, before-leave 钩子。<br>
-[新增] rate 评分组件 half 属性, 支持半选状态。<br>
-[新增] rate 评分组件 select 事件, 评分回调事件。<br>
-[新增] layer 对象 confirm 方法, 函数式调用信息框。<br>
-[新增] layer 对象 load 方法, 通过 type 配置调用不同类型加载层。<br>
-[修复] tab 选项卡 close 无法删除选项卡问题。<br>
-[修复] layer 对象的函数调用, 导致弹层过渡动画失效的问题。<br>
-[文档] icons-vue 组件化使用方式。<br>
-[文档] hooks-vue 使用文档。<br>
-[升级] hooks-vue 0.1.6。<br>
-[升级] layer-vue 1.1.2。<br>
-[升级] vue 3.2.24。 
-</lay-timeline-item>
-<lay-timeline-item title="0.2.6">
-[依赖] hooks-vue 0.1.2。<br>
-[升级] layer-vue 1.0.3。<br>
-</lay-timeline-item>
-<lay-timeline-item title="0.2.5">
-[新增] layer 提供 open, close, closeAll 函数式调用。<br>
-[新增] icons 组件化调用方式, 使用 class 作为组件名使用组件。<br>
-[修复] layer 的 id 属性不唯一, 调整 Guid 为 Uuid 策略。<br>
-[修改] layer 组件 move 默认为 true, 默认提供拖拽支持。<br> 
-[修改] layer.css 为 @layui/layui-vue/lib/index.css。<br>
-[修改] layer 组件为 lay-modal, 使用方式保持不变。<br>
-[独立] layui-vue 项目, 亦支持单独引用。<br>
-[独立] icons-vue 项目, 亦支持单独引用。<br>
-</lay-timeline-item>
-<lay-timeline-item title="0.2.4">
-[增强] checkbox 组件, v-model 支持 array 数据类型。<br>
-[重构] row col 栅格组件, 支持 24 粒度布局。<br>
-[重构] layui.css 样式, 集成 less 编译器。<br>
-[重构] button, button-group, button-container 非破坏性改进代码。<br>
-[修复] themeline 时间线，因 mackdown 造成的样式污染。<br>
-[新增] layer 弹层出场动画, 允许使用 isOutAmin 关闭。<br>
-[新增] checkbox-group 复选框组, 更方便的复选方式。<br>
-[优化] table 和 tranfer 组件复选实现。<br>
-[删除] rate 评分 theme 属性默认值。<br>
-</lay-timeline-item>
-<lay-timeline-item title="0.2.3">
-[新增] table 表格 列筛选功能。<br>
-[新增] table 表格 row 行单击, row-double 行双击事件。<br>
-[新增] layer 弹层 closeBtn 属性, 允许隐藏关闭操作。<br>
-[新增] layer 弹层 btnAlign 属性, 允许自定义按钮布局。<br>
-[新增] layer 弹层 anim 属性, 支持 7 种入场动画。<br>
-[修复] layer 弹层 btn 属性为非必填。<br>
-[修复] layer 弹层 boolean 类型推断造成的警告。<br>
-[修复] mackdown 文档 table 样式对 table 组件的污染。<br>
-[修复] breadcrumb-item 面包屑 title 属性, 未填写造成的警告。<br>
-[修复] select-option 下拉选择 disabled 属性的类型推断造成的警告。<br>
-[修复] page 分页 showSkip 属性的类型推断造成的警告。<br>
-[修复] rate 评分 readonly 属性的类型推断造成的警告。<br>
-[修复] carousel 轮播 anim arrow indicator 属性为非必传。<br>
-[优化] carousel 轮播逻辑, 允许循环切换。<br>
-[优化] layer 弹层 border 样式。<br>
-[优化] layer 弹层 id 默认生成方式, 使用 Guid 作为编号。<br>
-[升级] vue-router 4.0.12 版本。<br>
-[升级] vue 3.2.21 版本。<br>
-</lay-timeline-item>
-<lay-timeline-item title="0.2.2">
-[新增] useFullScreen 全屏 hooks。<br>
-[新增] useMove 拖拽 hooks。<br>
-[新增] textarea 文本域 blur foucs 获取焦点 失去焦点 事件。<br>
-[新增] layer 弹层。<br>
-</lay-timeline-item>
-<lay-timeline-item title="0.2.1">
-[新增] hooks 文档
-[新增] useClickOutside 外部 click 事件 hooks。<br>
-[新增] rate 评分 readonly 属性, 支持只读模式。<br>
-[新增] rate 评分 theme 属性, 支持自定义主题。<br>
-[新增] progress 文档, 区分 theme 与 size 使用案例。<br>
-[新增] dropdown 下拉组件 dropdown-item 点击监听, 隐藏 content 内容。<br>
-[新增] input 输入框 foucs blur 原生事件绑定。<br>
-[修复] rate 评分 modelValue 属性, 支持双向数据绑定。<br>
-</lay-timeline-item>
-<lay-timeline-item title="0.2.0">
-[新增] carousel 轮播 anim 属性, 支持 default updown 不同方向轮播。<br>
-[新增] carousel 轮播 arrow 属性, 支持 always hover none 不同状态切换按钮。<br>
-[新增] carousel 轮播 indicator 属性, 支持 none inside outside 不同位置轮播控制器。<br>
-[新增] carousel 轮播 change 事件, 用于自定义切换回调事件。<br>
-[重构] layout 系列组件, 支持 纵向布局, 横向布局, 嵌套布局等。<br>
-</lay-timeline-item>
-<lay-timeline-item title="0.1.9">
-[新增] carousel 轮播组件, 初步完成切换逻辑。<br>
-[新增] colorPicker 颜色选择器, 初步完成组件渲染。<br>
-[文档] 新增首页模块。<br>
-[文档] 拆分菜单为指南与组件模块。<br>
-[文档] 新增全局内容检索。<br>
-</lay-timeline-item>
-<lay-timeline-item title="0.1.8">
-[新增] table 表格 size 属性, 提供不同尺寸。<br>
-[新增] transfer 穿梭框 item 插槽, 允许自定义列表项。<br>
-[新增] select 下拉选择 change 事件, 值变动触发回调。<br>
-[新增] select-option 下拉选择项 disabled 属性, 允许可选项禁用。<br>
-[修复] transfer 穿梭框 切换 逻辑。<br>
-[删除] dropdown 下拉菜单 padding 样式。<br>
-</lay-timeline-item>
-<lay-timeline-item title="0.1.7">
-[新增] page 分页 prev 插槽。<br>
-[新增] page 分页 next 插槽。<br>
-[新增] button 按钮 naiveType 属性, 原生 type 属性, 支持 button, submit 可选值。<br>
-[新增] form 表单 model 属性, 共 submit 等事件作为入参。<br>
-[新增] form 表单 submit 事件, 内部 submit 提交回调。<br>
-[修复] menu 菜单 selectedKey 选中项 openKeys 打开项 props 双绑。<br>
-[修复] tab 选项卡 v-model 激活项 双绑。<br>
-[修复] tab 选项卡 tab-item 组件套用 for 循环无法获取 props 属性。<br>
-[重构] tree 树内部逻辑, 优化性能。<br>
-</lay-timeline-item>
-<lay-timeline-item title="0.1.4">
-[新增] button 按钮 loading 属性, 提供 加载 状态。<br>
-[新增] tab 选项卡 allow-close 属性，支持 关闭。<br>
-[新增] tab 选项卡 close change 事件，扩展 tab 动态逻辑。<br>
-[新增] ClickOutside 工具。<br>
-[新增] menu 菜单 selectedKey, openKeys 属性。<br>
-[修复] menu 菜单 layui-this 样式，多 a 标签样式重叠。<br>
-</lay-timeline-item>
-<lay-timeline-item title="0.1.1">
-[新增] menu 菜单 title 插槽，允许自定义菜单项。<br>
-[新增] table 表格 toolbar 插槽, 用于自定义工具栏。<br>
-[新增] icon 图标 color 属性, 用于自定义颜色。<br>
-[新增] icon 图标 size 属性, 用于自定义尺寸。<br>
-[新增] breadcrumb-item 面包屑 default 插槽, 用于自定义标题。<br>
-[调整] menu 菜单 child-item 行高, 由 40 调整为 46。<br>
-[调整] breadcrumb 面包屑样式, 让 Api 更合理。<br>
-</lay-timeline-item>
-<lay-timeline-item title="0.1.0">
-[新增] tree 树，支持 node-click，selectKeys 等<br>
-[新增] table 表格，提供 columns datasource page 分页<br>
-[新增] transfer 穿梭框，提供 双列表数据切换<br>
-[新增] textarea 文本域 input 事件 与 disabled 禁用属性<br>
-[新增] button 按钮 disabled 禁用属性<br>
-[新增] input 输入框 disabled 禁用属性<br>
-[新增] checkbox 复选框 disabled 禁用属性<br>
-[新增] icon 图标 prefix 属性，支持自定义 iconfont 引入使用<br>
-[修改] card 卡片 slot 判断逻辑，body 不存在时，使用 default slot<br>
-[修改] field 字段逻辑，当 slot 为空时，展现为线状，否则为面板<br>
-[修复] collapse 手风琴，展开 收起 状态时的不同图标展示<br>
-[重构] checkbox 复选框逻辑，让 api 更合理<br>
-[依赖] 升级 vue 3.2.20 依赖<br>
-</lay-timeline-item>
-<lay-timeline-item title="0.0.17">
-[新增] table 表格组件<br>
-[新增] tab 选项卡组件<br>
-[新增] rate 评分组件<br>
-[新增] button 组件 border 属性，设置边框颜色<br>
-[新增] iconPicker 组件 showSearch 配置, 是否启用搜索<br>
-[新增] page 分页组件<br>
-[修复] menu 组件，菜单项 与 目录 重复渲染<br>
-[支持] 完善 layui-vue-sample 案例<br>
-[支持] 文档支持模糊查询, 用于快速检索组件文档<br>
-[支持] 文档移动端预览<br>
-</lay-timeline-item>
-<lay-timeline-item title="0.0.14">
-[新增] menu 菜单组件<br>
-[新增] iconPicker 图标选择组件<br>
-[新增] anim 动画文档<br>
-[新增] dropdown 下拉菜单组件<br>
-[新增] color 颜色文档<br>
-[新增] collapse 手风琴组件<br>
-[新增] select 下拉选择组件<br>
-[新增] empty 空数据组件<br>
-[新增] scroll 滚动容器组件<br>
-[新增] avatar 头像组件<br>
-</lay-timeline-item>
+  <lay-timeline-item title="0.2.x">
+    <ul> 
+      <a name="0-2-7"> </a> 
+      <li> 
+        <h3>0.2.8 <span class="layui-badge-rim">2021-12-10</span></h3> 
+        <ul> 
+          <li>[重写] sort 方法，以便对数字、非数字及混合类等所有内容的排序进行支持</li> 
+          <li>[新增] dropdown 组件的 align 参数，用于控制下拉菜单水平对齐方式（支持 left、center、right），默认 left</li> 
+          <li>[加强] colorpicker 组件的坐标定位计算方式</li> 
+          <li>[修复] 低版本 ie 若干报错问题</li> 
+        </ul> 
+      </li>
+    </ul>
+  </lay-timeline-item>
+  <lay-timeline-item title="0.1.x">
+    <ul> 
+      <a name="0-2-7"> </a> 
+      <li> 
+        <h3>0.1.1 <span class="layui-badge-rim">2021-12-10</span></h3> 
+        <ul> 
+          <li>[重写] sort 方法，以便对数字、非数字及混合类等所有内容的排序进行支持</li> 
+          <li>[新增] dropdown 组件的 align 参数，用于控制下拉菜单水平对齐方式（支持 left、center、right），默认 left</li> 
+          <li>[加强] colorpicker 组件的坐标定位计算方式</li> 
+          <li>[修复] 低版本 ie 若干报错问题</li> 
+        </ul> 
+      </li>
+    </ul>
+  </lay-timeline-item>
 </lay-timeline>
 </template>
 
diff --git a/example/docs/zh-CN/guide/contribution.md b/example/docs/zh-CN/guide/contribution.md
index 54b084c5..13f0b5c8 100644
--- a/example/docs/zh-CN/guide/contribution.md
+++ b/example/docs/zh-CN/guide/contribution.md
@@ -1,2 +1,10 @@
 ::: title 贡献代码
 :::
+
+
+::: describe
+
+
+[![Giteye chart](https://chart.giteye.net/gitee/layui-vue/layui-vue/DBC9Z6HQ.png)](https://giteye.net/chart/DBC9Z6HQ)
+
+:::
\ No newline at end of file
diff --git a/example/docs/zh-CN/guide/introduce.md b/example/docs/zh-CN/guide/introduce.md
index 8e57741e..ba93d954 100644
--- a/example/docs/zh-CN/guide/introduce.md
+++ b/example/docs/zh-CN/guide/introduce.md
@@ -1,7 +1,11 @@
 ::: title 基本介绍
 :::
 
-<img src="http://layui-doc.pearadmin.com/static/images/layui/logo-2.png" />
+<p>
+  <a href="http://layui-vue.pearadmin.com">
+    <img src="https://sentsin.gitee.io/res/images/layui/layui.png" alt="layui" width="500">
+  </a>
+</p>
 
 <br>
 
diff --git a/example/src/components/LaySearch.vue b/example/src/components/LaySearch.vue
index 0d8cb134..adb8080a 100644
--- a/example/src/components/LaySearch.vue
+++ b/example/src/components/LaySearch.vue
@@ -41,7 +41,7 @@
 <script setup name="LaySelect" lang="ts">
 import { defineProps, ref } from 'vue'
 import { useRouter, useRoute } from 'vue-router'
-import { Recordable } from '/@src/module/type'
+import { Recordable } from '../../../src/module/type'
 
 const props = defineProps<{
   datas?: Recordable[]
diff --git a/example/src/layouts/Layout.vue b/example/src/layouts/Layout.vue
index 8fe5d80a..ccaf01ce 100644
--- a/example/src/layouts/Layout.vue
+++ b/example/src/layouts/Layout.vue
@@ -32,14 +32,14 @@
       >
         <li class="layui-nav-item">
           <a href="https://gitee.com/layui-vue">
-            <lay-icon type="layui-icon-fonts-code" size="14px"></lay-icon>
+            <lay-icon type="layui-icon-fonts-code" size="15px"></lay-icon>
           </a>
         </li>
         <li class="layui-nav-item">
           <a
-            href="https://gitee.com/layui-vue/layui-vue/issues?assignee_id=&author_id=&branch=&collaborator_ids=&issue_search=&label_ids=&label_text=&milestone_id=&priority=&private_issue=&program_id=&project_id=Jmysy%2Flayui-vue&project_type=&scope=&sort=&state=all&target_project="
+            href="https://gitee.com/layui-vue/layui-vue/issues"
           >
-            <lay-icon type="layui-icon-chat" size="14px"></lay-icon>
+            <lay-icon type="layui-icon-chat" size="15px"></lay-icon>
           </a>
         </li>
         <li class="layui-nav-item">
diff --git a/example/src/view/component.vue b/example/src/view/component.vue
index bd5e7fef..23629650 100644
--- a/example/src/view/component.vue
+++ b/example/src/view/component.vue
@@ -346,7 +346,7 @@ export default {
         children: [
           {
             id: 90,
-            title: '简介',
+            title: '基础',
             subTitle: 'layer',
             path: '/zh-CN/components/layer',
           },
diff --git a/example/src/view/index.vue b/example/src/view/index.vue
index f1a09192..6ecd579c 100644
--- a/example/src/view/index.vue
+++ b/example/src/view/index.vue
@@ -21,9 +21,7 @@
           <cite>layui vue, A component library for Vue 3 base on layui</cite>
         </div>
         <div class="site-download">
-          <router-link
-            class="layui-inline site-down"
-            to="/zh-CN/guide"
+          <router-link class="layui-inline site-down" to="/zh-CN/guide"
             >Get Started</router-link
           >
         </div>
@@ -56,6 +54,14 @@
         >
           Gitee
         </a>
+        <a
+          href="https://github.com/layui-vue"
+          target="_blank"
+          rel="nofollow"
+          class="site-fork"
+        >
+          Github
+        </a>
       </div>
     </div>
     <div style="margin-left: 10%; margin-right: 10%">
diff --git a/package.json b/package.json
index fcafe5a0..96f982af 100644
--- a/package.json
+++ b/package.json
@@ -30,14 +30,14 @@
   "peerDependencies": {
     "vue": "^3.2.24",
     "vue-router": "^4.0.12",
-    "@layui/layer-vue": "^1.1.6",
+    "@layui/layer-vue": "^1.1.7",
     "@layui/icons-vue": "^1.0.1",
     "@layui/hooks-vue": "^0.1.6"
   },
   "dependencies": {
     "vue": "^3.2.24",
     "vue-router": "^4.0.12",
-    "@layui/layer-vue": "^1.1.6",
+    "@layui/layer-vue": "^1.1.7",
     "@layui/icons-vue": "^1.0.1",
     "@layui/hooks-vue": "^0.1.6"
   },
diff --git a/src/index.ts b/src/index.ts
index ac62fc12..1dab2a79 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -8,6 +8,7 @@ import '@layui/icons-vue/lib/index.css';
 import { layer } from '@layui/layer-vue'
 
 import LayModal from './module/layer/modal/index'
+import LayBacktop from './module/backTop/index'
 import LayAvatar from './module/avatar/index'
 import LayRadio from './module/radio/index'
 import LayButton from './module/button/index'
@@ -71,6 +72,7 @@ const components: Record<string, IDefineComponent> = {
   LayRadio,
   LayButton,
   LayIcon,
+  LayBacktop,
   LayLayout,
   LaySide,
   LayHeader,
@@ -143,6 +145,7 @@ export {
   LayRadio,
   LayIcon,
   LayButton,
+  LayBacktop,
   LayLayout,
   LaySide,
   LayHeader,
diff --git a/src/module/backTop/index.ts b/src/module/backTop/index.ts
new file mode 100644
index 00000000..bf36d70e
--- /dev/null
+++ b/src/module/backTop/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 || 'LayBacktop', Component)
+}
+
+export default Component as IDefineComponent
diff --git a/src/module/backTop/index.vue b/src/module/backTop/index.vue
new file mode 100644
index 00000000..1b70744b
--- /dev/null
+++ b/src/module/backTop/index.vue
@@ -0,0 +1,14 @@
+<template>
+  <ul class="layui-fixbar">
+    <li class="layui-icon layui-fixbar-top" style="display: list-item"></li>
+  </ul>
+</template>
+
+<script lang="ts">
+export default {
+    name: "LayBacktop"
+}
+</script>
+
+<script lang="ts" setup>
+</script>
\ No newline at end of file

From 25ee7195f0a9e8c013034bb8842740d1586e6f37 Mon Sep 17 00:00:00 2001
From: xumi <hmxing1105@163.com>
Date: Wed, 15 Dec 2021 00:33:44 +0800
Subject: [PATCH 10/22] =?UTF-8?q?=F0=9F=90=9B[=E4=BF=AE=E5=A4=8Dbug]?=
 =?UTF-8?q?=E8=A7=A3=E5=86=B3tooltip=E5=86=85=E5=AE=B9=E5=8A=A8=E6=80=81?=
 =?UTF-8?q?=E6=9B=B4=E6=96=B0=E5=92=8C=E6=B7=B1=E8=89=B2=E4=B8=BB=E9=A2=98?=
 =?UTF-8?q?=E8=BE=B9=E6=A1=86=E7=99=BD=E8=BE=B9=E7=9A=84=E9=97=AE=E9=A2=98?=
 =?UTF-8?q?=EF=BC=8C=E6=96=B0=E5=A2=9E=E7=A6=81=E7=94=A8=E5=B1=9E=E6=80=A7?=
 =?UTF-8?q?(disabled)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 example/docs/zh-CN/components/tooltip.md | 54 +++++++++++++++++++++-
 src/module/popper/calcPosition.ts        |  4 +-
 src/module/popper/index.less             | 25 +++++-----
 src/module/popper/index.vue              | 58 +++++++++++++-----------
 src/module/popper/usePopper.ts           | 16 +++++--
 src/module/tooltip/index.vue             | 16 +++----
 6 files changed, 118 insertions(+), 55 deletions(-)

diff --git a/example/docs/zh-CN/components/tooltip.md b/example/docs/zh-CN/components/tooltip.md
index c067e82f..c983c673 100644
--- a/example/docs/zh-CN/components/tooltip.md
+++ b/example/docs/zh-CN/components/tooltip.md
@@ -52,11 +52,60 @@
 ::: demo
 
 <template>
-  <lay-tooltip content="假装这里有文字提示" :is-dark="false">
-    <lay-button>tooltip</lay-button>
+  <lay-tooltip content="不明白是是非非，只知我不会不在。" :is-dark="false">
+    <lay-button >tooltip</lay-button>
   </lay-tooltip>
 </template>
 
+<script>
+</script>
+:::
+
+::: title 是否禁用/动态属性
+:::
+
+::: demo
+
+<template>
+  <lay-tooltip :content="content" :is-dark="isDark" :disabled="!disabled">
+    <lay-button>tooltip</lay-button>
+  </lay-tooltip>
+  <lay-switch v-model="disabled" active-text="启用tooltip"  inactive-text="禁用tooltip" style="margin-left: 5px;"></lay-switch>
+  <lay-switch v-model="isDark" active-text="深色"  inactive-text="浅色" style="margin-left: 5px;"></lay-switch>
+</template>
+
+<script>
+  import { ref } from 'vue';
+
+  export default {
+    setup() {
+
+      const contentArr = [
+        "不明白是是非非，只知我不会不在。",
+        "千山万水，去程是你，归程也是你。",
+        "一约既定，万山无阻。",
+        "时光都淡了，我还伴着你。",
+        "只问深情，不问西东。",
+        "感谢曾经在我身边的，一直在我身边。",
+        "经年再相逢，魂梦与子同。"
+      ];
+      const rendonCotent = function(){
+        return contentArr[Math.floor(Math.random() * contentArr.length)];
+      };
+
+      const content = ref(rendonCotent())
+      const isDark = ref(false)
+      const disabled = ref(true)
+
+      setInterval(()=> content.value =  rendonCotent(), 1000)
+      return {
+        content,
+        isDark,
+        disabled
+      }
+    }
+  }
+</script>
 <style>
 </style>
 :::
@@ -71,5 +120,6 @@
 | content     | 显示内容 | --             |
 | position    | 显示位置 | `top`(默认值)、`bottom`、`left`、`right` |
 | isDark      | 是否为黑色主题 | `true`(默认值)、`false`(浅色)   |
+| disabled      | 是否禁用 | `false`(默认值)、`true`(禁用)   ||
 
 :::
diff --git a/src/module/popper/calcPosition.ts b/src/module/popper/calcPosition.ts
index e6cebc22..cea53dd3 100644
--- a/src/module/popper/calcPosition.ts
+++ b/src/module/popper/calcPosition.ts
@@ -31,7 +31,7 @@ const postionFns: any = {
             left = right;
         }
         return {
-            top: `${top - Math.abs(popper.offsetHeight - el.offsetHeight) / 2}px`,
+            top: `${top - (popper.offsetHeight - el.offsetHeight) / 2}px`,
             left: `${left}px`
         }
     },
@@ -42,7 +42,7 @@ const postionFns: any = {
             right = left - popper.offsetWidth - 6;
         }
         return {
-            top: `${top - Math.abs(popper.offsetHeight - el.offsetHeight) / 2}px`,
+            top: `${top - (popper.offsetHeight - el.offsetHeight) / 2}px`,
             left: `${right}px`
         }
     }
diff --git a/src/module/popper/index.less b/src/module/popper/index.less
index be53e2f7..ae994b31 100644
--- a/src/module/popper/index.less
+++ b/src/module/popper/index.less
@@ -10,14 +10,16 @@
 @border-clor: #cecece;
 
 // 单一设置主题
-.single-theme(@position, @contrary_position, @margin_postion, @color) {
+.single-theme(@position, @contrary_position, @margin_postion, @color, @m-border-color) {
     @attr : ~'[position=@{position}]';
-    &.layui-popper@{attr}{
+    &{
+        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: @border-clor;
+            border-@{position}-color: @m-border-color;
             &::after{
                 @{contrary_position}: 1px;
                 border-@{contrary_position}-width: 0;
@@ -26,15 +28,16 @@
             }
         }
     }
+    }
 }
 // 统一设置四个方向的主题
-.theme(@background-color, @color) {
+.theme(@background-color, @color, @border-color) {
     background-color: @background-color;
     color: @color;
-    .single-theme(top, bottom, left, @background-color);
-    .single-theme(bottom, top, left, @background-color);
-    .single-theme(right, left, top, @background-color);
-    .single-theme(left, right, top, @background-color);
+    .single-theme(top, bottom, left, @background-color, @border-color);
+    .single-theme(bottom, top, left, @background-color, @border-color);
+    .single-theme(right, left, top, @background-color, @border-color);
+    .single-theme(left, right, top, @background-color, @border-color);
 }
 
 // 箭头默认居中
@@ -65,9 +68,8 @@
     min-height: 12px;
     font-size: 14px;
     box-sizing: border-box;
-    border: 1px solid @border-clor;
     box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.15);
-    .theme(@ligh-background, @ligh-color);
+    .theme(@ligh-background, @ligh-color, @border-clor);
     max-width: 300px;
     z-index: 9999;
 
@@ -93,8 +95,7 @@
 
     /* 深色主题 */
     &.layui-dark {
-        .theme(@dark-background, @dark-color);
-        border: 0;
+        .theme(@dark-background, @dark-color, @dark-background);
     }
 
 }
\ No newline at end of file
diff --git a/src/module/popper/index.vue b/src/module/popper/index.vue
index a70ee04f..927e4c7a 100644
--- a/src/module/popper/index.vue
+++ b/src/module/popper/index.vue
@@ -1,7 +1,7 @@
 <template>
-    <transition v-if="visible">
-        <div :class="['layui-popper', {'layui-dark' : isDark}]" :style="style" :position="innnerPosition">
-            <slot>{{content}}</slot>
+    <transition v-show="visible">
+        <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>
@@ -16,22 +16,21 @@
 <script setup lang="ts">
     import "./index.less";
     import postionFns from "./calcPosition";
-    import { getCurrentInstance, CSSProperties, ref, watch, onUpdated, defineEmits, onMounted, des} from "vue";
+    import { CSSProperties, ref, watch, onUpdated, defineEmits, onMounted, Ref} from "vue";
     import {on} from "../../tools/domUtil";
     const props = withDefaults(
         defineProps<{
             el : any,
-            content ?: string,
-            position ?: string,
+            content ?: Ref<string>,
+            position ?: Ref<string>,
             trigger ?: string,
             enterable ?: boolean,
-            isDark ?: boolean,
+            isDark ?: Ref<boolean>,
+            disabled ?: Ref<boolean>,
             modelValue ?: boolean
         }>(),
         {
-            position : 'top',
             enterable : true,
-            isDark : false,
             trigger : 'hover',
             modelValue : true
         }
@@ -48,43 +47,50 @@
     }
 
     const style = ref<CSSProperties>({top: (-window.innerHeight) + 'px',left:0});
-    const visible = ref(props.modelValue);
     const checkTarget = ref(false);
-    const popper = ref();
-    const innnerPosition = ref(props.position);
+    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 visible = ref(props.modelValue && !innnerDisabled.value);
 
     const emit = defineEmits(['update:modelValue'])
     watch(visible, (val)=>{
         emit('update:modelValue', val);
+        val && (popper.value.offsetWidth === 0 ? setTimeout(showPosistion, 0) : showPosistion());
+    })
+    watch(innnerDisabled, (val)=>{
+        visible.value = false;
+    })
+    watch(()=>props.content?.value, (val)=>{
+        visible.value && setTimeout(showPosistion, 5);
     })
 
     const doShow = function(){
-        visible.value = true;
+        if (!innnerDisabled.value) {
+            visible.value = true;
+        }
     }
 
     const doHidden = function(e : MouseEvent){
-        if ((checkTarget.value && props.el.contains(e.target)) || (props.enterable && popper.value.contains(e.target))) return;
+        if ((checkTarget.value && props.el.contains(e.target)) || (props.enterable && popper.value.contains(e.target as Node))) return;
         style.value = {top: (-window.innerHeight) + 'px',left:0};
-        popper.value.remove();
-        // visible.value = false;
-        innnerPosition.value = props.position;
+        // popper.value.remove();
+        visible.value = false;
+        innnerPosition.value = tempPosition.value;
     }
 
     // 事件绑定
-    // on(props.el, triggerArr[0], doShow);
+    on(props.el, triggerArr[0], doShow);
     on(triggerArr[1]??props.el, triggerArr[2], doHidden);
     checkTarget.value = triggerArr[3];
 
     // 计算位置显示
     const showPosistion = function(){
-        postionFns[props.position] && (style.value = postionFns[props.position](props.el, popper.value, innnerPosition));
+        postionFns[tempPosition.value] && (style.value = postionFns[tempPosition.value](props.el, popper.value, innnerPosition));
     }
-
-    // 节点变化, 获取当前实例对应的dom, 如果为显示状态，则计算位置显示
-    const nodeChange = function(){
-        popper.value = getCurrentInstance()?.vnode.el;
+    onMounted(()=>{
         visible.value && (popper.value.offsetWidth === 0 ? setTimeout(showPosistion, 0) : showPosistion());
-    }
-    onMounted(nodeChange)
-    onUpdated(nodeChange)
+    })
 </script>
\ No newline at end of file
diff --git a/src/module/popper/usePopper.ts b/src/module/popper/usePopper.ts
index 515ab485..19265d2e 100644
--- a/src/module/popper/usePopper.ts
+++ b/src/module/popper/usePopper.ts
@@ -1,4 +1,4 @@
-import { h, render} from "vue";
+import { h, ref, render, watchEffect} from "vue";
 import popper from "./index.vue";
 import { once } from "../../tools/domUtil";
 const EVENT_MAP : any = {
@@ -9,16 +9,24 @@ const usePopper = {
     createPopper(el: HTMLElement, props: any, trigger : string) {
         const _this = this;
         once(el, EVENT_MAP[trigger], () => {
-            const _props = {...props};
-            _props.el = el;
+            // TODO 临时解决方案
+            const _props:any = {el};
+            for (const key in props) {
+                _props[key] = ref(props[key]);
+            }
             _this.renderPopper(_props);
+            watchEffect(() => {
+                for (const key in _props) {
+                    _props[key].value = props[key];
+                }
+            })
         })
     },
     renderPopper(props: any) {
         const container: HTMLDivElement = document.createElement("div");
         // container.setAttribute("class", "lay-div");
         const node = h(popper, props);
-        render(h(popper, props), container);
+        render(node, container);
         container.firstElementChild && document.body.appendChild(container.firstElementChild);
         return node;
     }
diff --git a/src/module/tooltip/index.vue b/src/module/tooltip/index.vue
index 6cb1bbec..e95188c9 100644
--- a/src/module/tooltip/index.vue
+++ b/src/module/tooltip/index.vue
@@ -1,8 +1,6 @@
 <script lang="ts">
 import usePopper from "../popper/usePopper";
-import { on } from "../../tools/domUtil";
-import { defineComponent, h, render} from "vue";
-import popper from "../popper/index.vue";
+import { defineComponent} from "vue";
 export default defineComponent({
   name: "LayTooltip",
   props: {
@@ -17,6 +15,10 @@ export default defineComponent({
     isDark: {
       type: Boolean,
       default: true,
+    },
+    disabled: {
+      type: Boolean,
+      default: false,
     }
   },
   render() {
@@ -25,12 +27,8 @@ export default defineComponent({
   mounted() {
     const _this = this;
     this.$nextTick(() => {
-      on(_this.$el, 'mouseenter', () => {
-          const container: HTMLDivElement = document.createElement("div");
-          render(h(popper, {...this.$props, el: this.$el}), container);
-          container.firstElementChild && document.body.appendChild(container.firstElementChild);
-      })
+      usePopper.createPopper(_this.$el, _this.$props, 'hover')
     });
-  },
+  }
 });
 </script>

From e11a8d41e058ef35093bef677aac5458103431de 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: Wed, 15 Dec 2021 00:57:30 +0800
Subject: [PATCH 11/22] =?UTF-8?q?=F0=9F=93=83=20=E8=A1=A5=E5=85=85?=
 =?UTF-8?q?=E5=88=97=E9=85=8D=E7=BD=AE=E6=96=87=E6=A1=A3?=
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/table.md     | 21 +++++++++++++++++----
 example/docs/zh-CN/guide/changelog.md      | 10 +++++-----
 example/src/view/component.vue             |  6 ------
 4 files changed, 22 insertions(+), 18 deletions(-)

diff --git a/example/docs/zh-CN/components/animation.md b/example/docs/zh-CN/components/animation.md
index 80400f6d..6fae12dd 100644
--- a/example/docs/zh-CN/components/animation.md
+++ b/example/docs/zh-CN/components/animation.md
@@ -91,7 +91,4 @@ export default {
 | layui-anim-rotate                 | 360 度旋转   | `layui-anim layui-anim-rotate`                 |
 | layui-anim-rotate layui-anim-loop | 循环动画     | `layui-anim layui-anim-rotate layui-anim-loop` |
 
-:::
-
-::: footer
 :::
\ No newline at end of file
diff --git a/example/docs/zh-CN/components/table.md b/example/docs/zh-CN/components/table.md
index cbb312e7..38b221d4 100644
--- a/example/docs/zh-CN/components/table.md
+++ b/example/docs/zh-CN/components/table.md
@@ -223,12 +223,12 @@ export default {
       {
         title:"账户",
         width:"200px",
-        slot:"username",
+        customSlot:"username",
         key:"username"
       },{
         title:"密码",
         width: "180px",
-        slot:"password",
+        customSlot:"password",
         key:"password"
       },{
         title:"年龄",
@@ -248,11 +248,11 @@ export default {
     ]
 
     const rowClick = function(data) {
-      alert(JSON.stringify(data))
+      console.log(JSON.stringify(data))
     }
     
     const rowDoubleClick = function(data) {
-      alert(JSON.stringify(data))
+      console.log(JSON.stringify(data))
     }
 
     return {
@@ -309,3 +309,16 @@ export default {
 | toolbar | 自定义工具栏 | --   |
 
 :::
+
+::: title 列配置
+:::
+
+::: table
+
+| 插槽    | 描述         | 默认 |
+| ------- | ------------ | ---- |
+| title | 列标题 | --   |
+| key | 数据字段 | --   |
+| customSlot | 插槽名称 | --   |
+| width | 宽度 | --   |
+:::
\ No newline at end of file
diff --git a/example/docs/zh-CN/guide/changelog.md b/example/docs/zh-CN/guide/changelog.md
index 54bfe768..b0ff34fc 100644
--- a/example/docs/zh-CN/guide/changelog.md
+++ b/example/docs/zh-CN/guide/changelog.md
@@ -14,12 +14,12 @@
     <ul> 
       <a name="0-2-7"> </a> 
       <li> 
-        <h3>0.2.8 <span class="layui-badge-rim">2021-12-10</span></h3> 
+        <h3>0.2.8 <span class="layui-badge-rim">2021-12-15</span></h3> 
         <ul> 
-          <li>[重写] sort 方法，以便对数字、非数字及混合类等所有内容的排序进行支持</li> 
-          <li>[新增] dropdown 组件的 align 参数，用于控制下拉菜单水平对齐方式（支持 left、center、right），默认 left</li> 
-          <li>[加强] colorpicker 组件的坐标定位计算方式</li> 
-          <li>[修复] 低版本 ie 若干报错问题</li> 
+          <li>[新增] tooltip 组件, 便捷的信息提示</li> 
+          <li>[新增] input-number 组件, 数字输入框, 方便数字录入。</li> 
+          <li>[加强] layer 组件 area 属性, 支持 字符串 与 数组 类型, 默认为 auto 宽高自适应。</li>
+          <li>[升级] layer-vue 1.1.7。</li>
         </ul> 
       </li>
     </ul>
diff --git a/example/src/view/component.vue b/example/src/view/component.vue
index 23629650..497332c6 100644
--- a/example/src/view/component.vue
+++ b/example/src/view/component.vue
@@ -344,12 +344,6 @@ export default {
         id: 1,
         title: '反馈',
         children: [
-          {
-            id: 90,
-            title: '基础',
-            subTitle: 'layer',
-            path: '/zh-CN/components/layer',
-          },
           {
             id: 90,
             title: '弹层',

From 81afabf411eda055e41f75272259c1e4935748b9 Mon Sep 17 00:00:00 2001
From: wang <825251234@qq.com>
Date: Wed, 15 Dec 2021 21:24:40 +0800
Subject: [PATCH 12/22] =?UTF-8?q?slider=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 example/docs/zh-CN/components/slider.md |   5 +-
 package.json                            |  19 ++---
 src/module/slider/index.less            |  34 ++++++++
 src/module/slider/index.vue             | 101 ++++++++++++++++++------
 4 files changed, 123 insertions(+), 36 deletions(-)
 create mode 100644 src/module/slider/index.less

diff --git a/example/docs/zh-CN/components/slider.md b/example/docs/zh-CN/components/slider.md
index 8f3e6c7a..29310cc7 100644
--- a/example/docs/zh-CN/components/slider.md
+++ b/example/docs/zh-CN/components/slider.md
@@ -1,7 +1,7 @@
 ::: demo
 
 <template>
-  <lay-slider></lay-slider>
+  <lay-slider v-model="value"></lay-slider>
 </template>
 
 <script>
@@ -9,8 +9,9 @@ import { ref } from 'vue'
 
 export default {
   setup() {
-
+    const value = ref(50)
     return {
+      value
     }
   }
 }
diff --git a/package.json b/package.json
index 96f982af..5e5c341b 100644
--- a/package.json
+++ b/package.json
@@ -28,27 +28,28 @@
   "author": "就眠儀式",
   "license": "MIT",
   "peerDependencies": {
-    "vue": "^3.2.24",
-    "vue-router": "^4.0.12",
-    "@layui/layer-vue": "^1.1.7",
+    "@layui/hooks-vue": "^0.1.6",
     "@layui/icons-vue": "^1.0.1",
-    "@layui/hooks-vue": "^0.1.6"
+    "@layui/layer-vue": "^1.1.7",
+    "vue": "^3.2.24",
+    "vue-router": "^4.0.12"
   },
   "dependencies": {
-    "vue": "^3.2.24",
-    "vue-router": "^4.0.12",
-    "@layui/layer-vue": "^1.1.7",
+    "@layui/hooks-vue": "^0.1.6",
     "@layui/icons-vue": "^1.0.1",
-    "@layui/hooks-vue": "^0.1.6"
+    "@layui/layer-vue": "^1.1.7",
+    "evtd": "^0.2.3",
+    "vue": "^3.2.24",
+    "vue-router": "^4.0.12"
   },
   "devDependencies": {
     "@babel/core": "^7.15.8",
     "@babel/preset-env": "^7.15.8",
     "@babel/preset-typescript": "^7.15.0",
     "@rollup/plugin-babel": "^5.3.0",
-    "@types/node": "^16.11.9",
     "@types/markdown-it": "^12.2.3",
     "@types/markdown-it-container": "^2.0.4",
+    "@types/node": "^16.11.9",
     "@vitejs/plugin-vue": "^1.9.3",
     "@vue/compiler-sfc": "^3.2.24",
     "@vue/server-renderer": "^3.2.24",
diff --git a/src/module/slider/index.less b/src/module/slider/index.less
new file mode 100644
index 00000000..ba831de4
--- /dev/null
+++ b/src/module/slider/index.less
@@ -0,0 +1,34 @@
+.layui-slider-v {
+    width: 100%;
+    height: 50px;
+    /* background-color: palevioletred; */
+  }
+  
+  .layui-slider-track-v {
+    width: 100%;
+    height: 16px;
+    position: relative;
+    cursor: pointer;
+    z-index: 30;
+  }
+  
+  .layui-slider-btn-v {
+    width: 12px;
+    height: 12px;
+    background-color: white;
+    position: absolute;
+    // top: -7px;
+    border: 2px solid rgb(0, 150, 136);
+    border-radius: 50%;
+    cursor: pointer;
+    left: 0%;
+  }
+  
+  .layui-slider-rate-v {
+    width: 0%;
+    height: 4px;
+    position: absolute;
+    top: 6px;
+    left: 0;
+    background-color: rgb(0, 150, 136);
+  }
\ No newline at end of file
diff --git a/src/module/slider/index.vue b/src/module/slider/index.vue
index 5eeec521..4750a816 100644
--- a/src/module/slider/index.vue
+++ b/src/module/slider/index.vue
@@ -1,38 +1,89 @@
 <template>
   <div class="layui-slider layui-slider-vertical" style="height: 200px" v-if="vertical">
     <div class="layui-slider-tips"></div>
-    <div
-      class="layui-slider-bar"
-      style="background: #009688; height: 0%; bottom: 0"
-    ></div>
+    <div class="layui-slider-bar" style="background: #009688; height: 0%; bottom: 0"></div>
     <div class="layui-slider-wrap" style="bottom: 0%">
-      <div
-        class="layui-slider-wrap-btn"
-        style="border: 2px solid #009688"
-      ></div>
+      <div class="layui-slider-wrap-btn" style="border: 2px solid #009688"></div>
     </div>
   </div>
 
-  <div class="layui-slider" v-else>
-    <div class="layui-slider-tips"></div>
-    <div
-      class="layui-slider-bar"
-      style="background: #009688; width: 0%; left: 0"
-    ></div>
-    <div class="layui-slider-wrap" style="left: 0%">
-      <div
-        class="layui-slider-wrap-btn"
-        style="border: 2px solid #009688"
-      ></div>
+  <div class="layui-slider-v" v-else>
+    <div ref="tracker" @mousedown.stop="handle_mousedown" class="layui-slider-track-v">
+      <lay-tooltip :content="modelValue + ''">
+        <div :style="{ left: modelValue + '%' }" class="layui-slider-btn-v"></div>
+      </lay-tooltip>
+
+      <div :style="{ width: modelValue + '%' }" class="layui-slider-rate-v"></div>
     </div>
   </div>
 </template>
+<script setup lang="ts">
+import { defineProps, reactive, ref } from 'vue'
+import { on, off } from 'evtd'
+import './index.less'
 
-<script setup name="LaySlider" lang="ts">
-import { defineProps } from 'vue'
+const emit = defineEmits(["update:modelValue"]);
+
+interface LaySliderProps {
+  vertical?: boolean,
+  modelValue?: number,
+  min?: number,
+  max?: number,
+}
+
+const props = withDefaults(defineProps<LaySliderProps>(), {
+  vertical: false,
+  modelValue: 0,
+})
+
+const tracker = ref<HTMLElement | null>(null)
+const style = reactive({
+  left: props.modelValue,
+  width: props.modelValue
+})
+
+function handle_mousedown() {
+  on('selectstart', window, handle_select, { once: true })
+  on('mouseup', window, handle_mouseup)
+  on('mousemove', window, handle_mousemove)
+
+}
+
+function handle_mousemove(e: MouseEvent) {
+  if (!tracker.value) {
+    return
+  }
+  let tracker_rect = tracker.value.getBoundingClientRect()
+  let origin_left = tracker_rect.left
+  let point_left = e.clientX
+  let distance = point_left - origin_left
+  if (distance < 0) {
+    style.left = 0
+    style.width = 0
+    props.modelValue = 0
+  } else {
+    let rate = (distance / tracker_rect.width) * 100
+    style.left = Math.floor(rate)
+    style.width = Math.floor(rate)
+    props.modelValue = Math.floor(rate)
+    if (style.left > 100) {
+      style.left = 100
+      style.width = 100
+      props.modelValue = 100
+    }
+  }
+  emit('update:modelValue', style.left)
+}
+
+function handle_mouseup() {
+  // off('selectstart', document, handle_select)
+  off('mouseup', window, handle_mouseup)
+  off('mousemove', window, handle_mousemove)
+
+}
+
+function handle_select(e: Event): void {
+  e.preventDefault()
+}
 
-const props =
-  defineProps<{
-    vertical?: boolean
-  }>()
 </script>
\ No newline at end of file

From b704cba9bcb6d2d44ff1dc2519e9a00c2de87b15 Mon Sep 17 00:00:00 2001
From: xumi <hmxing1105@163.com>
Date: Wed, 15 Dec 2021 23:53:56 +0800
Subject: [PATCH 13/22] =?UTF-8?q?=F0=9F=90=9B[=E4=BC=98=E5=8C=96]=20?=
 =?UTF-8?q?=E4=BC=98=E5=8C=96tooltip=E5=8A=A8=E6=80=81=E4=BD=8D=E7=BD=AE?=
 =?UTF-8?q?=E6=98=BE=E7=A4=BA=E9=97=AE=E9=A2=98=EF=BC=8C=E4=BB=A5=E5=8F=8A?=
 =?UTF-8?q?=E4=B8=BA=E6=BB=91=E5=9D=97=E6=8B=89=E5=8A=A8=E6=8F=90=E4=BE=9B?=
 =?UTF-8?q?=E6=98=BE=E7=A4=BA=E5=B1=9E=E6=80=A7?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 example/docs/zh-CN/components/tooltip.md |  4 ++-
 src/module/popper/index.vue              | 41 +++++++++++++++---------
 src/module/popper/usePopper.ts           | 11 ++++++-
 src/module/tooltip/index.vue             | 10 +++++-
 4 files changed, 47 insertions(+), 19 deletions(-)

diff --git a/example/docs/zh-CN/components/tooltip.md b/example/docs/zh-CN/components/tooltip.md
index c983c673..f9f2c675 100644
--- a/example/docs/zh-CN/components/tooltip.md
+++ b/example/docs/zh-CN/components/tooltip.md
@@ -120,6 +120,8 @@
 | content     | 显示内容 | --             |
 | position    | 显示位置 | `top`(默认值)、`bottom`、`left`、`right` |
 | isDark      | 是否为黑色主题 | `true`(默认值)、`false`(浅色)   |
-| disabled      | 是否禁用 | `false`(默认值)、`true`(禁用)   ||
+| disabled    | 是否禁用 | `false`(默认值)、`true`(禁用)   ||
+| visible     | 控制是否显示 | `true`(默认值)、`false`   ||
+| isCanHide   | 控制是否可以隐藏,可参考`lay-slider`组件 | `true`(默认值)、`false`   ||
 
 :::
diff --git a/src/module/popper/index.vue b/src/module/popper/index.vue
index 927e4c7a..8b9a527f 100644
--- a/src/module/popper/index.vue
+++ b/src/module/popper/index.vue
@@ -1,5 +1,5 @@
 <template>
-    <transition v-show="visible">
+    <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>
@@ -21,18 +21,19 @@
     const props = withDefaults(
         defineProps<{
             el : any,
-            content ?: Ref<string>,
+            content ?: Ref<string|Number>,
             position ?: Ref<string>,
             trigger ?: string,
             enterable ?: boolean,
             isDark ?: Ref<boolean>,
             disabled ?: Ref<boolean>,
-            modelValue ?: boolean
+            visible ?: Ref<boolean>,
+            isCanHide ?: Ref<boolean>,
+            updateVisible ?: Function
         }>(),
         {
             enterable : true,
-            trigger : 'hover',
-            modelValue : true
+            trigger : 'hover'
         }
     );
 
@@ -53,31 +54,32 @@
     const innnerPosition = ref(tempPosition.value);
     const innnerIsDark = ref(props.isDark??true);
     const innnerDisabled = ref(props.disabled??false);
-    const visible = ref(props.modelValue && !innnerDisabled.value);
+    const innerVisible = ref(props.visible??true);
 
-    const emit = defineEmits(['update:modelValue'])
-    watch(visible, (val)=>{
-        emit('update:modelValue', val);
-        val && (popper.value.offsetWidth === 0 ? setTimeout(showPosistion, 0) : showPosistion());
+    watch(innerVisible, (val)=>{
+        invokeShowPosistion();
+        props.updateVisible && props.updateVisible(val);
     })
     watch(innnerDisabled, (val)=>{
-        visible.value = false;
+        innerVisible.value = false;
     })
     watch(()=>props.content?.value, (val)=>{
-        visible.value && setTimeout(showPosistion, 5);
+        innerVisible.value && invokeShowPosistion();
     })
 
     const doShow = function(){
         if (!innnerDisabled.value) {
-            visible.value = true;
+            innerVisible.value = true;
         }
     }
 
     const doHidden = function(e : MouseEvent){
         if ((checkTarget.value && props.el.contains(e.target)) || (props.enterable && popper.value.contains(e.target as Node))) return;
-        style.value = {top: (-window.innerHeight) + 'px',left:0};
+        // style.value = {top: (-window.innerHeight) + 'px',left:0};
         // popper.value.remove();
-        visible.value = false;
+        if (props.isCanHide?.value !== false) {
+            innerVisible.value = false;
+        }
         innnerPosition.value = tempPosition.value;
     }
 
@@ -90,7 +92,14 @@
     const showPosistion = function(){
         postionFns[tempPosition.value] && (style.value = postionFns[tempPosition.value](props.el, popper.value, innnerPosition));
     }
+    const invokeShowPosistion = function(){
+        if (innerVisible.value) {
+            popper.value.offsetWidth === 0 ? setTimeout(showPosistion, 0) : showPosistion();
+            // 延时确保计算位置正确
+            setTimeout(()=>innerVisible.value && showPosistion(), 2);
+        };
+    }
     onMounted(()=>{
-        visible.value && (popper.value.offsetWidth === 0 ? setTimeout(showPosistion, 0) : showPosistion());
+        invokeShowPosistion();
     })
 </script>
\ No newline at end of file
diff --git a/src/module/popper/usePopper.ts b/src/module/popper/usePopper.ts
index 19265d2e..c60c44b2 100644
--- a/src/module/popper/usePopper.ts
+++ b/src/module/popper/usePopper.ts
@@ -1,4 +1,4 @@
-import { h, ref, render, watchEffect} from "vue";
+import { h, ref, render, watchEffect, watch} from "vue";
 import popper from "./index.vue";
 import { once } from "../../tools/domUtil";
 const EVENT_MAP : any = {
@@ -14,11 +14,20 @@ const usePopper = {
             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);
             })
         })
     },
diff --git a/src/module/tooltip/index.vue b/src/module/tooltip/index.vue
index e95188c9..e85205c4 100644
--- a/src/module/tooltip/index.vue
+++ b/src/module/tooltip/index.vue
@@ -5,7 +5,7 @@ export default defineComponent({
   name: "LayTooltip",
   props: {
     content: {
-      type: String,
+      type: [Number, String],
       required: true,
     },
     position: {
@@ -19,6 +19,14 @@ export default defineComponent({
     disabled: {
       type: Boolean,
       default: false,
+    },
+    visible: {
+      type: Boolean,
+      default: true
+    },
+    isCanHide: {
+      type: Boolean,
+      default: true
     }
   },
   render() {

From 06a31a3f24afcb1523aee7f080315ae6f1d6b658 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, 16 Dec 2021 00:00:45 +0800
Subject: [PATCH 14/22] =?UTF-8?q?=E6=96=B0=E5=A2=9E=20lay-comment=20?=
 =?UTF-8?q?=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 example/docs/zh-CN/components/badge.md  |  3 +++
 example/docs/zh-CN/components/button.md |  3 +++
 example/docs/zh-CN/components/color.md  |  3 +++
 example/src/assets/css/markdown.css     |  5 ++++
 example/src/components/LayComment.vue   | 31 +++++++++++++++++++++++++
 example/src/main.ts                     |  2 ++
 example/src/plugin/common-plugins.ts    |  2 ++
 example/src/plugin/create-comment.ts    | 30 ++++++++++++++++++++++++
 package.json                            |  4 ++--
 9 files changed, 81 insertions(+), 2 deletions(-)
 create mode 100644 example/src/components/LayComment.vue
 create mode 100644 example/src/plugin/create-comment.ts

diff --git a/example/docs/zh-CN/components/badge.md b/example/docs/zh-CN/components/badge.md
index 0f9abc2a..df4d61de 100644
--- a/example/docs/zh-CN/components/badge.md
+++ b/example/docs/zh-CN/components/badge.md
@@ -58,3 +58,6 @@ export default {
 | default  | 默认 |  非 `dot` 可用                                   |
 
 :::
+
+::: comment 1
+:::
\ No newline at end of file
diff --git a/example/docs/zh-CN/components/button.md b/example/docs/zh-CN/components/button.md
index 3e771d89..b1666915 100644
--- a/example/docs/zh-CN/components/button.md
+++ b/example/docs/zh-CN/components/button.md
@@ -305,3 +305,6 @@ export default {
 | click | 单击事件 | `--` |
 
 :::
+
+::: comment
+:::
\ No newline at end of file
diff --git a/example/docs/zh-CN/components/color.md b/example/docs/zh-CN/components/color.md
index 9aaac970..f62e3ab6 100644
--- a/example/docs/zh-CN/components/color.md
+++ b/example/docs/zh-CN/components/color.md
@@ -159,4 +159,7 @@ export default {
 | layui-bg-blue   | 蓝色 | class="layui-bg-blue"   |
 | layui-bg-black  | 雅黑 | class="layui-bg-black"  |
 
+:::
+
+::: comment
 :::
\ No newline at end of file
diff --git a/example/src/assets/css/markdown.css b/example/src/assets/css/markdown.css
index 72e2403f..db461523 100644
--- a/example/src/assets/css/markdown.css
+++ b/example/src/assets/css/markdown.css
@@ -1,3 +1,8 @@
+.utterances {
+  margin-top: 30px;
+  max-width: 100%;
+}
+
 html {
   line-height: 1.4;
   font-size: 16px;
diff --git a/example/src/components/LayComment.vue b/example/src/components/LayComment.vue
new file mode 100644
index 00000000..f3370cb5
--- /dev/null
+++ b/example/src/components/LayComment.vue
@@ -0,0 +1,31 @@
+<template>
+    <div id="comment"></div>
+</template>
+<script>
+export default {
+  name: 'Utterances',
+  props: {
+    id: {
+        type: Number,
+        default: 6
+    }
+  },
+  methods: {
+    initValine () {
+        const utterances = document.createElement('script');
+        utterances.type = 'text/javascript';
+        utterances.async = true;
+        utterances.setAttribute('issue-number', this.id)
+        utterances.setAttribute('theme','github-light')
+        utterances.setAttribute('repo',`layui-vue/layui-vue`)
+        utterances.crossorigin = 'anonymous';
+        utterances.src = 'https://utteranc.es/client.js';
+        window.document.getElementById('comment').appendChild(utterances);
+
+    }
+  },
+  mounted: function(){
+    this.initValine()
+  }
+}
+</script>
\ No newline at end of file
diff --git a/example/src/main.ts b/example/src/main.ts
index 0ffaa208..8f711035 100644
--- a/example/src/main.ts
+++ b/example/src/main.ts
@@ -6,6 +6,7 @@ import Layui from '../../src/index'
 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 './assets/css/index.css'
 
 export function createApp(): {
@@ -23,6 +24,7 @@ export function createApp(): {
     .component('LayCode', LayCode)
     .component('LaySearch', LaySearch)
     .component('LayTableBox', LayTableBox)
+    .component('LayComment', LayComment)
     .use(Layui)
 
   return { app, router }
diff --git a/example/src/plugin/common-plugins.ts b/example/src/plugin/common-plugins.ts
index 4e873453..bca114ec 100644
--- a/example/src/plugin/common-plugins.ts
+++ b/example/src/plugin/common-plugins.ts
@@ -8,6 +8,7 @@ import createTitle from './create-title'
 import createBlock from './create-block'
 import createDescribe from './create-describe'
 import createTable from './create-table'
+import createComment from './create-comment'
 import preWrapper from './pre-wrapper'
 
 const plugins = [
@@ -29,6 +30,7 @@ const plugins = [
         .use(...createBlock('block', ''))
         .use(...createTitle('title', ''))
         .use(...createDescribe('describe', ''))
+        .use(...createComment('comment', ''))
     },
   }),
 ] as any
diff --git a/example/src/plugin/create-comment.ts b/example/src/plugin/create-comment.ts
new file mode 100644
index 00000000..d882be0a
--- /dev/null
+++ b/example/src/plugin/create-comment.ts
@@ -0,0 +1,30 @@
+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) {
+          return `<lay-comment>`
+        } else {
+          return '</lay-comment>\n'
+        }
+      },
+    },
+  ]
+}
diff --git a/package.json b/package.json
index 5e5c341b..f2fe046b 100644
--- a/package.json
+++ b/package.json
@@ -30,14 +30,14 @@
   "peerDependencies": {
     "@layui/hooks-vue": "^0.1.6",
     "@layui/icons-vue": "^1.0.1",
-    "@layui/layer-vue": "^1.1.7",
+    "@layui/layer-vue": "^1.1.8",
     "vue": "^3.2.24",
     "vue-router": "^4.0.12"
   },
   "dependencies": {
     "@layui/hooks-vue": "^0.1.6",
     "@layui/icons-vue": "^1.0.1",
-    "@layui/layer-vue": "^1.1.7",
+    "@layui/layer-vue": "^1.1.8",
     "evtd": "^0.2.3",
     "vue": "^3.2.24",
     "vue-router": "^4.0.12"

From d2ae21522787bd7d345952e5f2df969036b60bd8 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, 16 Dec 2021 00:42:43 +0800
Subject: [PATCH 15/22] =?UTF-8?q?router=20hash=20-->=20web=20=E5=AE=8C?=
 =?UTF-8?q?=E5=96=84=20utterances=20=E9=9B=86=E6=88=90?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 example/docs/zh-CN/guide/changelog.md | 1 +
 example/src/components/LayComment.vue | 8 +-------
 example/src/main.ts                   | 4 +---
 example/src/router/index.ts           | 3 ++-
 example/src/router/zh-CN.ts           | 4 ++--
 example/src/view/guide.vue            | 6 +++---
 src/module/transfer/index.vue         | 4 ++--
 7 files changed, 12 insertions(+), 18 deletions(-)

diff --git a/example/docs/zh-CN/guide/changelog.md b/example/docs/zh-CN/guide/changelog.md
index b0ff34fc..7ca1eccf 100644
--- a/example/docs/zh-CN/guide/changelog.md
+++ b/example/docs/zh-CN/guide/changelog.md
@@ -19,6 +19,7 @@
           <li>[新增] tooltip 组件, 便捷的信息提示</li> 
           <li>[新增] input-number 组件, 数字输入框, 方便数字录入。</li> 
           <li>[加强] layer 组件 area 属性, 支持 字符串 与 数组 类型, 默认为 auto 宽高自适应。</li>
+          <li>[集成] utteranc.es 文档评论。</li>
           <li>[升级] layer-vue 1.1.7。</li>
         </ul> 
       </li>
diff --git a/example/src/components/LayComment.vue b/example/src/components/LayComment.vue
index f3370cb5..a192827f 100644
--- a/example/src/components/LayComment.vue
+++ b/example/src/components/LayComment.vue
@@ -4,18 +4,12 @@
 <script>
 export default {
   name: 'Utterances',
-  props: {
-    id: {
-        type: Number,
-        default: 6
-    }
-  },
   methods: {
     initValine () {
         const utterances = document.createElement('script');
         utterances.type = 'text/javascript';
         utterances.async = true;
-        utterances.setAttribute('issue-number', this.id)
+        utterances.setAttribute('issue-term', 'pathname')
         utterances.setAttribute('theme','github-light')
         utterances.setAttribute('repo',`layui-vue/layui-vue`)
         utterances.crossorigin = 'anonymous';
diff --git a/example/src/main.ts b/example/src/main.ts
index 8f711035..e505c1d1 100644
--- a/example/src/main.ts
+++ b/example/src/main.ts
@@ -14,9 +14,7 @@ export function createApp(): {
   router: Router
 } {
   const app =
-    import.meta.env.MODE === 'production'
-      ? createSSRApp(Layout)
-      : _createApp(Layout)
+    import.meta.env.MODE === 'production' ? createSSRApp(Layout) : _createApp(Layout)
   const router = createRouter()
 
   app
diff --git a/example/src/router/index.ts b/example/src/router/index.ts
index 1f2ea273..e02c2a20 100644
--- a/example/src/router/index.ts
+++ b/example/src/router/index.ts
@@ -1,6 +1,7 @@
 import {
   createRouter as _createRouter,
   createWebHashHistory,
+  createWebHistory,
   Router,
 } from 'vue-router'
 import zhCN from './zh-CN'
@@ -10,7 +11,7 @@ const routes = [...zhCN]
 export function createRouter(): Router {
   const baseUrl = import.meta.env.BASE_URL
   return _createRouter({
-    history: createWebHashHistory(baseUrl),
+    history: createWebHistory(baseUrl),
     routes: routes,
   })
 }
\ No newline at end of file
diff --git a/example/src/router/zh-CN.ts b/example/src/router/zh-CN.ts
index 11c89fe2..d5cf9f52 100644
--- a/example/src/router/zh-CN.ts
+++ b/example/src/router/zh-CN.ts
@@ -49,9 +49,9 @@ const zhCN = [
             meta: { title: '问题' },
           },
           {
-            path: '/zh-CN/guide/contribution',
+            path: '/zh-CN/guide/team',
             component: () => import('../../docs/zh-CN/guide/contribution.md'),
-            meta: { title: '贡献' },
+            meta: { title: '团队' },
           },
           {
             path: '/zh-CN/guide/norms',
diff --git a/example/src/view/guide.vue b/example/src/view/guide.vue
index 41ca6f0c..eed00e63 100644
--- a/example/src/view/guide.vue
+++ b/example/src/view/guide.vue
@@ -100,9 +100,9 @@ export default {
           },
           {
             id: 6,
-            title: '贡献',
-            subTitle: 'contribution',
-            path: '/zh-CN/guide/contribution',
+            title: '团队',
+            subTitle: 'team',
+            path: '/zh-CN/guide/team',
           }
         ],
       },
diff --git a/src/module/transfer/index.vue b/src/module/transfer/index.vue
index 8e565a7a..c9dc418f 100644
--- a/src/module/transfer/index.vue
+++ b/src/module/transfer/index.vue
@@ -44,7 +44,7 @@ const allLeftChange = function (checked: any) {
 
 watch(
   leftSelectedKeys,
-  function () {
+  () => {
     if (
       leftDataSource.value.length === leftSelectedKeys.value.length &&
       leftDataSource.value.length != 0
@@ -70,7 +70,7 @@ const allRightChange = function (checked: any) {
 
 watch(
   rightSelectedKeys,
-  function () {
+  () => {
     if (
       rightDataSource.value.length === rightSelectedKeys.value.length &&
       rightDataSource.value.length != 0

From 544e77b07e3b7cf10e61bf253f1cfb12bb0b25d9 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, 16 Dec 2021 00:50:11 +0800
Subject: [PATCH 16/22] =?UTF-8?q?=E6=9B=B4=E6=8D=A2=E8=AF=84=E8=AE=BA?=
 =?UTF-8?q?=E6=BA=90?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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

diff --git a/example/src/components/LayComment.vue b/example/src/components/LayComment.vue
index a192827f..f29f5732 100644
--- a/example/src/components/LayComment.vue
+++ b/example/src/components/LayComment.vue
@@ -11,7 +11,7 @@ export default {
         utterances.async = true;
         utterances.setAttribute('issue-term', 'pathname')
         utterances.setAttribute('theme','github-light')
-        utterances.setAttribute('repo',`layui-vue/layui-vue`)
+        utterances.setAttribute('repo',`layui-vue/layui-doc`)
         utterances.crossorigin = 'anonymous';
         utterances.src = 'https://utteranc.es/client.js';
         window.document.getElementById('comment').appendChild(utterances);

From 9a3ea4363bb6c050b539ddabf33b0b3f1db2f0f0 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, 16 Dec 2021 10:20:30 +0800
Subject: [PATCH 17/22] =?UTF-8?q?=E5=8D=87=E7=BA=A7=20layer=201.1.9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/package.json b/package.json
index f2fe046b..bcbc8d20 100644
--- a/package.json
+++ b/package.json
@@ -30,14 +30,14 @@
   "peerDependencies": {
     "@layui/hooks-vue": "^0.1.6",
     "@layui/icons-vue": "^1.0.1",
-    "@layui/layer-vue": "^1.1.8",
+    "@layui/layer-vue": "^1.1.9",
     "vue": "^3.2.24",
     "vue-router": "^4.0.12"
   },
   "dependencies": {
     "@layui/hooks-vue": "^0.1.6",
     "@layui/icons-vue": "^1.0.1",
-    "@layui/layer-vue": "^1.1.8",
+    "@layui/layer-vue": "^1.1.9",
     "evtd": "^0.2.3",
     "vue": "^3.2.24",
     "vue-router": "^4.0.12"

From 86350f0ec408f1560c820eb670283b41363cc314 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, 16 Dec 2021 17:57:59 +0800
Subject: [PATCH 18/22] =?UTF-8?q?=E8=A1=A5=E5=85=A8=20md=20comment=20?=
 =?UTF-8?q?=E6=8F=92=E4=BB=B6?=
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/badge.md       | 2 +-
 example/docs/zh-CN/components/block.md       | 3 +++
 example/docs/zh-CN/components/breadcrumb.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/colorPicker.md | 3 +++
 example/docs/zh-CN/components/confirm.md     | 3 +++
 example/docs/zh-CN/components/container.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       | 3 +++
 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        | 3 +++
 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/docs/zh-CN/guide/changelog.md        | 5 +++--
 example/docs/zh-CN/guide/problem.md          | 2 +-
 44 files changed, 128 insertions(+), 4 deletions(-)

diff --git a/example/docs/zh-CN/components/animation.md b/example/docs/zh-CN/components/animation.md
index 6fae12dd..495869be 100644
--- a/example/docs/zh-CN/components/animation.md
+++ b/example/docs/zh-CN/components/animation.md
@@ -91,4 +91,7 @@ export default {
 | layui-anim-rotate                 | 360 度旋转   | `layui-anim layui-anim-rotate`                 |
 | layui-anim-rotate layui-anim-loop | 循环动画     | `layui-anim layui-anim-rotate layui-anim-loop` |
 
+:::
+
+::: comment
 :::
\ No newline at end of file
diff --git a/example/docs/zh-CN/components/avatar.md b/example/docs/zh-CN/components/avatar.md
index 4726a96f..618cd37c 100644
--- a/example/docs/zh-CN/components/avatar.md
+++ b/example/docs/zh-CN/components/avatar.md
@@ -92,3 +92,6 @@ export default {
 | radius | 圆形 | `true` `false` |
 
 :::
+
+::: comment
+:::
\ No newline at end of file
diff --git a/example/docs/zh-CN/components/badge.md b/example/docs/zh-CN/components/badge.md
index df4d61de..72cb6320 100644
--- a/example/docs/zh-CN/components/badge.md
+++ b/example/docs/zh-CN/components/badge.md
@@ -59,5 +59,5 @@ export default {
 
 :::
 
-::: comment 1
+::: comment
 :::
\ No newline at end of file
diff --git a/example/docs/zh-CN/components/block.md b/example/docs/zh-CN/components/block.md
index 1d2500a4..043b8f51 100644
--- a/example/docs/zh-CN/components/block.md
+++ b/example/docs/zh-CN/components/block.md
@@ -57,3 +57,6 @@ export default {
 | nm   | 灰色样式    | --              |
 
 :::
+
+::: comment
+:::
\ No newline at end of file
diff --git a/example/docs/zh-CN/components/breadcrumb.md b/example/docs/zh-CN/components/breadcrumb.md
index 0dc7e11a..5cead785 100644
--- a/example/docs/zh-CN/components/breadcrumb.md
+++ b/example/docs/zh-CN/components/breadcrumb.md
@@ -100,3 +100,6 @@ export default {
 | default | 默认插槽 | `--`   |
 
 :::
+
+::: comment
+:::
\ No newline at end of file
diff --git a/example/docs/zh-CN/components/card.md b/example/docs/zh-CN/components/card.md
index 6a85f720..020d1a9e 100644
--- a/example/docs/zh-CN/components/card.md
+++ b/example/docs/zh-CN/components/card.md
@@ -128,3 +128,6 @@ export default {
 | body   | 内容插槽 | --     |
 
 :::
+
+::: comment
+:::
\ No newline at end of file
diff --git a/example/docs/zh-CN/components/carousel.md b/example/docs/zh-CN/components/carousel.md
index b5b841f4..a513e16f 100644
--- a/example/docs/zh-CN/components/carousel.md
+++ b/example/docs/zh-CN/components/carousel.md
@@ -139,3 +139,6 @@ export default {
 | change | 切换回调 | id     |
 
 :::
+
+::: comment
+:::
\ No newline at end of file
diff --git a/example/docs/zh-CN/components/checkbox.md b/example/docs/zh-CN/components/checkbox.md
index 77e641ef..8376eeed 100644
--- a/example/docs/zh-CN/components/checkbox.md
+++ b/example/docs/zh-CN/components/checkbox.md
@@ -210,3 +210,6 @@ export default {
 | change | 切换事件 | isChecked : 当前状态 |
 
 :::
+
+::: comment
+:::
\ No newline at end of file
diff --git a/example/docs/zh-CN/components/collapse.md b/example/docs/zh-CN/components/collapse.md
index 1fe5cabe..3de704bf 100644
--- a/example/docs/zh-CN/components/collapse.md
+++ b/example/docs/zh-CN/components/collapse.md
@@ -206,3 +206,6 @@ export default {
 | change   | 折叠面板变化触发事件   | (`id`, `isShow`, activeValues)<br> <br> `id`: (`number` / `string`)对应当前操作面板的值 <br> <br> `isShow`: (`boolean`)`true` -> 展开, `false` -> 折叠 <br> <br> `activeValues`: (`Array`)当前状态为展开的面板值集合|
 
 :::
+
+::: comment
+:::
\ No newline at end of file
diff --git a/example/docs/zh-CN/components/colorPicker.md b/example/docs/zh-CN/components/colorPicker.md
index cbb1b2dd..cf6176c7 100644
--- a/example/docs/zh-CN/components/colorPicker.md
+++ b/example/docs/zh-CN/components/colorPicker.md
@@ -28,3 +28,6 @@ export default {
 | showSearch | 启用搜索 | --  |
 
 :::
+
+::: comment
+:::
\ No newline at end of file
diff --git a/example/docs/zh-CN/components/confirm.md b/example/docs/zh-CN/components/confirm.md
index 93c69c7b..ba92fcaf 100644
--- a/example/docs/zh-CN/components/confirm.md
+++ b/example/docs/zh-CN/components/confirm.md
@@ -72,4 +72,7 @@ layer.confirm(content, options)
 | content | 内容 | -- |
 | options | 选配属性 | { time: 加载时长, btn: 按钮组 }   |
 
+:::
+
+::: comment
 :::
\ No newline at end of file
diff --git a/example/docs/zh-CN/components/container.md b/example/docs/zh-CN/components/container.md
index c6809bf2..eb146a36 100644
--- a/example/docs/zh-CN/components/container.md
+++ b/example/docs/zh-CN/components/container.md
@@ -75,3 +75,6 @@ export default {
 | fluid | 流模式 | `true` `false` |
 
 :::
+
+::: comment
+:::
\ No newline at end of file
diff --git a/example/docs/zh-CN/components/dropdown.md b/example/docs/zh-CN/components/dropdown.md
index 7db551d8..930126cc 100644
--- a/example/docs/zh-CN/components/dropdown.md
+++ b/example/docs/zh-CN/components/dropdown.md
@@ -88,3 +88,6 @@ export default {
 | content | 下拉内容 | --     |
 
 :::
+
+::: comment
+:::
\ No newline at end of file
diff --git a/example/docs/zh-CN/components/empty.md b/example/docs/zh-CN/components/empty.md
index beda3975..b877f41f 100644
--- a/example/docs/zh-CN/components/empty.md
+++ b/example/docs/zh-CN/components/empty.md
@@ -54,3 +54,6 @@ export default {
 | description | 描述信息 | --     |
 
 :::
+
+::: comment
+:::
\ No newline at end of file
diff --git a/example/docs/zh-CN/components/field.md b/example/docs/zh-CN/components/field.md
index 13b3a49a..a4c73024 100644
--- a/example/docs/zh-CN/components/field.md
+++ b/example/docs/zh-CN/components/field.md
@@ -68,3 +68,6 @@ export default {
 | title | 标题        | --              |
 
 :::
+
+::: comment
+:::
\ No newline at end of file
diff --git a/example/docs/zh-CN/components/form.md b/example/docs/zh-CN/components/form.md
index 289d40c4..f87c90eb 100644
--- a/example/docs/zh-CN/components/form.md
+++ b/example/docs/zh-CN/components/form.md
@@ -74,3 +74,6 @@ export default {
 | label | 标题名称    | --              |
 
 :::
+
+::: comment
+:::
\ No newline at end of file
diff --git a/example/docs/zh-CN/components/grid.md b/example/docs/zh-CN/components/grid.md
index 9d366c56..d4dbd089 100644
--- a/example/docs/zh-CN/components/grid.md
+++ b/example/docs/zh-CN/components/grid.md
@@ -164,3 +164,6 @@ export default {
 | lg-offset | 偏移 - 大型屏幕 (桌面 ≥1200px) | 0 - 24 |
 
 :::
+
+::: comment
+:::
\ No newline at end of file
diff --git a/example/docs/zh-CN/components/icon.md b/example/docs/zh-CN/components/icon.md
index 22e19ff2..f873c389 100644
--- a/example/docs/zh-CN/components/icon.md
+++ b/example/docs/zh-CN/components/icon.md
@@ -1127,3 +1127,6 @@ npm install @layui/icons-vue
 | size   | 尺寸 | --                |
 
 :::
+
+::: comment
+:::
\ No newline at end of file
diff --git a/example/docs/zh-CN/components/iconPicker.md b/example/docs/zh-CN/components/iconPicker.md
index e9d0b09b..f2536026 100644
--- a/example/docs/zh-CN/components/iconPicker.md
+++ b/example/docs/zh-CN/components/iconPicker.md
@@ -110,3 +110,6 @@ export default {
 | showSearch | 启用搜索 | --  |
 
 :::
+
+::: comment
+:::
\ No newline at end of file
diff --git a/example/docs/zh-CN/components/input.md b/example/docs/zh-CN/components/input.md
index 46197f5b..53a4904c 100644
--- a/example/docs/zh-CN/components/input.md
+++ b/example/docs/zh-CN/components/input.md
@@ -129,3 +129,6 @@ export default {
 | blur  | 原生 blur 事件  | --               |
 
 :::
+
+::: comment
+:::
\ No newline at end of file
diff --git a/example/docs/zh-CN/components/inputNumber.md b/example/docs/zh-CN/components/inputNumber.md
index c19c1cca..12891786 100644
--- a/example/docs/zh-CN/components/inputNumber.md
+++ b/example/docs/zh-CN/components/inputNumber.md
@@ -137,3 +137,6 @@
 | change  | 值更改触发事件   | (value: number) |
 
 :::
+
+::: comment
+:::
\ No newline at end of file
diff --git a/example/docs/zh-CN/components/layout.md b/example/docs/zh-CN/components/layout.md
index 8d940cdc..3a3cc825 100644
--- a/example/docs/zh-CN/components/layout.md
+++ b/example/docs/zh-CN/components/layout.md
@@ -184,3 +184,6 @@ export default {
 | lay-footer | 底部 | --  |
 
 :::
+
+::: comment
+:::
\ No newline at end of file
diff --git a/example/docs/zh-CN/components/line.md b/example/docs/zh-CN/components/line.md
index 19676f0a..5ac07d88 100644
--- a/example/docs/zh-CN/components/line.md
+++ b/example/docs/zh-CN/components/line.md
@@ -41,3 +41,6 @@ export default {
 | theme | 主题        | `orange` `green` `cyan` `blue` `black` `gray` |
 
 :::
+
+::: comment
+:::
\ No newline at end of file
diff --git a/example/docs/zh-CN/components/load.md b/example/docs/zh-CN/components/load.md
index cb9067ff..d717a49b 100644
--- a/example/docs/zh-CN/components/load.md
+++ b/example/docs/zh-CN/components/load.md
@@ -122,4 +122,7 @@ layer.load(load, options)
 | load | 组件类型 | `1` `2` `3` |
 | options | 选配属性 | { time: 加载时长 }   |
 
+:::
+
+::: comment
 :::
\ No newline at end of file
diff --git a/example/docs/zh-CN/components/menu.md b/example/docs/zh-CN/components/menu.md
index a8f7b7ea..26351f35 100644
--- a/example/docs/zh-CN/components/menu.md
+++ b/example/docs/zh-CN/components/menu.md
@@ -99,3 +99,6 @@ export default {
 | title | 菜单标题 | --   |
 
 :::
+
+::: comment
+:::
\ No newline at end of file
diff --git a/example/docs/zh-CN/components/modal.md b/example/docs/zh-CN/components/modal.md
index 591943d5..bf3fe7c0 100644
--- a/example/docs/zh-CN/components/modal.md
+++ b/example/docs/zh-CN/components/modal.md
@@ -302,3 +302,6 @@ export default {
 | isOutAnim       | 关闭动画      | `true` `false`             |
 
 :::
+
+::: comment
+:::
\ No newline at end of file
diff --git a/example/docs/zh-CN/components/msg.md b/example/docs/zh-CN/components/msg.md
index 2b2d507d..34e848a2 100644
--- a/example/docs/zh-CN/components/msg.md
+++ b/example/docs/zh-CN/components/msg.md
@@ -90,4 +90,7 @@ layer.msg(content, options)
 | content | 消息内容 | -- |
 | options | 选配属性 | { time: 加载时长, icon: 图标 }   |
 
+:::
+
+::: comment
 :::
\ No newline at end of file
diff --git a/example/docs/zh-CN/components/page.md b/example/docs/zh-CN/components/page.md
index 5e8bb3c1..51f60a7c 100644
--- a/example/docs/zh-CN/components/page.md
+++ b/example/docs/zh-CN/components/page.md
@@ -232,3 +232,6 @@ export default {
 | next | 下一页 | 下一页 |
 
 :::
+
+::: comment
+:::
\ No newline at end of file
diff --git a/example/docs/zh-CN/components/panel.md b/example/docs/zh-CN/components/panel.md
index bb65a5e4..218d95e1 100644
--- a/example/docs/zh-CN/components/panel.md
+++ b/example/docs/zh-CN/components/panel.md
@@ -31,3 +31,6 @@ export default {
 | default | 默认插槽 | --     |
 
 :::
+
+::: comment
+:::
\ No newline at end of file
diff --git a/example/docs/zh-CN/components/progress.md b/example/docs/zh-CN/components/progress.md
index c94f64e1..e60d2f13 100644
--- a/example/docs/zh-CN/components/progress.md
+++ b/example/docs/zh-CN/components/progress.md
@@ -125,3 +125,6 @@ export default {
 | showText | 展示描述 | --                                            |
 
 :::
+
+::: comment
+:::
\ No newline at end of file
diff --git a/example/docs/zh-CN/components/radio.md b/example/docs/zh-CN/components/radio.md
index e57707fd..eb260b6c 100644
--- a/example/docs/zh-CN/components/radio.md
+++ b/example/docs/zh-CN/components/radio.md
@@ -117,3 +117,6 @@ export default {
 | change | 切换事件 | current : 当前值 |
 
 :::
+
+::: comment
+:::
\ No newline at end of file
diff --git a/example/docs/zh-CN/components/rate.md b/example/docs/zh-CN/components/rate.md
index ac5e645f..2ac0cd43 100644
--- a/example/docs/zh-CN/components/rate.md
+++ b/example/docs/zh-CN/components/rate.md
@@ -305,3 +305,6 @@ export default {
 | select  | 选中之后触发事件   | (value: number) |
 
 :::
+
+::: comment
+:::
\ No newline at end of file
diff --git a/example/docs/zh-CN/components/select.md b/example/docs/zh-CN/components/select.md
index 8765bf92..1e776edf 100644
--- a/example/docs/zh-CN/components/select.md
+++ b/example/docs/zh-CN/components/select.md
@@ -100,3 +100,6 @@ export default {
 | change | 切换事件    | value           |
 
 :::
+
+::: comment
+:::
\ No newline at end of file
diff --git a/example/docs/zh-CN/components/slider.md b/example/docs/zh-CN/components/slider.md
index 29310cc7..d1565b09 100644
--- a/example/docs/zh-CN/components/slider.md
+++ b/example/docs/zh-CN/components/slider.md
@@ -40,4 +40,7 @@ export default {
 }
 </script>
 
+:::
+
+::: comment
 :::
\ No newline at end of file
diff --git a/example/docs/zh-CN/components/switch.md b/example/docs/zh-CN/components/switch.md
index 3ee8a871..9218ecf0 100644
--- a/example/docs/zh-CN/components/switch.md
+++ b/example/docs/zh-CN/components/switch.md
@@ -133,3 +133,6 @@ export default {
 | change | 切换事件 | current : 当前值 |
 
 :::
+
+::: comment
+:::
\ No newline at end of file
diff --git a/example/docs/zh-CN/components/tab.md b/example/docs/zh-CN/components/tab.md
index 68bae84e..10707744 100644
--- a/example/docs/zh-CN/components/tab.md
+++ b/example/docs/zh-CN/components/tab.md
@@ -243,3 +243,6 @@ export default {
 | close  | 关闭事件 | id   |
 
 :::
+
+::: comment
+:::
\ No newline at end of file
diff --git a/example/docs/zh-CN/components/table.md b/example/docs/zh-CN/components/table.md
index 38b221d4..d30dd32f 100644
--- a/example/docs/zh-CN/components/table.md
+++ b/example/docs/zh-CN/components/table.md
@@ -321,4 +321,7 @@ export default {
 | key | 数据字段 | --   |
 | customSlot | 插槽名称 | --   |
 | width | 宽度 | --   |
+:::
+
+::: comment
 :::
\ No newline at end of file
diff --git a/example/docs/zh-CN/components/textarea.md b/example/docs/zh-CN/components/textarea.md
index cc3c8a31..ba43e165 100644
--- a/example/docs/zh-CN/components/textarea.md
+++ b/example/docs/zh-CN/components/textarea.md
@@ -108,3 +108,6 @@ export default {
 | blur  | 原生 blur 事件  | --               |
 
 :::
+
+::: comment
+:::
\ No newline at end of file
diff --git a/example/docs/zh-CN/components/timeline.md b/example/docs/zh-CN/components/timeline.md
index 43b50363..5fa7a8e2 100644
--- a/example/docs/zh-CN/components/timeline.md
+++ b/example/docs/zh-CN/components/timeline.md
@@ -83,3 +83,6 @@ export default {
 | title  | 标题     | --  |
 
 :::
+
+::: comment
+:::
\ No newline at end of file
diff --git a/example/docs/zh-CN/components/tooltip.md b/example/docs/zh-CN/components/tooltip.md
index f9f2c675..30889db2 100644
--- a/example/docs/zh-CN/components/tooltip.md
+++ b/example/docs/zh-CN/components/tooltip.md
@@ -125,3 +125,6 @@
 | isCanHide   | 控制是否可以隐藏,可参考`lay-slider`组件 | `true`(默认值)、`false`   ||
 
 :::
+
+::: comment
+:::
\ No newline at end of file
diff --git a/example/docs/zh-CN/components/transfer.md b/example/docs/zh-CN/components/transfer.md
index ba2f79a3..7a8843f5 100644
--- a/example/docs/zh-CN/components/transfer.md
+++ b/example/docs/zh-CN/components/transfer.md
@@ -106,3 +106,6 @@ export default {
 | item | 列表项      | { data }        |
 
 :::
+
+::: comment
+:::
\ No newline at end of file
diff --git a/example/docs/zh-CN/components/tree.md b/example/docs/zh-CN/components/tree.md
index acdd05eb..581d7f85 100644
--- a/example/docs/zh-CN/components/tree.md
+++ b/example/docs/zh-CN/components/tree.md
@@ -253,3 +253,6 @@ function handleClick(node) {
 | node-click | 节点 click 事件 | --              |
 
 :::
+
+::: comment
+:::
\ No newline at end of file
diff --git a/example/docs/zh-CN/guide/changelog.md b/example/docs/zh-CN/guide/changelog.md
index 7ca1eccf..0d7a594b 100644
--- a/example/docs/zh-CN/guide/changelog.md
+++ b/example/docs/zh-CN/guide/changelog.md
@@ -16,9 +16,10 @@
       <li> 
         <h3>0.2.8 <span class="layui-badge-rim">2021-12-15</span></h3> 
         <ul> 
-          <li>[新增] tooltip 组件, 便捷的信息提示</li> 
-          <li>[新增] input-number 组件, 数字输入框, 方便数字录入。</li> 
+          <li>[新增] tooltip 警告提示，展现需要关注的信息。</li> 
+          <li>[新增] input-number 数字输入框, 通过鼠标或键盘，输入范围内的数值。</li> 
           <li>[加强] layer 组件 area 属性, 支持 字符串 与 数组 类型, 默认为 auto 宽高自适应。</li>
+          <li>[修复] layer 组件 body 禁用拖动, 仅支持标题拖动窗体。</li>
           <li>[集成] utteranc.es 文档评论。</li>
           <li>[升级] layer-vue 1.1.7。</li>
         </ul> 
diff --git a/example/docs/zh-CN/guide/problem.md b/example/docs/zh-CN/guide/problem.md
index ddcf1b94..48a6c510 100644
--- a/example/docs/zh-CN/guide/problem.md
+++ b/example/docs/zh-CN/guide/problem.md
@@ -1,2 +1,2 @@
 ::: title 常见问题
-:::
+:::
\ No newline at end of file

From 77e6098de8e33d4af3989060c68b77cb0a8cd780 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, 16 Dec 2021 21:54:30 +0800
Subject: [PATCH 19/22] =?UTF-8?q?=E5=8D=87=E7=BA=A7=20vue=203.2.26?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 example/docs/zh-CN/guide/changelog.md                   | 9 ++++++---
 example/docs/zh-CN/guide/{contribution.md => member.md} | 0
 example/src/components/LayComment.vue                   | 1 -
 example/src/components/LayTableBox.vue                  | 4 ----
 example/src/router/zh-CN.ts                             | 4 ++--
 example/src/view/guide.vue                              | 4 ++--
 package.json                                            | 8 ++++----
 7 files changed, 14 insertions(+), 16 deletions(-)
 rename example/docs/zh-CN/guide/{contribution.md => member.md} (100%)

diff --git a/example/docs/zh-CN/guide/changelog.md b/example/docs/zh-CN/guide/changelog.md
index 0d7a594b..c6e6bcd1 100644
--- a/example/docs/zh-CN/guide/changelog.md
+++ b/example/docs/zh-CN/guide/changelog.md
@@ -18,10 +18,13 @@
         <ul> 
           <li>[新增] tooltip 警告提示，展现需要关注的信息。</li> 
           <li>[新增] input-number 数字输入框, 通过鼠标或键盘，输入范围内的数值。</li> 
-          <li>[加强] layer 组件 area 属性, 支持 字符串 与 数组 类型, 默认为 auto 宽高自适应。</li>
+          <li>[新增] layer 组件 isHtmlFangement 属性，函数调用时，用于解析 html 片段。</li>
+          <li>[新增] layer 组件 resize 属性, 开启弹层尺寸拉伸, 常用于 页面层 与 Iframe 层。</li>
+          <li>[加强] layer 组件 area 属性, 支持 字符串 与 数组 类型, 默认 auto 宽高根据内容自适应。</li>
           <li>[修复] layer 组件 body 禁用拖动, 仅支持标题拖动窗体。</li>
-          <li>[集成] utteranc.es 文档评论。</li>
-          <li>[升级] layer-vue 1.1.7。</li>
+          <li>[集成] utteranc.es 插件, 基于 issues 提供为文档提供留言能力。</li>
+          <li>[升级] layer-vue 1.2.0, 更稳定的 layer 版本。</li>
+          <li>[升级] vue 3.2.26 版本。</li>
         </ul> 
       </li>
     </ul>
diff --git a/example/docs/zh-CN/guide/contribution.md b/example/docs/zh-CN/guide/member.md
similarity index 100%
rename from example/docs/zh-CN/guide/contribution.md
rename to example/docs/zh-CN/guide/member.md
diff --git a/example/src/components/LayComment.vue b/example/src/components/LayComment.vue
index f29f5732..c65747f8 100644
--- a/example/src/components/LayComment.vue
+++ b/example/src/components/LayComment.vue
@@ -15,7 +15,6 @@ export default {
         utterances.crossorigin = 'anonymous';
         utterances.src = 'https://utteranc.es/client.js';
         window.document.getElementById('comment').appendChild(utterances);
-
     }
   },
   mounted: function(){
diff --git a/example/src/components/LayTableBox.vue b/example/src/components/LayTableBox.vue
index 9c538722..62f94d2f 100644
--- a/example/src/components/LayTableBox.vue
+++ b/example/src/components/LayTableBox.vue
@@ -12,11 +12,9 @@
   border-left: 1px solid whitesmoke;
   border-radius: 4px;
 }
-
 .lay-table-box table tbody {
   border-bottom: 1px solid whitesmoke;
 }
-
 .lay-table-box table th,
 .lay-table-box table td {
   font-size: 14px;
@@ -27,14 +25,12 @@
   padding: 0 10px; /*内边距*/
   padding-left: 28px;
 }
-
 .lay-table-box table th {
   color: #666;
   font-weight: 500;
   white-space: nowrap; /*表头内容强制在一行显示*/
   background-color: #fafafa;
 }
-
 .lay-table-box table td {
   white-space: nowrap;
 }
diff --git a/example/src/router/zh-CN.ts b/example/src/router/zh-CN.ts
index d5cf9f52..8a546306 100644
--- a/example/src/router/zh-CN.ts
+++ b/example/src/router/zh-CN.ts
@@ -49,8 +49,8 @@ const zhCN = [
             meta: { title: '问题' },
           },
           {
-            path: '/zh-CN/guide/team',
-            component: () => import('../../docs/zh-CN/guide/contribution.md'),
+            path: '/zh-CN/guide/member',
+            component: () => import('../../docs/zh-CN/guide/member.md'),
             meta: { title: '团队' },
           },
           {
diff --git a/example/src/view/guide.vue b/example/src/view/guide.vue
index eed00e63..6bae2697 100644
--- a/example/src/view/guide.vue
+++ b/example/src/view/guide.vue
@@ -101,8 +101,8 @@ export default {
           {
             id: 6,
             title: '团队',
-            subTitle: 'team',
-            path: '/zh-CN/guide/team',
+            subTitle: 'member',
+            path: '/zh-CN/guide/member',
           }
         ],
       },
diff --git a/package.json b/package.json
index bcbc8d20..482b0609 100644
--- a/package.json
+++ b/package.json
@@ -31,7 +31,7 @@
     "@layui/hooks-vue": "^0.1.6",
     "@layui/icons-vue": "^1.0.1",
     "@layui/layer-vue": "^1.1.9",
-    "vue": "^3.2.24",
+    "vue": "^3.2.26",
     "vue-router": "^4.0.12"
   },
   "dependencies": {
@@ -39,7 +39,7 @@
     "@layui/icons-vue": "^1.0.1",
     "@layui/layer-vue": "^1.1.9",
     "evtd": "^0.2.3",
-    "vue": "^3.2.24",
+    "vue": "^3.2.26",
     "vue-router": "^4.0.12"
   },
   "devDependencies": {
@@ -51,8 +51,8 @@
     "@types/markdown-it-container": "^2.0.4",
     "@types/node": "^16.11.9",
     "@vitejs/plugin-vue": "^1.9.3",
-    "@vue/compiler-sfc": "^3.2.24",
-    "@vue/server-renderer": "^3.2.24",
+    "@vue/compiler-sfc": "^3.2.26",
+    "@vue/server-renderer": "^3.2.26",
     "escape-html": "^1.0.3",
     "less": "^4.1.2",
     "markdown-it-container": "^3.0.0",

From 43e4ab7adea2c7709fb3e6dcc2aa25f310e5c910 Mon Sep 17 00:00:00 2001
From: xumi <hmxing1105@163.com>
Date: Thu, 16 Dec 2021 23:01:18 +0800
Subject: [PATCH 20/22] =?UTF-8?q?=F0=9F=90=9B[=E4=BF=AE=E5=A4=8D]=E4=B8=8B?=
 =?UTF-8?q?=E6=8B=89=E8=8F=9C=E5=8D=95=E8=A7=A6=E5=8F=91=E6=96=B9=E5=BC=8F?=
 =?UTF-8?q?=E4=B8=BAhover=E6=97=B6=EF=BC=8C=E7=A7=BB=E5=8A=A8=E4=B8=8D?=
 =?UTF-8?q?=E5=88=B0=E8=8F=9C=E5=8D=95=E5=AD=90=E9=A1=B9=E7=9A=84=E9=97=AE?=
 =?UTF-8?q?=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/css/layui.css | 14 +++++++++++---
 1 file changed, 11 insertions(+), 3 deletions(-)

diff --git a/src/css/layui.css b/src/css/layui.css
index 060d3eaa..ae134dd4 100644
--- a/src/css/layui.css
+++ b/src/css/layui.css
@@ -2610,16 +2610,24 @@ body .layui-table-tips .layui-layer-content {
   display: none;
   position: absolute;
   left: 0;
-  top: 42px;
+  top: 38px;
   z-index: 899;
   min-width: 100%;
-  border: 1px solid #eee;
   max-height: 360px;
   overflow-y: auto;
   background-color: #fff;
-  border-radius: 4px;
   box-sizing: border-box;
 }
+.layui-dropdown dl::before{
+  content: ' ';
+  display: block;
+  height: 4px;
+  width: 100%;
+}
+.layui-dropdown dl>.layui-dropdown-menu{
+  border: 1px solid #eee;
+  border-radius: 4px;
+}
 
 .layui-dropdown-up dl {
   display: block;

From 7873134d81488fdceff5680fb3abe8661caa3528 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: Fri, 17 Dec 2021 00:07:15 +0800
Subject: [PATCH 21/22] =?UTF-8?q?=F0=9F=90=9B=20=E4=BF=AE=E5=A4=8D=20icon-?=
 =?UTF-8?q?picker=20=E9=80=89=E6=8B=A9=E5=9B=BE=E6=A0=87=E8=87=AA=E5=8A=A8?=
 =?UTF-8?q?=E9=9A=90=E8=97=8F=E5=86=85=E5=AE=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 example/docs/zh-CN/guide/changelog.md |  1 +
 src/module/dropdown/index.vue         | 87 +++++++++++++++------------
 src/module/iconPicker/index.vue       | 21 ++++---
 3 files changed, 60 insertions(+), 49 deletions(-)

diff --git a/example/docs/zh-CN/guide/changelog.md b/example/docs/zh-CN/guide/changelog.md
index c6e6bcd1..7558dbaf 100644
--- a/example/docs/zh-CN/guide/changelog.md
+++ b/example/docs/zh-CN/guide/changelog.md
@@ -22,6 +22,7 @@
           <li>[新增] layer 组件 resize 属性, 开启弹层尺寸拉伸, 常用于 页面层 与 Iframe 层。</li>
           <li>[加强] layer 组件 area 属性, 支持 字符串 与 数组 类型, 默认 auto 宽高根据内容自适应。</li>
           <li>[修复] layer 组件 body 禁用拖动, 仅支持标题拖动窗体。</li>
+          <li>[修复] dropdown 组件触发方式为 hover 时，移动不到菜单子项的问题</li>
           <li>[集成] utteranc.es 插件, 基于 issues 提供为文档提供留言能力。</li>
           <li>[升级] layer-vue 1.2.0, 更稳定的 layer 版本。</li>
           <li>[升级] vue 3.2.26 版本。</li>
diff --git a/src/module/dropdown/index.vue b/src/module/dropdown/index.vue
index 4eded2f2..8271c843 100644
--- a/src/module/dropdown/index.vue
+++ b/src/module/dropdown/index.vue
@@ -1,3 +1,49 @@
+<script lang="ts">
+export default {
+  name: "LayDropdown"
+}
+</script>
+
+<script setup lang="ts">
+import { defineProps, provide, ref, watch } from 'vue'
+import { useClickOutside } from '@layui/hooks-vue'
+
+const dropdownRef = ref<null | HTMLElement>(null)
+const isClickOutside = useClickOutside(dropdownRef)
+
+export interface LayDropdownProps {
+    trigger?: string
+}
+
+const props = withDefaults(defineProps<LayDropdownProps>(),{
+    trigger: 'click',
+})
+
+const openState = ref(false)
+
+const open = function () {
+  openState.value = true
+}
+
+const hide = function () {
+  openState.value = false
+}
+
+const toggle = function () {
+  openState.value = !openState.value
+}
+
+watch(isClickOutside, () => {
+  if (isClickOutside.value) {
+    openState.value = false
+  }
+})
+
+provide('openState', openState)
+
+defineExpose({ open, hide, toggle });
+</script>
+
 <template>
   <div
     v-if="trigger === 'click'"
@@ -30,43 +76,4 @@
       </ul>
     </dl>
   </div>
-</template>
-
-<script setup name="LaySelect" lang="ts">
-import { defineProps, provide, ref, watch } from 'vue'
-import { useClickOutside } from '@layui/hooks-vue'
-
-const dropdownRef = ref<null | HTMLElement>(null)
-const isClickOutside = useClickOutside(dropdownRef)
-
-const props = withDefaults(
-  defineProps<{
-    trigger?: string
-  }>(),
-  {
-    trigger: 'click',
-  }
-)
-
-const openState = ref(false)
-
-const open = function () {
-  openState.value = true
-}
-
-const hide = function () {
-  openState.value = false
-}
-
-const toggle = function () {
-  openState.value = !openState.value
-}
-
-watch(isClickOutside, () => {
-  if (isClickOutside.value) {
-    openState.value = false
-  }
-})
-
-provide('openState', openState)
-</script>
+</template>
\ No newline at end of file
diff --git a/src/module/iconPicker/index.vue b/src/module/iconPicker/index.vue
index d58d6143..b7b4afec 100644
--- a/src/module/iconPicker/index.vue
+++ b/src/module/iconPicker/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <lay-dropdown>
+  <lay-dropdown ref="dropdownRef">
     <div
       class="
         layui-inline layui-border-box layui-iconpicker layui-iconpicker-split
@@ -85,17 +85,18 @@
 import { defineProps, Ref, ref } from 'vue'
 import { LayIconList as icons } from "@layui/icons-vue"
 
-const props = withDefaults(
-  defineProps<{
-    modelValue?: string
-    page?: boolean
+export interface LayIconPickerProps {
+    page?: boolean,
+    modelValue?: string,
     showSearch?: boolean
-  }>(),
-  {
+}
+
+const props = withDefaults(defineProps<LayIconPickerProps>(),{
     modelValue: 'layui-icon-face-smile',
     page: false,
-  }
-)
+})
+
+const dropdownRef = ref<null | HTMLElement>(null);
 
 const emit = defineEmits(['update:modelValue'])
 
@@ -104,6 +105,8 @@ const selectedIcon: Ref<string> = ref(props.modelValue as string)
 const selectIcon = function (icon: string) {
   emit('update:modelValue', icon)
   selectedIcon.value = icon
+  // @ts-ignore
+  dropdownRef.value.hide()
 }
 
 const icones: Ref = ref([])

From 40fc19bbfc295756fee7b5ae2b4e99ce79a4bdab 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: Fri, 17 Dec 2021 00:21:47 +0800
Subject: [PATCH 22/22] =?UTF-8?q?=F0=9F=93=81=20=E6=95=B4=E7=90=86=20chang?=
 =?UTF-8?q?elog?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 example/docs/zh-CN/guide/changelog.md | 8 +++-----
 example/src/view/guide.vue            | 6 ------
 2 files changed, 3 insertions(+), 11 deletions(-)

diff --git a/example/docs/zh-CN/guide/changelog.md b/example/docs/zh-CN/guide/changelog.md
index 7558dbaf..2482ec4c 100644
--- a/example/docs/zh-CN/guide/changelog.md
+++ b/example/docs/zh-CN/guide/changelog.md
@@ -22,6 +22,7 @@
           <li>[新增] layer 组件 resize 属性, 开启弹层尺寸拉伸, 常用于 页面层 与 Iframe 层。</li>
           <li>[加强] layer 组件 area 属性, 支持 字符串 与 数组 类型, 默认 auto 宽高根据内容自适应。</li>
           <li>[修复] layer 组件 body 禁用拖动, 仅支持标题拖动窗体。</li>
+          <li>[修复] icon-picker 组件 select 图标时, 自动隐藏选择内容。</li>
           <li>[修复] dropdown 组件触发方式为 hover 时，移动不到菜单子项的问题</li>
           <li>[集成] utteranc.es 插件, 基于 issues 提供为文档提供留言能力。</li>
           <li>[升级] layer-vue 1.2.0, 更稳定的 layer 版本。</li>
@@ -34,12 +35,9 @@
     <ul> 
       <a name="0-2-7"> </a> 
       <li> 
-        <h3>0.1.1 <span class="layui-badge-rim">2021-12-10</span></h3> 
+        <h3>0.1.0 <span class="layui-badge-rim">2021-12-10</span></h3> 
         <ul> 
-          <li>[重写] sort 方法，以便对数字、非数字及混合类等所有内容的排序进行支持</li> 
-          <li>[新增] dropdown 组件的 align 参数，用于控制下拉菜单水平对齐方式（支持 left、center、right），默认 left</li> 
-          <li>[加强] colorpicker 组件的坐标定位计算方式</li> 
-          <li>[修复] 低版本 ie 若干报错问题</li> 
+          <li>孵化。</li>
         </ul> 
       </li>
     </ul>
diff --git a/example/src/view/guide.vue b/example/src/view/guide.vue
index 6bae2697..133bdbd1 100644
--- a/example/src/view/guide.vue
+++ b/example/src/view/guide.vue
@@ -92,12 +92,6 @@ export default {
             subTitle: 'problem',
             path: '/zh-CN/guide/problem',
           },
-          {
-            id: 5,
-            title: '主题',
-            subTitle: 'theme',
-            path: '/zh-CN/guide/theme',
-          },
           {
             id: 6,
             title: '团队',