From 22c7fef70454bdd69b1604b105c860edae3e2599 Mon Sep 17 00:00:00 2001
From: sight <1453017105@qq.com>
Date: Mon, 17 Jan 2022 00:57:28 +0800
Subject: [PATCH 1/2] =?UTF-8?q?=E6=94=AF=E6=8C=81=E5=87=BD=E6=95=B0?=
 =?UTF-8?q?=E5=BC=8F=E8=B0=83=E7=94=A8=E8=AE=BF=E9=97=AE=E5=85=A8=E5=B1=80?=
 =?UTF-8?q?=E6=B3=A8=E5=86=8C=E7=BB=84=E4=BB=B6=EF=BC=8Ccontext=EF=BC=9B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

优化 layer 函数式调用 childrenVNode 渲染时机，支持 VNode 类型响应式替换；

函数式调用表格表单 CRUD ，按钮事件通信(layer btn 按钮和组件内按钮)示例；

其它函数式调用响应式示例;
---
 example/src/App.vue                           |  10 +-
 example/src/components/HelloWord.vue          |   7 +-
 .../components/func/CompositionAPITest.vue    | 145 +++++++++++++
 example/src/components/func/OptionAPITest.vue |  40 ++++
 example/src/components/func/Test.vue          |  48 +++++
 example/src/components/func/UserForm.vue      |  29 +++
 example/src/components/func/UserList.vue      | 193 ++++++++++++++++++
 example/src/main.ts                           |   5 +-
 package.json                                  |   1 +
 src/index.ts                                  |   2 +-
 src/layer/index.ts                            |  64 ++++--
 src/module/modal/index.vue                    |  43 ++--
 12 files changed, 540 insertions(+), 47 deletions(-)
 create mode 100644 example/src/components/func/CompositionAPITest.vue
 create mode 100644 example/src/components/func/OptionAPITest.vue
 create mode 100644 example/src/components/func/Test.vue
 create mode 100644 example/src/components/func/UserForm.vue
 create mode 100644 example/src/components/func/UserList.vue

diff --git a/example/src/App.vue b/example/src/App.vue
index dd8166f..b3b7c07 100644
--- a/example/src/App.vue
+++ b/example/src/App.vue
@@ -1,7 +1,13 @@
 <script setup>
-import HelloWorld from "./components/HelloWord.vue";
+import CompositionTest from "./components/func/CompositionAPITest.vue";
+import OptionAPITest from "./components/func/OptionAPITest.vue";
+import HelloWord from "./components/HelloWord.vue";
+import UserList from "./components/func/UserList.vue";
 </script>
 
 <template>
-  <HelloWorld />
+  <HelloWord />
+  <OptionAPITest />
+  <CompositionTest />
+  <UserList />
 </template>
\ No newline at end of file
diff --git a/example/src/components/HelloWord.vue b/example/src/components/HelloWord.vue
index 90444bf..2287cdc 100644
--- a/example/src/components/HelloWord.vue
+++ b/example/src/components/HelloWord.vue
@@ -24,14 +24,14 @@ var instance = null;
 const openModal = () => {
   instance = layer.open({
     content: "内容",
-    area: ['500px','500px'],
+    area: ['500px', '500px'],
     shade: false,
     maxmin: true
   })
 }
 
 const openMsg = () => {
-  layer.msg("普通消息",{icon:2, time: 100000})
+  layer.msg("普通消息", { icon: 2, time: 100000 })
 }
 
 const close = () => {
@@ -42,7 +42,7 @@ const closeAll = () => {
   layer.closeAll()
 }
 const openIframe = function () {
-   layer.open({
+  layer.open({
     type: 2,
     title: "标题",
     maxmin: true,
@@ -52,4 +52,3 @@ const openIframe = function () {
 };
 </script>
 
-
diff --git a/example/src/components/func/CompositionAPITest.vue b/example/src/components/func/CompositionAPITest.vue
new file mode 100644
index 0000000..cc3e2e9
--- /dev/null
+++ b/example/src/components/func/CompositionAPITest.vue
@@ -0,0 +1,145 @@
+<template>
+  <div>
+    <p>自定义标题-响应式</p>
+    <div>
+      <span>{{ model }}</span>
+    </div>
+    <input type="text" v-model="layerFuncTitle" placeholder="尝试更改标题标题" />
+    <button @click="openVNode">函数VNode</button>
+    <button @Click="model.username = model.username + '测试'">修改username</button>
+  </div>
+&nbsp;
+  <div>
+    <p>自定义内容区text-响应式</p>
+    <input type="text" v-model="layerFuncContentText" placeholder="尝试更改这里的内容" />
+    <button @click="openModalText">函数ModelText</button>
+  </div>
+&nbsp;
+  <div>
+    <p>自定义内容区html-响应式</p>
+    <input type="text" v-model="layerFuncContentHtml" placeholder="尝试更改这里的内容" />
+    <button @click="openModalHtml">函数ModelHtml</button>
+  </div>
+&nbsp;
+  <div>
+    <p>自定义内容区iframe-响应式: http://layui-vue.pearadmin.com/</p>
+    <input type="text" v-model="layerFuncContentIframe" placeholder="尝试更改这里的内容" />
+    <button @click="openModalIframe">函数ModelIframe</button>
+  </div>
+&nbsp;
+  <div>
+    <p>
+      自定义内容区vNode-响应式
+      <span>复制到输入框: h('button', 'VNode响应式' )</span>
+    </p>
+    <button @click="layerFuncContentvNode = h('button', 'VNode响应式替换')">点击修改</button>
+    <input type="text" v-model="layerFuncContentvNode" placeholder="尝试更改这里的内容" />
+    <button @click="openModalvNode">函数ModelvNode</button>
+  </div>
+&nbsp;
+  <div>
+    <p>响应式</p>
+    <input type="text" v-model="dataRef" width="500" placeholder="请输入" />
+    <button @click="openRef">函数input</button>
+    <button @click="dataRef++">count+</button>
+    <button @click="dataRef--">count-</button>
+  </div>
+</template>
+
+<script setup>
+import { ref, h, createVNode, resolveComponent, reactive } from "vue";
+import { useLayer } from "../../../../src/index";
+import Test from "./test.vue";
+
+// layer.init();
+const { layer } = useLayer();
+
+var instance = null;
+
+let layerFuncTitle = ref("自定义title")
+let layerFuncContentText = ref("尝试更改这里的内容")
+let layerFuncContentHtml = ref("<h1> 渲染HTML</h1>")
+let layerFuncContentIframe = ref("https://finalsummer.gitee.io/layervue/")
+let layerFuncContentvNode = ref(h("input", {
+  value: "test",
+}))
+let dataRef = ref("123")
+
+// vNode响应式更新
+const openModalvNode = () => {
+  // eval不是必须的,此处只是为了转换输入框 value
+  instance = layer.open({
+    title: "vNode",
+    content: () => eval(layerFuncContentvNode.value),
+    area: ['500px', '500px'],
+    shade: false,
+    maxmin: true
+  })
+}
+
+// HTML 响应式更新
+const openModalHtml = () => {
+  instance = layer.open({
+    title: "HTML",
+    content: () => layerFuncContentHtml.value,
+    isHtmlFragment: true,
+    area: ['500px', '500px'],
+    shade: false,
+    maxmin: true
+  })
+}
+
+// iframe 响应式更新
+const openModalIframe = () => {
+  instance = layer.open({
+    type: 2,
+    title: "iframe",
+    content: () => layerFuncContentIframe.value,
+    area: ['500px', '500px'],
+    shade: false,
+    maxmin: true
+  })
+}
+
+// 文本响应式更新
+const openModalText = () => {
+  instance = layer.open({
+    title: "Text",
+    content: () => layerFuncContentText.value,
+    area: ['500px', '500px'],
+    shade: false,
+    maxmin: true
+  })
+}
+
+// v-model
+// const LayInput = resolveComponent("LayInput");
+const openRef = () => {
+  layer.open({
+    title: "inputTest",
+    content: () => h("input", {
+      value: dataRef.value,
+      onInput: (e) => dataRef.value = e.target.value
+    }),
+    shade: false,
+  })
+}
+
+// 组件通信测试
+const model = reactive({
+  username: "admin",
+  password: "123",
+  specialty: "1"
+})
+const openVNode = () => {
+  layer.open({
+    title: () => layerFuncTitle.value,
+    content: h(Test, { model, }),
+    area: ['500px', '500px'],
+    shade: false,
+  })
+}
+
+</script>
+
+
diff --git a/example/src/components/func/OptionAPITest.vue b/example/src/components/func/OptionAPITest.vue
new file mode 100644
index 0000000..3a6c726
--- /dev/null
+++ b/example/src/components/func/OptionAPITest.vue
@@ -0,0 +1,40 @@
+<template>
+  <p>{{ model }}</p>
+  <button @click="openVNode">Options API</button>
+  <br />
+</template>
+<script>
+import { h } from "vue"
+import { layer, useLayer } from "../../../../src/index";
+import Test from "./Test.vue";
+
+export default {
+  components: {
+    Test
+  },
+  data() {
+    return {
+      model: {
+        username: "admin",
+        password: "123",
+        specialty: "1"
+      }
+    }
+  },
+  mounted() {
+    useLayer();
+  },
+  methods: {
+    openVNode() {
+      layer.open({
+        content: h(Test, { model: this.model }),
+        area: ['500px', '500px'],
+        shade: false,
+      })
+    }
+  }
+}
+</script>
+<style lang="">
+  
+</style>
\ No newline at end of file
diff --git a/example/src/components/func/Test.vue b/example/src/components/func/Test.vue
new file mode 100644
index 0000000..2e5d275
--- /dev/null
+++ b/example/src/components/func/Test.vue
@@ -0,0 +1,48 @@
+<template>
+  <lay-form :model="model">
+    <lay-form-item label="账户" prop="username">
+      <lay-input v-model="model.username"></lay-input>
+    </lay-form-item>
+    <lay-form-item label="密码" prop="password">
+      <lay-input v-model="model.password" type="password"></lay-input>
+    </lay-form-item>
+    <lay-form-item label="爱好" prop="hobby">
+      <lay-select v-model="model.hobby">
+        <lay-select-option value="1" label="学习"></lay-select-option>
+        <lay-select-option value="2" label="编码"></lay-select-option>
+        <lay-select-option value="3" label="运动"></lay-select-option>
+      </lay-select>
+    </lay-form-item>
+    <lay-form-item label="特长" prop="specialty">
+      <lay-radio v-model="model.specialty" name="specialty" label="1">写作</lay-radio>
+      <lay-radio v-model="model.specialty" name="specialty" label="2">画画</lay-radio>
+      <lay-radio v-model="model.specialty" name="specialty" label="3">编码</lay-radio>
+    </lay-form-item>
+    <lay-form-item label="描述" prop="desc">
+      <lay-textarea placeholder="请输入描述" v-model="model.desc"></lay-textarea>
+    </lay-form-item>
+    <lay-form-item>
+      <lay-button @click="submitClick">提交</lay-button>
+    </lay-form-item>
+  </lay-form>
+</template>
+<script setup>
+import { layer } from "../../../../src/index";
+
+const props = defineProps({
+  model: Object
+})
+
+const submitClick = function () {
+  layer.open({
+    type: 1,
+    title: "表单结果",
+    content: `<div style="padding: 10px">${JSON.stringify(props.model)}</div>`,
+    shade: false,
+    isHtmlFragment: true,
+    btn: [{ text: '确认', callback(index) { layer.closeAll() } }],
+    area: '500px'
+  });
+};
+
+</script>
\ No newline at end of file
diff --git a/example/src/components/func/UserForm.vue b/example/src/components/func/UserForm.vue
new file mode 100644
index 0000000..297a3de
--- /dev/null
+++ b/example/src/components/func/UserForm.vue
@@ -0,0 +1,29 @@
+<template>
+  <lay-form :model="userForm">
+    <lay-form-item label="id" prop="id">
+      <lay-input v-model="userForm.id"></lay-input>
+    </lay-form-item>
+    <lay-form-item label="账户" prop="username">
+      <lay-input v-model="userForm.username"></lay-input>
+    </lay-form-item>
+    <lay-form-item label="密码" prop="password">
+      <lay-input v-model="userForm.password"></lay-input>
+    </lay-form-item>
+    <lay-form-item label="年龄" prop="age">
+      <lay-input v-model="userForm.age"></lay-input>
+    </lay-form-item>
+    <div>
+      <lay-button @click="$emit('ok', props.userForm)">确认</lay-button>
+      <lay-button @click="$emit('cancel', props.userForm)">取消</lay-button>
+    </div>
+  </lay-form>
+</template>
+<script setup>
+
+const props = defineProps({
+  userForm: Object
+})
+
+const emit = defineEmits(['cancel', 'ok'])
+
+</script>
\ No newline at end of file
diff --git a/example/src/components/func/UserList.vue b/example/src/components/func/UserList.vue
new file mode 100644
index 0000000..87463a9
--- /dev/null
+++ b/example/src/components/func/UserList.vue
@@ -0,0 +1,193 @@
+<template lang="">
+  <!-- 表格添加,修改 -->
+  <lay-table
+    :columns="columns"
+    id="id"
+    :dataSource="dataSource"
+    v-model:selectedKeys="selectedKeys"
+    :checkbox="checkbox"
+    :default-toolbar="defaultToolbar"
+  >
+    <!-- 工具条 -->
+    <template v-slot:toolbar>
+      <lay-button size="sm" @click="handlerUserTbAdd()">新增</lay-button>
+      <lay-button size="sm" @click="handlerUserTbBatchDel()">删除</lay-button>
+    </template>
+    <template v-slot:username="{ data }">{{ data.username }}</template>
+    <template v-slot:password="{ data }">{{ data.password }}</template>
+    <template v-slot:operator="{ data }">
+      <lay-button @click="handlerUserTbEdit(data)">修改</lay-button>
+      <lay-button type="primary" @click="handlerUserTbDel(data)">删除</lay-button>
+    </template>
+  </lay-table>
+  
+  <div style="padding: 10px">userForm{{ userFormData }}</div>
+</template>
+<script setup>
+import { ref, h, createVNode, resolveComponent, reactive } from "vue";
+import { layer} from "../../../../src/index";
+import UserForm from "./UserForm.vue"
+
+// 表格和表单响应式 CRUD 
+const selectedKeys = ref([])
+const checkbox = ref(true)
+const defaultToolbar = ref(true)
+let userFormData = ref({}) //用户数据
+var instance = null;
+
+const columns = [
+  {
+    title: "id",
+    width: "200px",
+    key: "id"
+  },
+  {
+    title: "账户",
+    width: "200px",
+    customSlot: "username",
+    key: "username"
+  }, {
+    title: "密码",
+    width: "180px",
+    customSlot: "password",
+    key: "password"
+  }, {
+    title: "年龄",
+    width: "180px",
+    key: "age"
+  }, {
+    title: "操作",
+    width: "180px",
+    customSlot: "operator",
+    key: "operator"
+  }
+]
+
+const dataSource = ref([
+  { id: "1", username: "root", password: "root", age: "18" },
+  { id: "2", username: "woow", password: "woow", age: "20" },
+  { id: "4", username: "selectedKeys是id", password: "test", age: "20" }
+])
+
+//添加
+const handlerUserTbAdd = function () {
+  userFormData.value = {};
+  instance = layer.open({
+    title: "新增",
+    content: h(UserForm, {
+      userForm: userFormData.value,
+      onCancel() {
+        console.log("add --> 取消事件");
+        layer.close(instance)
+      },
+      onOk() {
+        console.log("add --> 添加事件");
+        dataSource.value.push(userFormData.value)
+        layer.close(instance);
+      }
+    }),
+    btn: [{
+      text: '确认',
+      callback() {
+        dataSource.value.push(userFormData.value)
+        layer.close(instance);
+      }
+    },
+    {
+      text: '取消',
+      callback() {
+        userFormData.value = {};
+        layer.close(instance);
+      }
+    }],
+    area: ['500px', '500px'],
+    maxmin: true,
+  })
+}
+
+// 编辑
+const handlerUserTbEdit = function (data) {
+  // 防止编辑表单时同步修改data,复杂的对象需要深拷贝
+  userFormData.value = { ...data }
+  instance = layer.open({
+    title: "编辑",
+    content: h(UserForm, {
+      userForm: userFormData.value,
+      onCancel() {
+        userFormData.value = {};
+        layer.close(instance);
+      },
+      onOk() {
+        dataSource.value.forEach((user, index) => {
+          if (user.id === userFormData.value.id) {
+            dataSource.value[index] = userFormData.value
+          }
+        })
+        layer.close(instance);
+      }
+    }),
+    btn: [{
+      text: '确认',
+      callback() {
+        dataSource.value.forEach((user, index) => {
+          if (user.id === userFormData.value.id) {
+            dataSource.value[index] = userFormData.value
+          }
+        })
+        layer.close(instance);
+      }
+    },
+    {
+      text: '取消',
+      callback() {
+        userFormData.value = {};
+        layer.close(instance);
+      }
+    }],
+    area: ['500px', '500px'],
+    maxmin: true,
+  })
+}
+
+// 删除
+const handlerUserTbDel = function (data) {
+  instance = layer.confirm("删除" + JSON.stringify(data), {
+    btn: [{
+      text: '确认',
+      callback() {
+        let index = dataSource.value.findIndex(user => user.id === data.id)
+        dataSource.value.splice(index, 1);
+        layer.close(instance);
+      }
+    }, {
+      text: '取消',
+      callback() {
+        layer.close(instance);
+      }
+    }]
+  })
+}
+
+// 批量删除
+const handlerUserTbBatchDel = function () {
+  instance = layer.confirm("批量删除" + JSON.stringify(selectedKeys.value), {
+    btn: [{
+      text: '确认',
+      callback() {
+        selectedKeys.value.forEach((userid) => {
+          dataSource.value.splice(dataSource.value.findIndex(user => user.id === userid), 1);
+        })
+        layer.close(instance);
+      }
+    }, {
+      text: '取消',
+      callback() {
+        layer.close(instance);
+      }
+    }]
+  })
+}
+</script>
+<style lang="">
+  
+</style>
\ No newline at end of file
diff --git a/example/src/main.ts b/example/src/main.ts
index f10f092..a468319 100644
--- a/example/src/main.ts
+++ b/example/src/main.ts
@@ -1,5 +1,6 @@
 import { createApp } from 'vue'
 import App from "./App.vue"
+import Layui from '@layui/layui-vue'
+import '@layui/layui-vue/lib/index.css'
 
-createApp(App)
-.mount('#app')
\ No newline at end of file
+createApp(App).use(Layui).mount('#app')
\ No newline at end of file
diff --git a/package.json b/package.json
index 804de94..66fe7bd 100644
--- a/package.json
+++ b/package.json
@@ -32,6 +32,7 @@
     "vue": "^3.2.26"
   },
   "dependencies": {
+    "@layui/layui-vue": "^0.3.3",
     "vue": "^3.2.26"
   },
   "devDependencies": {
diff --git a/src/index.ts b/src/index.ts
index 29e62fb..7ed0f38 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -2,7 +2,7 @@
 export * from './module/index'
 
 // 函数组件
-export { default as layer } from './layer'
+export {  useLayer, default as layer} from './layer'
 
 // 组件样式
 import "./css/layer.css"
\ No newline at end of file
diff --git a/src/layer/index.ts b/src/layer/index.ts
index ccb4fec..592cd11 100644
--- a/src/layer/index.ts
+++ b/src/layer/index.ts
@@ -1,7 +1,10 @@
-import { render, h, isVNode } from "vue";
+import { render, h, isVNode,  getCurrentInstance, AppContext } from "vue";
 import LayModal from "../module/modal/index.vue";
 import { nextId } from "../tools";
 
+// 应用上下文
+let appContext: AppContext | null = null;
+// layer 实例
 const layerInstance: any = [];
 
 // 新增实例
@@ -48,8 +51,18 @@ const createContainer = () => {
   document.body.appendChild(modalContainer);
   return modalContainer;
 };
+// modal 子 VNode
+const modalChildrenVNode = (content: any) => {
+  if(typeof content === 'function'){
+    return isVNode(content()) 
+      ? { default: () => content()} 
+      : undefined
+  }
+  return isVNode(content) 
+    ? { default:() => content }  
+    : undefined
+}
 
-// 弹层
 const layer = {
   // 页面层
   open: (option: any, callback: Function) => {
@@ -100,19 +113,25 @@ const layer = {
     // 创建容器 Dom
     const modalContainer = createContainer();
     // 创建虚拟 Dom
-    const modalInstance = h(LayModal, {
-      ...options,
-      isFunction: true,
-      destroy() {
-        clearTimeout(timer);
-        modalInstance.component?.exposed?.close();
-        setTimeout(() => {
-          render(null, modalContainer);
-          document.body.removeChild(modalContainer);
-        }, 2000);
-        delInstance(modalContainer.id);
-      },
-    },isVNode(options.content) ? options.content : null);
+    const modalInstance = h(
+      LayModal, 
+      {
+        ...options,
+        isFunction: true,
+        destroy() {
+          clearTimeout(timer);
+          modalInstance.component?.exposed?.close();
+          setTimeout(() => {
+            render(null, modalContainer);
+            document.body.removeChild(modalContainer);
+          }, 2000);
+          delInstance(modalContainer.id);
+        },
+      }, 
+      modalChildrenVNode(options.content)
+    );
+    // 设置上下文
+    modalInstance.appContext = options.appContext || modalInstance.appContext || appContext
     // 将虚拟 dom 渲染到 dom 容器
     render(modalInstance, modalContainer);
     // 调用 open 函数
@@ -164,4 +183,17 @@ const layer = {
     instance.modalInstance.component?.exposed?.reset();
   },
 };
-export default layer;
+
+export default layer
+
+export function useLayer () {
+  const instance = getCurrentInstance() 
+  
+  if (!instance ) {
+    throw new Error('useLayer must be used during a component setup or Lifecycle Hooks')
+  }
+  appContext = instance.appContext;
+  return {
+    layer
+  }
+}
diff --git a/src/module/modal/index.vue b/src/module/modal/index.vue
index eafb3e2..820b0ff 100644
--- a/src/module/modal/index.vue
+++ b/src/module/modal/index.vue
@@ -5,7 +5,7 @@ export default {
 </script>
 
 <script lang="ts" setup>
-import { Ref, ref, watch, computed, useSlots, onMounted, onUpdated } from "vue";
+import { Ref, ref, watch, computed, useSlots, VNodeTypes, isVNode, render } from "vue";
 import {
   nextId,
   nextIndex,
@@ -31,7 +31,7 @@ const emit = defineEmits(["close", "update:modelValue"]);
 // 传递属性 TODO
 export interface LayModalProps {
   domId?: string | string;
-  title?: string | boolean;
+  title?: string | boolean | Function
   icon?: string | number;
   skin?: string;
   zIndex?: number | Function;
@@ -44,7 +44,7 @@ export interface LayModalProps {
   move?: boolean | string;
   resize?: boolean | string;
   type?: 0 | 1 | 2 | 3 | "dialog" | "component" | "iframe" | "loading";
-  content?: string;
+  content?: string | Function | object | VNodeTypes
   isHtmlFragment?: boolean;
   shade?: boolean | string;
   shadeClose?: boolean | string;
@@ -62,6 +62,7 @@ export interface LayModalProps {
   yesText?: string;
   isFunction?: boolean;
   isMessage?: boolean;
+  appContext?: any;
 }
 
 const props = withDefaults(defineProps<LayModalProps>(), {
@@ -85,9 +86,9 @@ const props = withDefaults(defineProps<LayModalProps>(), {
   resize: false,
   isHtml: false,
   isOutAnim: true,
-  destroy: () => {},
-  success: () => {},
-  end: () => {},
+  destroy: () => { },
+  success: () => { },
+  end: () => { },
   yesText: "确定",
   isFunction: false,
   isMessage: false,
@@ -147,7 +148,7 @@ const notFirstOpenLayerInit = function () {
   setTimeout(() => {
     supportMove();
   }, 20);
-  
+
 };
 
 // 关闭之前
@@ -312,6 +313,13 @@ const reset = function () {
   }
 };
 
+const renderContent = function (name: string, content: any) {
+  if (typeof content === 'function') {
+    return content();
+  }
+  return content;
+}
+
 
 // 组件 触发
 watch(
@@ -363,10 +371,7 @@ defineExpose({
     :style="{ zIndex: index, opacity: props.shadeOpacity }"
     @click="shadeHandle"
   ></div>
-  <transition
-    :enter-active-class="enterActiveClass"
-    :leave-active-class="leaveActiveClass"
-  >
+  <transition :enter-active-class="enterActiveClass" :leave-active-class="leaveActiveClass">
     <div
       :id="id"
       ref="layero"
@@ -389,9 +394,7 @@ defineExpose({
         class="layui-layer-title"
         style="cursor: move"
         v-if="title && type != 3"
-      >
-        {{ title }}
-      </div>
+      >{{ renderContent("title", props.title) }}</div>
       <div
         class="layui-layer-content"
         :style="{ height: contentHeight }"
@@ -405,9 +408,9 @@ defineExpose({
           <slot v-if="slot.default"></slot>
           <template v-else>
             <template v-if="isHtmlFragment">
-              <span v-html="content"></span>
+              <span v-html="renderContent('content', props.content)"></span>
             </template>
-            <template v-else>{{ content }}</template>
+            <template v-else>{{ renderContent('content', props.content) }}</template>
           </template>
         </template>
         <iframe
@@ -415,7 +418,7 @@ defineExpose({
           scrolling="auto"
           allowtransparency="true"
           frameborder="0"
-          :src="content"
+          :src="renderContent('content', props.content)"
           style="width: 100%; height: 100%"
         ></iframe>
       </div>
@@ -450,11 +453,7 @@ defineExpose({
       >
         <template v-if="btn && btn.length > 0">
           <template v-for="(b, index) in btn" :key="index">
-            <a
-              :class="[`layui-layer-btn${index}`]"
-              @click="b.callback(props.domId)"
-              >{{ b.text }}</a
-            >
+            <a :class="[`layui-layer-btn${index}`]" @click="b.callback(props.domId)">{{ b.text }}</a>
           </template>
         </template>
         <template v-else>
-- 
Gitee


From c886b58d9a00f6e5c3ed46d5dc534e776c786569 Mon Sep 17 00:00:00 2001
From: sight <1453017105@qq.com>
Date: Thu, 20 Jan 2022 22:42:18 +0800
Subject: [PATCH 2/2] =?UTF-8?q?=E5=9F=BA=E4=BA=8E=20type=201=20=E5=92=8C?=
 =?UTF-8?q?=E5=8A=A8=E7=94=BB=E7=9A=84=E6=8A=BD=E5=B1=89=E5=AE=9E=E7=8E=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 example/docs/en-US/components/button.md       |  700 -----------
 example/docs/en-US/guide/home.md              |    1 -
 example/docs/en-US/guide/index.md             |    5 -
 example/docs/zh-CN/components/animation.md    |   94 --
 example/docs/zh-CN/components/avatar.md       |   94 --
 example/docs/zh-CN/components/badge.md        |   49 -
 example/docs/zh-CN/components/block.md        |   59 -
 example/docs/zh-CN/components/breadcrumb.md   |  102 --
 example/docs/zh-CN/components/button.md       |  307 -----
 example/docs/zh-CN/components/card.md         |  129 --
 example/docs/zh-CN/components/carousel.md     |  141 ---
 example/docs/zh-CN/components/checkbox.md     |  212 ----
 example/docs/zh-CN/components/collapse.md     |   52 -
 example/docs/zh-CN/components/color.md        |  162 ---
 example/docs/zh-CN/components/colorPicker.md  |   30 -
 example/docs/zh-CN/components/container.md    |   77 --
 example/docs/zh-CN/components/dropdown.md     |   90 --
 example/docs/zh-CN/components/empty.md        |   56 -
 example/docs/zh-CN/components/field.md        |   70 --
 example/docs/zh-CN/components/form.md         |   76 --
 example/docs/zh-CN/components/grid.md         |  166 ---
 example/docs/zh-CN/components/icon.md         | 1119 -----------------
 example/docs/zh-CN/components/iconPicker.md   |  112 --
 example/docs/zh-CN/components/input.md        |  131 --
 example/docs/zh-CN/components/layer.md        |  274 ----
 example/docs/zh-CN/components/layout.md       |  186 ---
 example/docs/zh-CN/components/line.md         |   43 -
 example/docs/zh-CN/components/menu.md         |  101 --
 example/docs/zh-CN/components/page.md         |  234 ----
 example/docs/zh-CN/components/panel.md        |   33 -
 example/docs/zh-CN/components/progress.md     |  127 --
 example/docs/zh-CN/components/radio.md        |  119 --
 example/docs/zh-CN/components/rate.md         |  148 ---
 example/docs/zh-CN/components/select.md       |  102 --
 example/docs/zh-CN/components/slider.md       |   42 -
 example/docs/zh-CN/components/switch.md       |  135 --
 example/docs/zh-CN/components/tab.md          |  192 ---
 example/docs/zh-CN/components/table.md        |  311 -----
 example/docs/zh-CN/components/textarea.md     |  110 --
 example/docs/zh-CN/components/timeline.md     |   85 --
 example/docs/zh-CN/components/transfer.md     |  108 --
 example/docs/zh-CN/components/tree.md         |  255 ----
 example/docs/zh-CN/guide/changelog.md         |  164 ---
 example/docs/zh-CN/guide/contribution.md      |    2 -
 example/docs/zh-CN/guide/getStarted.md        |   54 -
 example/docs/zh-CN/guide/introduce.md         |   19 -
 example/docs/zh-CN/guide/norms.md             |    2 -
 example/docs/zh-CN/guide/problem.md           |    2 -
 example/docs/zh-CN/guide/sandbox.md           |   23 -
 example/docs/zh-CN/hooks/useClickOutside.md   |   42 -
 example/docs/zh-CN/hooks/useFullScreen.md     |   42 -
 example/docs/zh-CN/hooks/useMove.md           |   37 -
 example/src/App.vue                           |    6 -
 example/src/components/HelloWord.vue          |   32 +-
 .../components/func/CompositionAPITest.vue    |  145 ---
 example/src/components/func/OptionAPITest.vue |   40 -
 example/src/components/func/Test.vue          |   48 -
 example/src/components/func/UserForm.vue      |   29 -
 example/src/components/func/UserList.vue      |  193 ---
 example/src/main.ts                           |    4 +-
 package.json                                  |   12 +-
 src/css/layer.css                             |  278 ++++
 src/layer/index.ts                            |    7 +
 src/module/modal/index.vue                    |   18 +-
 src/tools/index.ts                            |   41 +-
 65 files changed, 369 insertions(+), 7510 deletions(-)
 delete mode 100644 example/docs/en-US/components/button.md
 delete mode 100644 example/docs/en-US/guide/home.md
 delete mode 100644 example/docs/en-US/guide/index.md
 delete mode 100644 example/docs/zh-CN/components/animation.md
 delete mode 100644 example/docs/zh-CN/components/avatar.md
 delete mode 100644 example/docs/zh-CN/components/badge.md
 delete mode 100644 example/docs/zh-CN/components/block.md
 delete mode 100644 example/docs/zh-CN/components/breadcrumb.md
 delete mode 100644 example/docs/zh-CN/components/button.md
 delete mode 100644 example/docs/zh-CN/components/card.md
 delete mode 100644 example/docs/zh-CN/components/carousel.md
 delete mode 100644 example/docs/zh-CN/components/checkbox.md
 delete mode 100644 example/docs/zh-CN/components/collapse.md
 delete mode 100644 example/docs/zh-CN/components/color.md
 delete mode 100644 example/docs/zh-CN/components/colorPicker.md
 delete mode 100644 example/docs/zh-CN/components/container.md
 delete mode 100644 example/docs/zh-CN/components/dropdown.md
 delete mode 100644 example/docs/zh-CN/components/empty.md
 delete mode 100644 example/docs/zh-CN/components/field.md
 delete mode 100644 example/docs/zh-CN/components/form.md
 delete mode 100644 example/docs/zh-CN/components/grid.md
 delete mode 100644 example/docs/zh-CN/components/icon.md
 delete mode 100644 example/docs/zh-CN/components/iconPicker.md
 delete mode 100644 example/docs/zh-CN/components/input.md
 delete mode 100644 example/docs/zh-CN/components/layer.md
 delete mode 100644 example/docs/zh-CN/components/layout.md
 delete mode 100644 example/docs/zh-CN/components/line.md
 delete mode 100644 example/docs/zh-CN/components/menu.md
 delete mode 100644 example/docs/zh-CN/components/page.md
 delete mode 100644 example/docs/zh-CN/components/panel.md
 delete mode 100644 example/docs/zh-CN/components/progress.md
 delete mode 100644 example/docs/zh-CN/components/radio.md
 delete mode 100644 example/docs/zh-CN/components/rate.md
 delete mode 100644 example/docs/zh-CN/components/select.md
 delete mode 100644 example/docs/zh-CN/components/slider.md
 delete mode 100644 example/docs/zh-CN/components/switch.md
 delete mode 100644 example/docs/zh-CN/components/tab.md
 delete mode 100644 example/docs/zh-CN/components/table.md
 delete mode 100644 example/docs/zh-CN/components/textarea.md
 delete mode 100644 example/docs/zh-CN/components/timeline.md
 delete mode 100644 example/docs/zh-CN/components/transfer.md
 delete mode 100644 example/docs/zh-CN/components/tree.md
 delete mode 100644 example/docs/zh-CN/guide/changelog.md
 delete mode 100644 example/docs/zh-CN/guide/contribution.md
 delete mode 100644 example/docs/zh-CN/guide/getStarted.md
 delete mode 100644 example/docs/zh-CN/guide/introduce.md
 delete mode 100644 example/docs/zh-CN/guide/norms.md
 delete mode 100644 example/docs/zh-CN/guide/problem.md
 delete mode 100644 example/docs/zh-CN/guide/sandbox.md
 delete mode 100644 example/docs/zh-CN/hooks/useClickOutside.md
 delete mode 100644 example/docs/zh-CN/hooks/useFullScreen.md
 delete mode 100644 example/docs/zh-CN/hooks/useMove.md
 delete mode 100644 example/src/components/func/CompositionAPITest.vue
 delete mode 100644 example/src/components/func/OptionAPITest.vue
 delete mode 100644 example/src/components/func/Test.vue
 delete mode 100644 example/src/components/func/UserForm.vue
 delete mode 100644 example/src/components/func/UserList.vue

diff --git a/example/docs/en-US/components/button.md b/example/docs/en-US/components/button.md
deleted file mode 100644
index f48affb..0000000
--- a/example/docs/en-US/components/button.md
+++ /dev/null
@@ -1,700 +0,0 @@
-##### 基础
-
-::: demo 传入 columns 数据，自动生成表格
-
-<template>
-  <ele-table
-    :data="data"
-    :columns="columns"
-  />
-</template>
-
-<script>
-import { ref } from 'vue'
-
-export default {
-  setup() {
-    const columns = ref([
-      {
-        label: '日期',
-        prop: 'date',
-      },
-      {
-        label: '姓名',
-        prop: 'name',
-      },
-      {
-        label: '地址',
-        prop: 'address',
-      },
-    ])
-    const data = ref([
-      {
-        date: '2016-05-03',
-        name: 'Tom',
-        address: 'No. 189, Grove St, Los Angeles',
-      },
-      {
-        date: '2016-05-02',
-        name: 'Tom',
-        address: 'No. 189, Grove St, Los Angeles',
-      },
-      {
-        date: '2016-05-04',
-        name: 'Tom',
-        address: 'No. 189, Grove St, Los Angeles',
-      },
-      {
-        date: '2016-05-01',
-        name: 'Tom',
-        address: 'No. 189, Grove St, Los Angeles',
-      },
-    ])
-
-    return {
-      data,
-      columns,
-    }
-  }
-}
-</script>
-
-:::
-
-##### 索引
-
-::: demo 通过配置 index 显示索引列，支持 columns 的参数
-
-<template>
-  <ele-table
-    :data="data"
-    :columns="columns"
-    :index="{ label: '#' }"
-  />
-</template>
-
-<script>
-import { ref } from 'vue'
-
-export default {
-  setup() {
-    const columns = ref([
-      {
-        label: '日期',
-        prop: 'date',
-      },
-      {
-        label: '姓名',
-        prop: 'name',
-      },
-      {
-        label: '地址',
-        prop: 'address',
-      },
-    ])
-    const data = ref([
-      {
-        date: '2016-05-03',
-        name: 'Tom',
-        address: 'No. 189, Grove St, Los Angeles',
-      },
-      {
-        date: '2016-05-02',
-        name: 'Tom',
-        address: 'No. 189, Grove St, Los Angeles',
-      },
-      {
-        date: '2016-05-04',
-        name: 'Tom',
-        address: 'No. 189, Grove St, Los Angeles',
-      },
-      {
-        date: '2016-05-01',
-        name: 'Tom',
-        address: 'No. 189, Grove St, Los Angeles',
-      },
-    ])
-
-    return {
-      data,
-      columns,
-    }
-  }
-}
-</script>
-
-:::
-
-##### 多选
-
-::: demo 通过配置 selection 显示多选框，支持 columns 的参数
-
-<template>
-  <ele-table
-    :data="data"
-    :columns="columns"
-    selection
-  />
-</template>
-
-<script>
-import { ref } from 'vue'
-
-export default {
-  setup() {
-    const columns = ref([
-      {
-        label: '日期',
-        prop: 'date',
-      },
-      {
-        label: '姓名',
-        prop: 'name',
-      },
-      {
-        label: '地址',
-        prop: 'address',
-      },
-    ])
-    const data = ref([
-      {
-        date: '2016-05-03',
-        name: 'Tom',
-        address: 'No. 189, Grove St, Los Angeles',
-      },
-      {
-        date: '2016-05-02',
-        name: 'Tom',
-        address: 'No. 189, Grove St, Los Angeles',
-      },
-      {
-        date: '2016-05-04',
-        name: 'Tom',
-        address: 'No. 189, Grove St, Los Angeles',
-      },
-      {
-        date: '2016-05-01',
-        name: 'Tom',
-        address: 'No. 189, Grove St, Los Angeles',
-      },
-    ])
-
-    return {
-      data,
-      columns,
-    }
-  }
-}
-</script>
-
-:::
-
-##### 展开
-
-::: demo 通过配置 expand 开启展开插槽，通过 #expand 插槽定制显示内容，支持 columns 的参数
-
-<template>
-  <ele-table
-    :data="data"
-    :columns="columns"
-    expand
-  >
-    <template #expand="{ row }">
-      {{ row }}
-    </template>
-  </ele-table>
-</template>
-
-<script>
-import { ref } from 'vue'
-
-export default {
-  setup() {
-    const columns = ref([
-      {
-        label: '日期',
-        prop: 'date',
-      },
-      {
-        label: '姓名',
-        prop: 'name',
-      },
-      {
-        label: '地址',
-        prop: 'address',
-      },
-    ])
-    const data = ref([
-      {
-        date: '2016-05-03',
-        name: 'Tom',
-        address: 'No. 189, Grove St, Los Angeles',
-      },
-      {
-        date: '2016-05-02',
-        name: 'Tom',
-        address: 'No. 189, Grove St, Los Angeles',
-      },
-      {
-        date: '2016-05-04',
-        name: 'Tom',
-        address: 'No. 189, Grove St, Los Angeles',
-      },
-      {
-        date: '2016-05-01',
-        name: 'Tom',
-        address: 'No. 189, Grove St, Los Angeles',
-      },
-    ])
-
-    return {
-      data,
-      columns,
-    }
-  }
-}
-</script>
-
-:::
-
-##### 操作
-
-::: demo 通过配置 menu 开启按钮插槽，通过 #menu 插槽定制显示内容，支持 columns 的参数
-
-<template>
-  <ele-table
-    :data="data"
-    :columns="columns"
-    :menu="menu"
-  >
-    <template #menu="{ size }">
-      <el-button
-        :size="size"
-        type="text"
-      >
-        详情
-      </el-button>
-    </template>
-  </ele-table>
-</template>
-
-<script>
-import { ref } from 'vue'
-
-export default {
-  setup() {
-    const menu = ref({
-      label: '操作',
-      align: 'center',
-    })
-    const columns = ref([
-      {
-        label: '日期',
-        prop: 'date',
-      },
-      {
-        label: '姓名',
-        prop: 'name',
-      },
-      {
-        label: '地址',
-        prop: 'address',
-      },
-    ])
-    const data = ref([
-      {
-        date: '2016-05-03',
-        name: 'Tom',
-        address: 'No. 189, Grove St, Los Angeles',
-      },
-      {
-        date: '2016-05-02',
-        name: 'Tom',
-        address: 'No. 189, Grove St, Los Angeles',
-      },
-      {
-        date: '2016-05-04',
-        name: 'Tom',
-        address: 'No. 189, Grove St, Los Angeles',
-      },
-      {
-        date: '2016-05-01',
-        name: 'Tom',
-        address: 'No. 189, Grove St, Los Angeles',
-      },
-    ])
-
-    return {
-      menu,
-      data,
-      columns,
-    }
-  }
-}
-</script>
-
-:::
-
-##### 插槽
-
-::: demo
-
-<template>
-  <ele-table
-    :data="data"
-    :columns="columns3"
-  >
-    <template #name-header="{ column }">
-      <s>{{ column.label }}</s>
-    </template>
-    <template #name="{ row, size }">
-      <el-tag :size="size">
-        {{ row?.name }}
-      </el-tag>
-    </template>
-    <template #menu="{ size }">
-      <el-button
-        :size="size"
-        type="text"
-      >
-        详情
-      </el-button>
-    </template>
-  </ele-table>
-</template>
-
-<script>
-import { ref } from 'vue'
-
-export default {
-  setup() {
-    const columns3 = ref([
-      {
-        label: '日期',
-        prop: 'date',
-      },
-      {
-        label: '姓名',
-        prop: 'name',
-        slot: true,
-      },
-      {
-        label: '地址',
-        prop: 'address',
-      },
-    ])
-    const data = ref([
-      {
-        date: '2016-05-03',
-        name: 'Tom',
-        address: 'No. 189, Grove St, Los Angeles',
-      },
-      {
-        date: '2016-05-02',
-        name: 'Tom',
-        address: 'No. 189, Grove St, Los Angeles',
-      },
-      {
-        date: '2016-05-04',
-        name: 'Tom',
-        address: 'No. 189, Grove St, Los Angeles',
-      },
-      {
-        date: '2016-05-01',
-        name: 'Tom',
-        address: 'No. 189, Grove St, Los Angeles',
-      },
-    ])
-
-    return {
-      data,
-      columns3,
-    }
-  }
-}
-</script>
-
-:::
-
-##### 分页
-
-::: demo 当传入 total 数据时，将自动显示分页。可以通过 `v-model:current-page` 绑定当前页数、通过 `v-model:page-size` 绑定每页显示条目个数
-
-<template>
-  <ele-table
-    v-model:current-page="currentPage"
-    v-model:page-size="pageSize"
-    :data="data"
-    :columns="columns"
-    :total="total"
-  />
-</template>
-
-<script>
-import { ref } from 'vue'
-
-export default {
-  setup() {
-    const currentPage = ref(1)
-    const pageSize = ref(10)
-    const total = ref(50)
-    const columns = ref([
-      {
-        label: '日期',
-        prop: 'date',
-      },
-      {
-        label: '姓名',
-        prop: 'name',
-      },
-      {
-        label: '地址',
-        prop: 'address',
-      },
-    ])
-    const data = ref([
-      {
-        date: '2016-05-03',
-        name: 'Tom',
-        address: 'No. 189, Grove St, Los Angeles',
-      },
-      {
-        date: '2016-05-02',
-        name: 'Tom',
-        address: 'No. 189, Grove St, Los Angeles',
-      },
-      {
-        date: '2016-05-04',
-        name: 'Tom',
-        address: 'No. 189, Grove St, Los Angeles',
-      },
-      {
-        date: '2016-05-01',
-        name: 'Tom',
-        address: 'No. 189, Grove St, Los Angeles',
-      },
-    ])
-
-    return {
-      currentPage,
-      pageSize,
-      total,
-      data,
-      columns,
-    }
-  }
-}
-</script>
-
-:::
-
-##### 多级
-
-::: demo 通过 columns 的 `children` 配置多级表头
-
-<template>
-  <ele-table
-    :data="data"
-    :columns="columns2"
-  />
-</template>
-
-<script>
-import { ref } from 'vue'
-
-export default {
-  setup() {
-    const columns2 = ref([
-      {
-        label: '日期',
-        prop: 'date',
-      },
-      {
-        label: '用户',
-        children: [
-          {
-            label: '姓名',
-            prop: 'name',
-          },
-          {
-            label: '地址',
-            prop: 'address',
-          },
-        ],
-      },
-    ])
-    const data = ref([
-      {
-        date: '2016-05-03',
-        name: 'Tom',
-        address: 'No. 189, Grove St, Los Angeles',
-      },
-      {
-        date: '2016-05-02',
-        name: 'Tom',
-        address: 'No. 189, Grove St, Los Angeles',
-      },
-      {
-        date: '2016-05-04',
-        name: 'Tom',
-        address: 'No. 189, Grove St, Los Angeles',
-      },
-      {
-        date: '2016-05-01',
-        name: 'Tom',
-        address: 'No. 189, Grove St, Los Angeles',
-      },
-    ])
-
-    return {
-      data,
-      columns2,
-    }
-  }
-}
-</script>
-
-:::
-
-##### 配置
-
-| 参数                    | 说明                                                                | 类型                                                    | 可选值                         | 默认值                                               |
-| :---------------------- | :------------------------------------------------------------------ | :------------------------------------------------------ | :----------------------------- | :--------------------------------------------------- |
-| data                    | 显示的数据                                                          | array                                                   | -                              | -                                                    |
-| columns                 | 自动生成表单的参数，参考下面 columns                                | array                                                   | -                              | -                                                    |
-| selection               | 显示多选框，支持 columns 的配置                                     | boolean / object                                        | -                              | false                                                |
-| index                   | 显示索引，支持 columns 的配置                                       | boolean / object                                        | -                              | false                                                |
-| expand                  | 开启展开插槽，支持 columns 的配置                                   | boolean / object                                        | -                              | false                                                |
-| menu                    | 开启操作按钮插槽，支持 columns 的配置                               | boolean / object                                        | -                              | false                                                |
-| show-overflow-tooltip   | 当内容过长被隐藏时显示 tooltip                                      | boolean                                                 | -                              | false                                                |
-| align                   | 对齐方式                                                            | string                                                  | left / center / right          | left                                                 |
-| header-align            | 表头对齐方式                                                        | string                                                  | left / center / right          | 同 align                                             |
-| total                   | 总条目数                                                            | number                                                  | -                              | -                                                    |
-| current-page            | 当前页数，可以通过 `v-model:current-page` 绑定值                    | number                                                  | -                              | -                                                    |
-| page-size               | 每页显示条目个数，可以通过 `v-model:page-size` 绑定值               | number                                                  | -                              | -                                                    |
-| pagination              | pagination 的配置，同 el-pagination                                 | object                                                  | -                              | [参考全局配置](../guide/index#全局配置)              |
-| height                  | Table 的高度                                                        | string / number                                         | -                              | 自动高度                                             |
-| max-height              | Table 的最大高度                                                    | string / number                                         | -                              | -                                                    |
-| stripe                  | 是否为斑马纹 table                                                  | boolean                                                 | -                              | false                                                |
-| border                  | 是否带有纵向边框                                                    | boolean                                                 | -                              | false                                                |
-| size                    | Table 的尺寸                                                        | string                                                  | medium / small / mini          | -                                                    |
-| fit                     | 列的宽度是否自撑开                                                  | boolean                                                 | -                              | true                                                 |
-| show-header             | 是否显示表头                                                        | boolean                                                 | -                              | true                                                 |
-| highlight-current-row   | 是否要高亮当前行                                                    | boolean                                                 | -                              | false                                                |
-| current-row-key         | 当前行的 key，只写属性                                              | string / number                                         | -                              | -                                                    |
-| row-class-name          | 为行增加 className                                                  | Function({row, rowIndex}) / string                      | -                              | -                                                    |
-| row-style               | 为行增加 style                                                      | Function({row, rowIndex}) / object                      | -                              | -                                                    |
-| cell-class-name         | 为单元格增加 className                                              | Function({row, column, rowIndex, columnIndex}) / string | -                              | -                                                    |
-| cell-style              | 为单元格增加 style                                                  | Function({row, column, rowIndex, columnIndex}) / object | -                              | -                                                    |
-| header-row-class-name   | 为表头行增加 className                                              | Function({row, rowIndex}) / string                      | -                              | -                                                    |
-| header-row-style        | 为表头行增加 style                                                  | Function({row, rowIndex}) / object                      | -                              | -                                                    |
-| header-cell-class-name  | 为表头单元格增加 className                                          | Function({row, column, rowIndex, columnIndex}) / string | -                              | -                                                    |
-| header-cell-style       | 为表头单元格增加 style                                              | Function({row, column, rowIndex, columnIndex}) / object | -                              | -                                                    |
-| row-key                 | 行数据的 Key，使用 reserveSelection 功能时必填                      | Function(row) / string                                  | -                              | -                                                    |
-| empty-text              | 空数据时显示的文本内容                                              | string                                                  | -                              | 暂无数据                                             |
-| default-expand-all      | 是否默认展开所有行                                                  | boolean                                                 | -                              | false                                                |
-| expand-row-keys         | Table 目前的展开行，与 row-key 配合使用                             | array                                                   | -                              | -                                                    |
-| default-sort            | 默认的排序列的 prop 和顺序                                          | Object                                                  | `order`: ascending, descending | ascending                                            |
-| tooltip-effect          | tooltip `effect` 属性                                               | String                                                  | dark / light                   | -                                                    |
-| show-summary            | 是否在表尾显示合计行                                                | Boolean                                                 | -                              | false                                                |
-| sum-text                | 合计行第一列的文本                                                  | String                                                  | -                              | 合计                                                 |
-| summary-method          | 自定义的合计计算方法                                                | Function({ columns, data })                             | -                              | -                                                    |
-| span-method             | 合并行或列的计算方法                                                | Function({ row, column, rowIndex, columnIndex })        | -                              | -                                                    |
-| select-on-indeterminate | 当仅有部分行被选中时，点击表头的多选框时的行为，配合 selection 使用 | boolean                                                 | -                              | true                                                 |
-| indent                  | 展示树形数据时，树节点的缩进                                        | number                                                  | -                              | 16                                                   |
-| lazy                    | 是否懒加载子节点数据                                                | boolean                                                 | -                              | -                                                    |
-| load                    | 加载子节点数据的函数，lazy 为 true 时生效                           | Function(row, treeNode, resolve)                        | -                              | -                                                    |
-| tree-props              | 渲染嵌套数据的配置选项                                              | Object                                                  | -                              | { hasChildren: 'hasChildren', children: 'children' } |
-
-##### 参数
-
-| 参数                | 说明                                                                  | 类型                                    | 可选值                                                                                                                          | 默认值                            |
-| :------------------ | :-------------------------------------------------------------------- | :-------------------------------------- | :------------------------------------------------------------------------------------------------------------------------------ | :-------------------------------- |
-| prop                | 对应 data 的字段名 (**必填，需要是唯一值**)                           | string                                  | -                                                                                                                               | -                                 |
-| label               | 显示的标题                                                            | string                                  | -                                                                                                                               | -                                 |
-| slot                | 是否开启自定义插槽功能                                                | boolean                                 | -                                                                                                                               | false                             |
-| hide                | 是否在表格中隐藏                                                      | boolean                                 | -                                                                                                                               | false                             |
-| children            | 实现多级表头                                                          | array                                   | -                                                                                                                               | -                                 |
-| columnKey           | 当前项的 key，使用 filter-change 事件时需要                           | string                                  | -                                                                                                                               | -                                 |
-| width               | 对应列的宽度                                                          | string                                  | -                                                                                                                               | -                                 |
-| minWidth            | 对应列的最小宽度                                                      | string                                  | -                                                                                                                               | -                                 |
-| fixed               | 列是否固定，true 表示固定在左侧                                       | string / boolean                        | true / left / right                                                                                                             | -                                 |
-| renderHeader        | 列标题 Label 区域渲染使用的 Function                                  | Function(h, { column, $index })         | -                                                                                                                               | -                                 |
-| sortable            | 对应列是否可以排序                                                    | boolean / string                        | true / false / 'custom'                                                                                                         | false                             |
-| sortMethod          | 对数据进行排序的时候使用的方法                                        | Function(a, b)                          | -                                                                                                                               | -                                 |
-| sortBy              | 指定数据按照哪个属性进行排序                                          | string / array / Function(row, index)   | -                                                                                                                               | -                                 |
-| sortOrders          | 数据在排序时所使用排序策略的轮转顺序                                  | array                                   | `ascending` 表示升序，`descending` 表示降序，`null` 表示还原为原始顺序                                                          | ['ascending', 'descending', null] |
-| resizable           | 对应列是否可以通过拖动改变宽度，配合 border 使用                      | boolean                                 | -                                                                                                                               | true                              |
-| formatter           | 用来格式化内容                                                        | Function(row, column, cellValue, index) | -                                                                                                                               | -                                 |
-| showOverflowTooltip | 当内容过长被隐藏时显示 tooltip                                        | Boolean                                 | -                                                                                                                               | false                             |
-| align               | 对齐方式                                                              | string                                  | left / center / right                                                                                                           | left                              |
-| headerAlign         | 表头对齐方式                                                          | string                                  | left / center / right                                                                                                           | 同 align                          |
-| className           | 列的 className                                                        | string                                  | -                                                                                                                               | -                                 |
-| labelClassName      | 当前列标题的自定义类名                                                | string                                  | -                                                                                                                               | -                                 |
-| filters             | 数据过滤的选项                                                        | Array[{ text, value }]                  | -                                                                                                                               | -                                 |
-| filterPlacement     | 过滤弹出框的定位                                                      | string                                  | top / top-start / top-end / bottom / bottom-start / bottom-end / left / left-start / left-end / right / right-start / right-end | -                                 |
-| filterMultiple      | 数据过滤的选项是否多选                                                | boolean                                 | -                                                                                                                               | true                              |
-| filterMethod        | 数据过滤使用的方法                                                    | Function(value, row, column)            | -                                                                                                                               | -                                 |
-| filteredValue       | 选中的数据过滤项                                                      | array                                   | -                                                                                                                               | -                                 |
-| index               | 自定义索引，只能够在 index 中配置                                     | Function(index) / number                | -                                                                                                                               | -                                 |
-| selectable          | 这一行的 CheckBox 是否可以勾选，只能够在 selection 中配置             | Function(row, index)                    | -                                                                                                                               | -                                 |
-| reserveSelection    | 是否保留之前选中的数据（需指定 `row-key`），只能够在 selection 中配置 | boolean                                 | -                                                                                                                               | false                             |
-
-##### 事件
-
-| 事件名             | 说明                                                                                                                                         | 参数                              |
-| ------------------ | -------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------- |
-| select             | 当用户手动勾选数据行的 Checkbox 时触发的事件                                                                                                 | selection, row                    |
-| select-all         | 当用户手动勾选全选 Checkbox 时触发的事件                                                                                                     | selection                         |
-| selection-change   | 当选择项发生变化时会触发该事件                                                                                                               | selection                         |
-| cell-mouse-enter   | 当单元格 hover 进入时会触发该事件                                                                                                            | row, column, cell, event          |
-| cell-mouse-leave   | 当单元格 hover 退出时会触发该事件                                                                                                            | row, column, cell, event          |
-| cell-click         | 当某个单元格被点击时会触发该事件                                                                                                             | row, column, cell, event          |
-| cell-dblclick      | 当某个单元格被双击击时会触发该事件                                                                                                           | row, column, cell, event          |
-| row-click          | 当某一行被点击时会触发该事件                                                                                                                 | row, column, event                |
-| row-contextmenu    | 当某一行被鼠标右键点击时会触发该事件                                                                                                         | row, column, event                |
-| row-dblclick       | 当某一行被双击时会触发该事件                                                                                                                 | row, column, event                |
-| header-click       | 当某一列的表头被点击时会触发该事件                                                                                                           | column, event                     |
-| header-contextmenu | 当某一列的表头被鼠标右键点击时触发该事件                                                                                                     | column, event                     |
-| sort-change        | 当表格的排序条件发生变化的时候会触发该事件                                                                                                   | { column, prop, order }           |
-| filter-change      | 当表格的筛选条件发生变化的时候会触发该事件，参数的值是一个对象，对象的 key 是 column 的 columnKey，对应的 value 为用户选择的筛选条件的数组。 | filters                           |
-| current-change     | 当表格的当前行发生变化的时候会触发该事件，如果要高亮当前行，请打开表格的 highlight-current-row 属性                                          | currentRow, oldCurrentRow         |
-| header-dragend     | 当拖动表头改变了列的宽度的时候会触发该事件                                                                                                   | newWidth, oldWidth, column, event |
-| expand-change      | 当用户对某一行展开或者关闭的时候会触发该事件（展开行时，回调的第二个参数为 expandedRows；树形表格时第二参数为 expanded）                     | row, (expandedRows \| expanded)   |
-| size-change        | pageSize 改变时会触发                                                                                                                        | 每页条数                          |
-| current-change     | currentPage 改变时会触发                                                                                                                     | 当前页                            |
-| prev-click         | 用户点击上一页按钮改变当前页后触发                                                                                                           | 当前页                            |
-| next-click         | 用户点击下一页按钮改变当前页后触发                                                                                                           | 当前页                            |
-
-##### 方法
-
-| 方法名             | 说明                                                                                                                    | 参数                        |
-| ------------------ | ----------------------------------------------------------------------------------------------------------------------- | --------------------------- |
-| clearSelection     | 用于多选表格，清空用户的选择                                                                                            | -                           |
-| toggleRowSelection | 用于多选表格，切换某一行的选中状态，如果使用了第二个参数，则是设置这一行选中与否（selected 为 true 则选中）             | row, selected               |
-| toggleAllSelection | 用于多选表格，切换全选和全不选                                                                                          | -                           |
-| toggleRowExpansion | 用于可展开表格与树形表格，切换某一行的展开状态，如果使用了第二个参数，则是设置这一行展开与否（expanded 为 true 则展开） | row, expanded               |
-| setCurrentRow      | 用于单选表格，设定某一行为选中行，如果调用时不加参数，则会取消目前高亮行的选中状态。                                    | row                         |
-| clearSort          | 用于清空排序条件，数据会恢复成未排序的状态                                                                              | -                           |
-| clearFilter        | 不传入参数时用于清空所有过滤条件，数据会恢复成未过滤的状态，也可传入由 columnKey 组成的数组以清除指定列的过滤条件       | columnKey                   |
-| doLayout           | 对 Table 进行重新布局。当 Table 或其祖先元素由隐藏切换为显示时，可能需要调用此方法                                      | -                           |
-| sort               | 手动对 Table 进行排序。参数`prop`属性指定排序列，`order`指定排序顺序。                                                  | prop: string, order: string |
-
-::: tip 提示
-如果使用 `typescript` 可以从组件中导出 `ITableExpose` 提供更好的类型推导
-:::
-
-### 插槽
-
-| name          | 说明                                                                     |
-| :------------ | :----------------------------------------------------------------------- |
-| -             | 在右侧菜单前插入的任意内容                                               |
-| menu          | 表格右侧自定义按钮，参数为 { size, row, column, $index }                 |
-| expand        | 当 expand 为 true 时，配置展开显示的内容，参数为 { row, column, $index } |
-| append        | 插入至表格最后一行之后的内容                                             |
-| [prop]        | 当前这列的内容，参数为 { size, row, column, $index }                     |
-| [prop]-header | 当前这列表头的内容，参数为 { size, column, $index }                      |
-
-::: tip 提示
-[prop] 为 columns 中定义的 prop
-:::
diff --git a/example/docs/en-US/guide/home.md b/example/docs/en-US/guide/home.md
deleted file mode 100644
index 0a75d65..0000000
--- a/example/docs/en-US/guide/home.md
+++ /dev/null
@@ -1 +0,0 @@
-##### 介绍
diff --git a/example/docs/en-US/guide/index.md b/example/docs/en-US/guide/index.md
deleted file mode 100644
index d89e87a..0000000
--- a/example/docs/en-US/guide/index.md
+++ /dev/null
@@ -1,5 +0,0 @@
-##### 安装
-
-```
-npm install layui-vue --save
-```
diff --git a/example/docs/zh-CN/components/animation.md b/example/docs/zh-CN/components/animation.md
deleted file mode 100644
index e50b1aa..0000000
--- a/example/docs/zh-CN/components/animation.md
+++ /dev/null
@@ -1,94 +0,0 @@
-::: title 基础使用
-:::
-
-::: demo
-
-<template>
-  <div class="anim">
-    <ul class="layui-border-box site-doc-icon site-doc-anim">
-      <li style="height:auto">
-        <div class="layui-anim layui-anim-down">顶部往下滑入</div>
-        <div class="code">layui-anim-down</div>
-      </li>
-      <li style="height:auto">
-        <div class="layui-anim layui-anim-downbit">微微往下滑入</div>
-        <div class="code">layui-anim-downbit</div>
-      </li>
-      <li style="height:auto">
-        <div class="layui-anim layui-anim-up">底部往上滑入</div>
-        <div class="code">layui-anim-up</div>
-      </li>
-      <li style="height:auto">
-        <div class="layui-anim layui-anim-upbit">微微往上滑入</div>
-        <div class="code">layui-anim-upbit</div>
-      </li>
-      <li style="height:auto">
-        <div class="layui-anim layui-anim-scale">平滑放大</div>
-        <div class="code">layui-anim-scale</div>
-      </li>
-      <li style="height:auto">
-        <div class="layui-anim layui-anim-scaleSpring">弹簧式放大</div>
-        <div class="code">layui-anim-scaleSpring</div>
-      </li>
-      <li style="height:auto">
-        <div class="layui-anim layui-anim-scalesmall">平滑放小</div>
-        <div class="code">layui-anim-scalesmall</div>
-      </li>
-      <li style="height:auto">
-        <div class="layui-anim layui-anim-scalesmall-spring">弹簧式放小</div>
-        <div class="code">layui-anim-scalesmall-spring</div>
-      </li>
-      <li style="height:auto">
-        <div class="layui-anim layui-anim-fadein">渐现</div>
-        <div class="code">layui-anim-fadein</div>
-      </li>
-      <li style="height:auto">
-        <div class="layui-anim layui-anim-fadeout">渐隐</div>
-        <div class="code">layui-anim-fadeout</div>
-      </li>
-      <li style="height:auto">
-        <div class="layui-anim layui-anim-rotate">360度旋转</div>
-        <div class="code">layui-anim-rotate</div>
-      </li>
-      <li style="height:auto">
-        <div class="layui-anim layui-anim-rotate layui-anim-loop">循环动画</div>
-        <div class="code">追加：layui-anim-loop</div>
-      </li>
-    </ul>
-  </div>
-</template>
-
-<script>
-import { ref } from 'vue'
-
-export default {
-  setup() {
-    return {
-    }
-  }
-}
-</script>
-
-:::
-
-::: title 动画类名
-:::
-
-::: table
-
-| 类名                              | 描述         | 使用                                           |
-| --------------------------------- | ------------ | ---------------------------------------------- |
-| layui-anim-down                   | 顶部往下滑入 | `layui-anim layui-anim-down`                   |
-| layui-anim-downbit                | 微微往下滑入 | `layui-anim layui-anim-downbit`                |
-| layui-anim-up                     | 底部往上滑入 | `layui-anim layui-anim-up`                     |
-| layui-anim-upbit                  | 微微往上滑入 | `layui-anim ayui-anim-upbit`                   |
-| layui-anim-scale                  | 平滑放大     | `layui-anim layui-anim-scale`                  |
-| layui-anim-scaleSpring            | 弹簧式放大   | `layui-anim layui-anim-scaleSpring`            |
-| layui-anim-scalesmall             | 平滑放小     | `layui-anim layui-anim-scalesmall`             |
-| layui-anim-scalesmall-spring      | 弹簧式放小   | `layui-anim layui-anim-scalesmall-spring`      |
-| layui-anim-fadein                 | 渐现         | `layui-anim layui-anim-fadein`                 |
-| layui-anim-fadeout                | 渐隐         | `layui-anim layui-anim-fadeout`                |
-| layui-anim-rotate                 | 360 度旋转   | `layui-anim layui-anim-rotate`                 |
-| layui-anim-rotate layui-anim-loop | 循环动画     | `layui-anim layui-anim-rotate layui-anim-loop` |
-
-:::
diff --git a/example/docs/zh-CN/components/avatar.md b/example/docs/zh-CN/components/avatar.md
deleted file mode 100644
index 4726a96..0000000
--- a/example/docs/zh-CN/components/avatar.md
+++ /dev/null
@@ -1,94 +0,0 @@
-::: title 基础使用
-:::
-
-::: demo
-
-<template>
-  <lay-avatar :src="src"></lay-avatar>
-</template>
-
-<script>
-import { ref } from 'vue'
-
-export default {
-  setup() {
-
-    const src = ref("https://portrait.gitee.com/uploads/avatars/user/2813/8441097_shaynas_1610801433.png")
-
-    return {
-        src
-    }
-  }
-}
-</script>
-
-:::
-
-::: title 圆角头像
-:::
-
-::: demo
-
-<template>
-  <lay-avatar :src="src" radius></lay-avatar>
-</template>
-
-<script>
-import { ref } from 'vue'
-
-export default {
-
-    setup() {
-
-        const src = "https://portrait.gitee.com/uploads/avatars/user/2813/8441097_shaynas_1610801433.png"
-        
-        return {
-            src
-        }
-  }
-}
-</script>
-
-:::
-
-::: title 尺寸大小
-:::
-
-::: demo
-
-<template>
-  <lay-avatar :src="src" size="xs"></lay-avatar> 
-  <lay-avatar :src="src" size="sm"></lay-avatar>
-  <lay-avatar :src="src"></lay-avatar>
-  <lay-avatar :src="src" size="lg"></lay-avatar>
-</template>
-
-<script>
-import { ref } from 'vue'
-
-export default {
-    setup() {
-
-        const src = "https://portrait.gitee.com/uploads/avatars/user/2813/8441097_shaynas_1610801433.png"
-
-        return {
-          src
-        }
-  }
-}
-</script>
-
-:::
-
-::: title 头像属性
-:::
-
-::: table
-
-| 属性   | 描述 | 可选值         |
-| ------ | ---- | -------------- |
-| src    | 图源 | --             |
-| size   | 尺寸 | `xs` `sm` `lg` |
-| radius | 圆形 | `true` `false` |
-
-:::
diff --git a/example/docs/zh-CN/components/badge.md b/example/docs/zh-CN/components/badge.md
deleted file mode 100644
index d2f9747..0000000
--- a/example/docs/zh-CN/components/badge.md
+++ /dev/null
@@ -1,49 +0,0 @@
-::: title 基础使用
-:::
-
-::: demo
-
-<template>
-    <lay-badge type="dot"></lay-badge>&nbsp;
-    <lay-badge type="dot" theme="orange"></lay-badge>&nbsp;
-    <lay-badge type="dot" theme="green"></lay-badge>&nbsp;
-    <lay-badge type="dot" theme="cyan"></lay-badge>&nbsp;
-    <lay-badge type="dot" theme="blue"></lay-badge>&nbsp;
-    <lay-badge type="dot" theme="black"></lay-badge>&nbsp;
-    <lay-badge type="dot" theme="gray"></lay-badge>&nbsp;
-    <lay-badge >赤</lay-badge>&nbsp;
-    <lay-badge theme="orange">橙</lay-badge>&nbsp;
-    <lay-badge theme="green">绿</lay-badge>&nbsp;
-    <lay-badge theme="cyan">青</lay-badge>&nbsp;
-    <lay-badge theme="blue">蓝</lay-badge>&nbsp;
-    <lay-badge theme="black">黑</lay-badge>&nbsp;
-    <lay-badge theme="gray">灰</lay-badge>&nbsp;
-    <lay-badge type="rim">6</lay-badge>&nbsp;
-    <lay-badge type="rim">Hot</lay-badge>&nbsp;
-</template>
-
-<script>
-import { ref } from 'vue'
-
-export default {
-  setup() {
-
-    return {
-    }
-  }
-}
-</script>
-
-:::
-
-::: title 徽章属性
-:::
-
-::: table
-
-|       |      |                                               |
-| ----- | ---- | --------------------------------------------- |
-| type  | 类型 | `dot` `rim`                                   |
-| theme | 主题 | `orange` `green` `cyan` `blue` `black` `gray` |
-
-:::
diff --git a/example/docs/zh-CN/components/block.md b/example/docs/zh-CN/components/block.md
deleted file mode 100644
index 1d2500a..0000000
--- a/example/docs/zh-CN/components/block.md
+++ /dev/null
@@ -1,59 +0,0 @@
-::: title 基础使用
-:::
-
-::: demo
-
-<template>
-  <lay-block>引用区域的文字</lay-block>
-</template>
-
-<script>
-import { ref } from 'vue'
-
-export default {
-  setup() {
-
-    return {
-    }
-  }
-}
-</script>
-
-:::
-
-::: title 灰色主题
-:::
-
-::: demo
-
-<template>
-  <lay-block :nm="nm">引用区域的文字</lay-block>
-</template>
-
-<script>
-import { ref } from 'vue'
-
-export default {
-  setup() {
-
-    const nm = ref(true)
-
-    return {
-      nm
-    }
-  }
-}
-</script>
-
-:::
-
-::: title Block 属性
-:::
-
-::: table
-
-| Name | Description | Accepted Values |
-| ---- | ----------- | --------------- |
-| nm   | 灰色样式    | --              |
-
-:::
diff --git a/example/docs/zh-CN/components/breadcrumb.md b/example/docs/zh-CN/components/breadcrumb.md
deleted file mode 100644
index 0dc7e11..0000000
--- a/example/docs/zh-CN/components/breadcrumb.md
+++ /dev/null
@@ -1,102 +0,0 @@
-::: title 基础使用
-:::
-
-::: demo
-
-<template>
-    <lay-breadcrumb>
-        <lay-breadcrumb-item title="工作空间"></lay-breadcrumb-item>
-        <lay-breadcrumb-item title="控制台"></lay-breadcrumb-item>
-        <lay-breadcrumb-item title="访问量"></lay-breadcrumb-item>
-    </lay-breadcrumb>
-</template>
-
-<script>
-import { ref } from 'vue'
-
-export default {
-  setup() {
-
-    return {
-    }
-  }
-}
-</script>
-
-:::
-
-::: title 指定分割
-:::
-
-::: demo
-
-<template>
-    <lay-breadcrumb separator=">">
-        <lay-breadcrumb-item title="热门音乐"></lay-breadcrumb-item>
-        <lay-breadcrumb-item title="王杰"></lay-breadcrumb-item>
-        <lay-breadcrumb-item title="谁明浪子心"></lay-breadcrumb-item>
-    </lay-breadcrumb>
-</template>
-
-<script>
-import { ref } from 'vue'
-
-export default {
-  setup() {
-
-    return {
-    }
-  }
-}
-</script>
-
-:::
-
-::: title 使用插槽
-:::
-
-::: demo
-
-<template>
-    <lay-breadcrumb separator="--">
-        <lay-breadcrumb-item>今天</lay-breadcrumb-item>
-        <lay-breadcrumb-item>有些</lay-breadcrumb-item>
-        <lay-breadcrumb-item>不开心</lay-breadcrumb-item>
-    </lay-breadcrumb>
-</template>
-
-<script>
-import { ref } from 'vue'
-
-export default {
-  setup() {
-
-    return {
-    }
-  }
-}
-</script>
-
-:::
-
-::: title 面包屑属性
-:::
-
-::: table
-
-| 属性      | 描述   | 默认值 |
-| --------- | ------ | ------ |
-| separator | 分割符 | `/`    |
-
-:::
-
-::: title 面包屑插槽
-:::
-
-::: table
-
-| 插槽    | 描述     | 默认值 |
-| ------- | -------- | ------ |
-| default | 默认插槽 | `--`   |
-
-:::
diff --git a/example/docs/zh-CN/components/button.md b/example/docs/zh-CN/components/button.md
deleted file mode 100644
index 3e771d8..0000000
--- a/example/docs/zh-CN/components/button.md
+++ /dev/null
@@ -1,307 +0,0 @@
-::: title 基础使用
-:::
-
-::: demo 使用 lay-button 标签, 创建一个按钮
-
-<template>
-  <lay-button type="primary">原始按钮</lay-button>
-  <lay-button type="default">默认按钮</lay-button>
-  <lay-button type="normal">百搭按钮</lay-button>
-  <lay-button type="warm">暖色按钮</lay-button>
-  <lay-button type="danger">警告按钮</lay-button>
-  <lay-button type="disabled">禁用按钮</lay-button>
-</template>
-
-<script>
-import { ref } from 'vue'
-
-export default {
-  setup() {
-
-    return {
-    }
-  }
-}
-</script>
-
-:::
-
-::: title 简约按钮
-:::
-
-::: demo 使用 border 属性设置 主要按钮 边框主题
-
-<template>
-  <lay-button type="primary">原始按钮</lay-button>
-  <lay-button type="primary" border="green">默认按钮</lay-button>
-  <lay-button type="primary" border="blue">百搭按钮</lay-button>
-  <lay-button type="primary" border="orange">暖色按钮</lay-button>
-  <lay-button type="primary" border="red">警告按钮</lay-button>
-  <lay-button type="primary" border="black">禁用按钮</lay-button>
-</template>
-
-<script>
-import { ref } from 'vue'
-
-export default {
-  setup() {
-
-    return {
-    }
-  }
-}
-</script>
-
-:::
-
-::: title 按钮尺寸
-:::
-
-::: demo 传入 size 属性, 创建指定尺寸的按钮, 可选值 `lg` `sm` `xs`
-
-<template>
-  <lay-button type="primary" size="lg">原始按钮</lay-button>
-  <lay-button type="default" size="lg">默认按钮</lay-button>
-  <lay-button type="normal" size="lg">百搭按钮</lay-button>
-  <lay-button type="warm" size="lg">暖色按钮</lay-button>
-  <lay-button type="danger" size="lg">警告按钮</lay-button>
-  <lay-button type="disabled" size="lg">禁用按钮</lay-button>
-</template>
-
-<script>
-import { ref } from 'vue'
-
-export default {
-  setup() {
-
-    return {
-    }
-  }
-}
-</script>
-
-:::
-
-::: title 流式按钮
-:::
-
-::: demo 传入 fluid 属性, 创建最大化按钮
-
-<template>
-  <lay-button type="primary" fluid>最大化按钮</lay-button>
-  <br/>
-  <br/>
-  <lay-button type="default" fluid>最大化按钮</lay-button>
-</template>
-
-<script>
-import { ref } from 'vue'
-
-export default {
-  setup() {
-
-    return {
-    }
-  }
-}
-</script>
-
-:::
-
-::: title 圆角按钮
-:::
-
-::: demo 传入 radius 属性，创建圆角按钮
-
-<template>
-  <lay-button type="primary" radius>原始按钮</lay-button>
-  <lay-button type="default" radius>默认按钮</lay-button>
-  <lay-button type="normal" radius>百搭按钮</lay-button>
-  <lay-button type="warm" radius>暖色按钮</lay-button>
-  <lay-button type="danger" radius>警告按钮</lay-button>
-  <lay-button type="disabled" radius>禁用按钮</lay-button>
-</template>
-
-<script>
-import { ref } from 'vue'
-
-export default {
-  setup() {
-
-    return {
-    }
-  }
-}
-</script>
-
-:::
-
-::: title 按钮分组
-:::
-
-::: demo 使用 lay-button-group 标签, 创建一个按钮组
-
-<template>
-  <div>
-    <lay-button-group>
-      <lay-button type="default">默认按钮</lay-button>
-      <lay-button type="default">默认按钮</lay-button>
-      <lay-button type="default">默认按钮</lay-button>
-    </lay-button-group>
-    <lay-button-group>
-      <lay-button type="primary">默认按钮</lay-button>
-      <lay-button type="primary">默认按钮</lay-button>
-      <lay-button type="primary">默认按钮</lay-button>
-    </lay-button-group>
-  </div>
-</template>
-
-<script>
-import { ref } from 'vue'
-
-export default {
-  setup() {
-
-    return {
-    }
-  }
-}
-</script>
-
-:::
-
-::: title 图标按钮
-:::
-
-::: demo 结合 lay-icon 组件, 创建图标按钮
-
-<template>
-  <lay-button-container>
-      <lay-button type="primary"><lay-icon type="layui-icon-left"></lay-icon></lay-button>
-      <lay-button type="primary"><lay-icon type="layui-icon-right"></lay-icon></lay-button>
-  </lay-button-container>
-</template>
-
-<script>
-import { ref } from 'vue'
-
-export default {
-  setup() {
-
-    return {
-    }
-  }
-}
-</script>
-
-:::
-
-::: title 按钮容器
-:::
-
-::: demo 使用 lay-button-container 标签, 创建一个按钮容器
-
-<template>
-  <lay-button-container>
-      <lay-button type="default">新增</lay-button>
-      <lay-button type="default">删除</lay-button>
-      <lay-button type="default">修改</lay-button>
-  </lay-button-container>
-</template>
-
-<script>
-import { ref } from 'vue'
-
-export default {
-  setup() {
-
-    return {
-    }
-  }
-}
-</script>
-
-:::
-
-::: title 加载按钮
-:::
-
-::: demo 传入 loading 属性, 控制按钮的加载状态
-
-<template>
-  <lay-button-container>
-      <lay-button type="default" :loading="loading">加载</lay-button>
-      <lay-switch v-model="loading"></lay-switch>
-  </lay-button-container>
-</template>
-
-<script>
-import { ref } from 'vue'
-
-export default {
-  setup() {
-
-    const loading = ref(true)
-
-    return {
-      loading
-    }
-  }
-}
-</script>
-
-:::
-
-::: title 事件处理
-:::
-
-::: demo 使用 @click 设置单击回调
-
-<template>
-  <lay-button type="default" @click="clickHandle">单击事件</lay-button>
-</template>
-
-<script>
-import { ref } from 'vue'
-
-export default {
-  setup() {
-    
-    const clickHandle = function() {
-      console.log('点击事件')
-    }
-
-    return {
-      clickHandle
-    }
-  }
-}
-</script>
-
-:::
-
-::: title 按钮属性
-:::
-
-::: table
-
-| 属性   | 描述   | 可选值                                        |
-| ------ | ------ | --------------------------------------------- |
-| type   | 主题   | `primary` `normal` `warm` `danger` `disabled` |
-| size   | 尺寸   | `lg` `sm` `xs`                                |
-| fluid  | 最大化 | `true` `false`                                |
-| radius | 圆角   | `true` `false`                                |
-| border | 边框   | `green` `blue` `orange` `red` `black`         |
-
-:::
-
-::: title 按钮事件
-:::
-
-::: table
-
-| 事件  | 描述     | 参数 |
-| ----- | -------- | ---- |
-| click | 单击事件 | `--` |
-
-:::
diff --git a/example/docs/zh-CN/components/card.md b/example/docs/zh-CN/components/card.md
deleted file mode 100644
index 6eb6ccb..0000000
--- a/example/docs/zh-CN/components/card.md
+++ /dev/null
@@ -1,129 +0,0 @@
-::: title 基础使用
-:::
-
-::: demo
-
-<template>
-<div class="card-container">
-  <lay-card title="标题">
-      内容
-  </lay-card>
-</div>
-</template>
-
-<script>
-import { ref } from 'vue'
-
-export default {
-  setup() {
-
-    return {
-    }
-  }
-}
-</script>
-
-<style>
-.card-container {
-  background: whitesmoke;
-  padding: 20px;
-}
-</style>
-
-:::
-
-::: title 卡片插槽
-:::
-
-::: demo
-
-<template>
-<div class="card-container">
-  <lay-card>
-      <template v-slot:header>
-      标题
-      </template>
-      <template v-slot:body>
-      内容
-      </template>
-  </lay-card>
-</div>
-</template>
-
-<script>
-import { ref } from 'vue'
-
-export default {
-  setup() {
-
-    return {
-    }
-  }
-}
-</script>
-
-<style>
-.card-container {
-  background: whitesmoke;
-  padding: 20px;
-}
-</style>
-
-:::
-
-::: title 简单使用
-:::
-
-::: demo
-
-<template>
-<div class="card-container">
-  <lay-card>
-      内容
-  </lay-card>
-</div>
-</template>
-
-<script>
-import { ref } from 'vue'
-
-export default {
-  setup() {
-
-    return {
-    }
-  }
-}
-</script>
-
-<style>
-.card-container {
-  background: whitesmoke;
-  padding: 20px;
-}
-</style>
-
-:::
-
-::: title 卡片属性
-:::
-
-::: table
-
-| 属性  | 描述 | 可选值 |
-| ----- | ---- | ------ |
-| title | 标题 | --     |
-
-:::
-
-::: title 卡片插槽
-:::
-
-::: table
-
-| 插槽   | 描述     | 可选值 |
-| ------ | -------- | ------ |
-| header | 头部插槽 | --     |
-| body   | 内容插槽 | --     |
-
-:::
diff --git a/example/docs/zh-CN/components/carousel.md b/example/docs/zh-CN/components/carousel.md
deleted file mode 100644
index b5b841f..0000000
--- a/example/docs/zh-CN/components/carousel.md
+++ /dev/null
@@ -1,141 +0,0 @@
-::: title 基础使用
-:::
-
-::: demo
-
-<template>
-  <lay-carousel v-model="active">
-    <lay-carousel-item id="1">
-      <div style="color: white;text-align: center;width:100%;height:300px;line-height:300px;background-color:#79C48C;">条目一</div>
-    </lay-carousel-item>
-    <lay-carousel-item id="2">
-      <div style="color: white;text-align: center;width:100%;height:300px;line-height:300px;background-color:#79C48C;">条目二</div>
-    </lay-carousel-item>
-    <lay-carousel-item id="3">
-      <div style="color: white;text-align: center;width:100%;height:300px;line-height:300px;background-color:#79C48C;">条目三</div>
-    </lay-carousel-item>
-    <lay-carousel-item id="4">
-      <div style="color: white;text-align: center;width:100%;height:300px;line-height:300px;background-color:#79C48C;">条目四</div>
-    </lay-carousel-item>
-  </lay-carousel>
-</template>
-
-<script>
-import { ref } from 'vue'
-
-export default {
-  setup() {
-
-    const active = ref("1")
-
-    return {
-      active
-    }
-  }
-}
-</script>
-
-:::
-
-::: title 不同方向
-:::
-
-::: demo
-
-<template>
-  <lay-carousel v-model="active" anim="updown">
-    <lay-carousel-item id="1">
-      <div style="color: white;text-align: center;width:100%;height:300px;line-height:300px;background-color:#79C48C;">条目一</div>
-    </lay-carousel-item>
-    <lay-carousel-item id="2">
-      <div style="color: white;text-align: center;width:100%;height:300px;line-height:300px;background-color:#79C48C;">条目二</div>
-    </lay-carousel-item>
-    <lay-carousel-item id="3">
-      <div style="color: white;text-align: center;width:100%;height:300px;line-height:300px;background-color:#79C48C;">条目三</div>
-    </lay-carousel-item>
-    <lay-carousel-item id="4">
-      <div style="color: white;text-align: center;width:100%;height:300px;line-height:300px;background-color:#79C48C;">条目四</div>
-    </lay-carousel-item>
-  </lay-carousel>
-</template>
-
-<script>
-import { ref } from 'vue'
-
-export default {
-  setup() {
-
-    const active = ref("1")
-
-    return {
-      active
-    }
-  }
-}
-</script>
-
-:::
-
-::: title 控制位置
-:::
-
-::: demo
-
-<template>
-  <lay-carousel v-model="active" indicator="outside">
-    <lay-carousel-item id="1">
-      <div style="color: white;text-align: center;width:100%;height:300px;line-height:300px;background-color:#79C48C;">条目一</div>
-    </lay-carousel-item>
-    <lay-carousel-item id="2">
-      <div style="color: white;text-align: center;width:100%;height:300px;line-height:300px;background-color:#79C48C;">条目二</div>
-    </lay-carousel-item>
-    <lay-carousel-item id="3">
-      <div style="color: white;text-align: center;width:100%;height:300px;line-height:300px;background-color:#79C48C;">条目三</div>
-    </lay-carousel-item>
-    <lay-carousel-item id="4">
-      <div style="color: white;text-align: center;width:100%;height:300px;line-height:300px;background-color:#79C48C;">条目四</div>
-    </lay-carousel-item>
-  </lay-carousel>
-</template>
-
-<script>
-import { ref } from 'vue'
-
-export default {
-  setup() {
-
-    const active = ref("1")
-
-    return {
-      active
-    }
-  }
-}
-</script>
-
-:::
-
-::: title 轮播属性
-:::
-
-::: table
-
-| 属性      | 描述         | 可选值                    |
-| --------- | ------------ | ------------------------- |
-| v-model   | 当前激活项   | `--`                      |
-| anim      | 切换方向     | `default` `updown`        |
-| indicator | 控制器位置   | `inside` `outside` `none` |
-| arrow     | 切换按钮状态 | `hover` `always` `none`   |
-
-:::
-
-::: title 轮播事件
-:::
-
-::: table
-
-| 事件   | 描述     | 可选值 |
-| ------ | -------- | ------ |
-| change | 切换回调 | id     |
-
-:::
diff --git a/example/docs/zh-CN/components/checkbox.md b/example/docs/zh-CN/components/checkbox.md
deleted file mode 100644
index 77e641e..0000000
--- a/example/docs/zh-CN/components/checkbox.md
+++ /dev/null
@@ -1,212 +0,0 @@
-::: title 基础使用
-:::
-
-::: demo
-
-<template>
-  <lay-form>
-    <lay-checkbox name="like" skin="primary"  v-model="checked1" label="1" ></lay-checkbox>
- </lay-form>
-</template>
-
-<script>
-import { ref } from 'vue'
-
-export default {
-  setup() {
-
-    const checked1 = ref(false)
-
-    return {
-      checked1
-    }
-  }
-}
-</script>
-
-:::
-
-::: title 默认样式
-:::
-
-::: demo
-
-<template>
-  <lay-form>
-    <lay-checkbox name="like" label="1" v-model="checked2" >普通</lay-checkbox>
- </lay-form>
-</template>
-
-<script>
-import { ref } from 'vue'
-
-export default {
-  setup() {
-
-    const checked2 = ref(false)
-
-    return {
-      checked2
-    }
-  }
-}
-</script>
-
-:::
-
-::: title 复选框组
-:::
-
-::: demo
-
-<template>
-  <lay-form>
-    <lay-checkbox-group v-model="checkeds" @change="groupChange">
-      <lay-checkbox name="like" skin="primary" label="1">写作</lay-checkbox>
-      <lay-checkbox name="like" skin="primary" label="2">画画</lay-checkbox>
-      <lay-checkbox name="like" skin="primary" label="3">运动</lay-checkbox>
-    </lay-checkbox-group>
-  </lay-form>
-</template>
-
-<script>
-import { ref } from 'vue'
-
-export default {
-  setup() {
-
-    const checkeds = ref(['1','2']);
-    const groupChange = function(val) {
-      console.log("回调:" + JSON.stringify(val))
-    }
-    
-    return {
-        checkeds,
-        groupChange
-    }
-  }
-}
-</script>
-
-:::
-
-::: title 完整案例
-:::
-
-::: demo
-
-<template>
-  <lay-form>
-    <lay-checkbox name="like" skin="primary" v-model="checked3" label="1">写作</lay-checkbox>
-    <lay-checkbox name="like" skin="primary" v-model="checked4" label="2">画画</lay-checkbox>
-    <lay-checkbox name="like" skin="primary" v-model="checked5" label="3">运动</lay-checkbox>
-  </lay-form>
-</template>
-
-<script>
-import { ref } from 'vue'
-
-export default {
-  setup() {
-
-    const checked3 = ref(true);
-    const checked4 = ref(true);
-    const checked5 = ref(true);
-
-    return {
-        checked3, checked4, checked5
-    }
-  }
-}
-</script>
-
-:::
-
-::: title 禁用状态
-:::
-
-::: demo
-
-<template>
-  <lay-form>
-    <lay-checkbox name="like" skin="primary" label="1" :disabled="disabled" v-model="checked6">禁用</lay-checkbox>
- </lay-form>
-</template>
-
-<script>
-import { ref } from 'vue'
-
-export default {
-  setup() {
-
-    const disabled = ref(true)
-
-    const checked6 = ref(false);
-
-    return {
-      disabled,checked6
-    }
-  }
-}
-</script>
-
-:::
-
-::: title 事件回调
-:::
-
-::: demo
-
-<template>
-  <lay-form>
-    <lay-checkbox name="like" skin="primary" label="1" @change="change" v-model="checked7">回调</lay-checkbox>
- </lay-form>
-</template>
-
-<script>
-import { ref } from 'vue'
-
-export default {
-  setup() {
-
-    const checked7 = ref(true);
-
-    const change = function(isChecked) {
-        console.log("是否选中:" + isChecked)
-    }
-
-    return {
-        change,
-        checked7
-    }
-  }
-}
-</script>
-
-:::
-
-::: title 复选框属性
-:::
-
-::: table
-
-| 属性                | 描述          | 可选值               |
-| ------------------- | ------------- | -------------------- |
-| name                | 原始属性 name | --                   |
-| skin                | 主题          | --                   |
-| label               | 选中值        | --                   |
-| v-model | 是否选中      | `true` `false`       |
-| change              | 切换事件      | isChecked : 当前状态 |
-
-:::
-
-::: title 复选框事件
-:::
-
-::: table
-
-| 事件   | 描述     | 可选值               |
-| ------ | -------- | -------------------- |
-| change | 切换事件 | isChecked : 当前状态 |
-
-:::
diff --git a/example/docs/zh-CN/components/collapse.md b/example/docs/zh-CN/components/collapse.md
deleted file mode 100644
index 39c0c6c..0000000
--- a/example/docs/zh-CN/components/collapse.md
+++ /dev/null
@@ -1,52 +0,0 @@
-::: title 基础使用
-:::
-
-::: demo
-
-<template>
-  <lay-collapse :openKeys="openKeys">
-    <lay-collapse-item title="标题" id="1"> 内容 </lay-collapse-item>
-    <lay-collapse-item title="标题" id="2"> 内容 </lay-collapse-item>
-    <lay-collapse-item title="标题" id="3"> 内容 </lay-collapse-item>
-  </lay-collapse>
-</template>
-
-<script>
-import { ref } from 'vue'
-
-export default {
-  setup() {
-
-    const openKeys = ref(["1","2","3"])
-
-    return {
-      openKeys
-    }
-  }
-}
-</script>
-
-:::
-
-::: title Collapse 属性
-:::
-
-::: table
-
-| Name     | Description | Accepted Values |
-| -------- | ----------- | --------------- |
-| openKeys | 打开的目录  | `array`         |
-
-:::
-
-::: title Collapse-item 属性
-:::
-
-::: table
-
-| Name  | Description | Accepted Values |
-| ----- | ----------- | --------------- |
-| id    | 编号        | --              |
-| title | 标题        | --              |
-
-:::
diff --git a/example/docs/zh-CN/components/color.md b/example/docs/zh-CN/components/color.md
deleted file mode 100644
index 46a9663..0000000
--- a/example/docs/zh-CN/components/color.md
+++ /dev/null
@@ -1,162 +0,0 @@
-::: title 主色调
-:::
-
-::: demo
-
-<template>
-    <ul class="layui-row layui-col-space15">
-        <li class="layui-col-sm6">
-            <div style="background-color: #009688;padding:10px;color:whitesmoke;padding:30px;border-radius:2px;">
-                <p>#009688</p><p>
-                </p><p tips="">主色调之一</p>
-            </div>
-        </li>
-        <li class="layui-col-sm6">
-            <div style="background-color: #5FB878;padding:10px;color:whitesmoke;padding:30px;border-radius:2px;">
-                <p>#5FB878</p><p>
-                </p><p tips="">一般用于选中状态</p>
-            </div>
-        </li>
-        <li class="layui-col-sm6">
-            <div style="background-color: #393D49;padding:10px;color:whitesmoke;padding:30px;border-radius:2px;">
-                <p>#393D49</p><p>
-                </p><p tips="">通常用于导航</p>
-            </div>
-        </li>
-        <li class="layui-col-sm6">
-            <div style="background-color: #1E9FFF;padding:10px;color:whitesmoke;padding:30px;border-radius:2px;">
-                <p>#1E9FFF</p><p>
-                </p><p tips="">经典蓝</p>
-            </div>
-        </li>
-    </ul>
-</template>
-
-<script>
-import { ref } from 'vue'
-
-export default {
-  setup() {
-
-    return {
-    }
-  }
-}
-</script>
-
-:::
-
-::: title 次色调
-:::
-
-::: demo
-
-<template>
-<ul class="layui-row layui-col-space15">
-      <li class="layui-col-sm6">
-        <div style="background-color: #FFB800;padding:10px;color:whitesmoke;padding:30px;border-radius:2px;">
-          <p>#FFB800</p><p>
-          </p><p tips="">暖色系</p>
-        </div>
-      </li>
-      <li class="layui-col-sm6">
-        <div style="background-color: #FF5722;padding:10px;color:whitesmoke;padding:30px;border-radius:2px;">
-          <p>#FF5722</p><p>
-          </p><p tips="">比较引人注意的颜色</p>
-        </div>
-      </li>
-      <li class="layui-col-sm6">
-        <div style="background-color: #01AAED;padding:10px;color:whitesmoke;padding:30px;border-radius:2px;">
-          <p>#01AAED</p><p>
-          </p><p tips="">文本链接着色</p>
-        </div>
-      </li>
-      <li class="layui-col-sm6">
-        <div style="background-color: #2F4056;padding:10px;color:whitesmoke;padding:30px;border-radius:2px;">
-          <p>#2F4056</p><p>
-          </p><p tips="">侧边色</p>
-        </div>
-      </li>
-    </ul>
-</template>
-
-<script>
-import { ref } from 'vue'
-
-export default {
-  setup() {
-
-    return {
-    }
-  }
-}
-</script>
-
-:::
-
-::: title 中性色
-:::
-
-::: demo
-
-<template>
-<ul class="layui-row site-doc-color site-doc-necolor">
-      <li class="layui-col-md12">
-        <div style="background-color: #FAFAFA;">
-          <p>#FAFAFA</p><p>
-        </p></div>
-      </li>
-      <li class="layui-col-md12">
-        <div style="background-color: #f6f6f6;"><p>#F6F6F6</p><p></p></div>
-      </li>
-      <li class="layui-col-md4">
-        <div style="background-color: #eeeeee;"><p>#eeeeee</p><p></p></div>
-      </li>
-      <li class="layui-col-md4">
-        <div style="background-color: #e2e2e2;"><p>#e2e2e2</p><p></p></div>
-      </li>
-      <li class="layui-col-md4">
-        <div style="background-color: #dddddd;"><p>#dddddd</p><p></p></div>
-      </li>
-      <li class="layui-col-md4">
-        <div style="background-color: #d2d2d2;"><p>#d2d2d2</p><p></p></div>
-      </li>
-      <li class="layui-col-md4">
-        <div style="background-color: #cccccc;"><p>#cccccc</p><p></p></div>
-      </li>
-      <li class="layui-col-md4">
-        <div style="background-color: #c2c2c2;"><p>#c2c2c2</p><p></p></div>
-      </li>
-    </ul>
-</template>
-
-<script>
-import { ref } from 'vue'
-
-export default {
-  setup() {
-
-    return {
-    }
-  }
-}
-</script>
-
-:::
-
-::: title 颜色说明
-
-:::
-
-::: table
-
-| Class           | 描述 | 使用                    |
-| --------------- | ---- | ----------------------- |
-| layui-bg-red    | 赤色 | class="layui-bg-red"    |
-| layui-bg-orange | 橙色 | class="layui-bg-orange" |
-| layui-bg-green  | 墨绿 | class="layui-bg-green"  |
-| layui-bg-cyan   | 藏青 | class="layui-bg-cyan"   |
-| layui-bg-blue   | 蓝色 | class="layui-bg-blue"   |
-| layui-bg-black  | 雅黑 | class="layui-bg-black"  |
-
-:::
diff --git a/example/docs/zh-CN/components/colorPicker.md b/example/docs/zh-CN/components/colorPicker.md
deleted file mode 100644
index cbb1b2d..0000000
--- a/example/docs/zh-CN/components/colorPicker.md
+++ /dev/null
@@ -1,30 +0,0 @@
-::: title 基础使用
-:::
-
-::: demo
-
-<template>
-  <lay-color-picker></lay-color-picker>
-</template>
-
-<script>
-export default {
-  setup() {
-    return {
-    }
-  }
-}
-</script>
-
-::: title icon-picker 属性
-:::
-
-::: table
-
-|            |          |     |
-| ---------- | -------- | --- |
-| v-model    | 默认值   | --  |
-| page       | 开启分页 | --  |
-| showSearch | 启用搜索 | --  |
-
-:::
diff --git a/example/docs/zh-CN/components/container.md b/example/docs/zh-CN/components/container.md
deleted file mode 100644
index c6809bf..0000000
--- a/example/docs/zh-CN/components/container.md
+++ /dev/null
@@ -1,77 +0,0 @@
-::: title 普通容器
-:::
-
-::: demo
-
-<template>
-  <lay-container>
-    <div class="container-demo"></div>
-  </lay-container>
-</template>
-
-<script>
-import { ref } from 'vue'
-
-export default {
-  setup() {
-
-    return {
-    }
-  }
-}
-</script>
-
-<style>
-    .container-demo {
-        width:100%;
-        height: 300px;
-        background: #79C48C;
-        border-radius: 2px;
-    }
-</style>
-
-:::
-
-::: title 流式容器
-:::
-
-::: demo
-
-<template>
-  <lay-container fluid>
-      <div class="container-demo"></div>
-  </lay-container>
-</template>
-
-<script>
-import { ref } from 'vue'
-
-export default {
-  setup() {
-
-    return {
-    }
-  }
-}
-</script>
-
-<style>
-    .container-demo {
-        width:100%;
-        height: 300px;
-        background: #79C48C;
-    }
-</style>
-
-:::
-
-::: title 容器属性
-:::
-
-::: table
-
-| 属性  | 描述   | 可选值         |
-| ----- | ------ | -------------- |
-| fluid | 流模式 | `true` `false` |
-
-:::
diff --git a/example/docs/zh-CN/components/dropdown.md b/example/docs/zh-CN/components/dropdown.md
deleted file mode 100644
index 7db551d..0000000
--- a/example/docs/zh-CN/components/dropdown.md
+++ /dev/null
@@ -1,90 +0,0 @@
-::: title 基础使用
-:::
-
-::: demo
-
-<template>
-  <lay-dropdown>
-    <lay-button type="primary">下拉菜单</lay-button>
-    <template #content>
-        <lay-dropdown-item>选项一</lay-dropdown-item>
-        <lay-dropdown-item>选项二</lay-dropdown-item>
-        <lay-dropdown-item>选项三</lay-dropdown-item>
-    </template>
-  </lay-dropdown>
-</template>
-
-<script>
-import { ref } from 'vue'
-
-export default {
-  setup() {
-
-    return {
-    }
-  }
-}
-</script>
-
-:::
-
-::: title 触发方式
-:::
-
-::: demo
-
-<template>
-  <lay-dropdown trigger="hover">
-    <lay-button>Hover 触发</lay-button>
-    <template #content>
-        <lay-dropdown-item>选项一</lay-dropdown-item>
-        <lay-dropdown-item>选项二</lay-dropdown-item>
-        <lay-dropdown-item>选项三</lay-dropdown-item>
-    </template>
-  </lay-dropdown>
-  &nbsp;&nbsp;
-    <lay-dropdown>
-    <lay-button>Click 触发</lay-button>
-    <template #content>
-        <lay-dropdown-item>选项一</lay-dropdown-item>
-        <lay-dropdown-item>选项二</lay-dropdown-item>
-        <lay-dropdown-item>选项三</lay-dropdown-item>
-    </template>
-  </lay-dropdown>
-</template>
-
-<script>
-import { ref } from 'vue'
-
-export default {
-  setup() {
-
-    return {
-    }
-  }
-}
-</script>
-
-:::
-
-::: title 下拉属性
-:::
-
-::: table
-
-| 属性    | 描述     | 可选值          |
-| ------- | -------- | --------------- |
-| trigger | 触发方式 | `click` `hover` |
-
-:::
-
-::: title 下拉插槽
-:::
-
-::: table
-
-| 插槽    | 描述     | 可选值 |
-| ------- | -------- | ------ |
-| content | 下拉内容 | --     |
-
-:::
diff --git a/example/docs/zh-CN/components/empty.md b/example/docs/zh-CN/components/empty.md
deleted file mode 100644
index beda397..0000000
--- a/example/docs/zh-CN/components/empty.md
+++ /dev/null
@@ -1,56 +0,0 @@
-::: title 基础使用
-:::
-
-::: demo
-
-<template>
-  <lay-empty></lay-empty>
-</template>
-
-<script>
-import { ref } from 'vue'
-
-export default {
-  setup() {
-
-    return {
-    }
-  }
-}
-</script>
-
-:::
-
-::: title 指定描述
-:::
-
-::: demo
-
-<template>
-  <lay-empty description="刷新试试"></lay-empty>
-</template>
-
-<script>
-import { ref } from 'vue'
-
-export default {
-  setup() {
-
-    return {
-    }
-  }
-}
-</script>
-
-:::
-
-::: title empty 属性
-:::
-
-::: table
-
-| 属性        | 描述     | 可选值 |
-| ----------- | -------- | ------ |
-| description | 描述信息 | --     |
-
-:::
diff --git a/example/docs/zh-CN/components/field.md b/example/docs/zh-CN/components/field.md
deleted file mode 100644
index 13b3a49..0000000
--- a/example/docs/zh-CN/components/field.md
+++ /dev/null
@@ -1,70 +0,0 @@
-::: demo
-
-<template>
-  <lay-field title="标题">内容</lay-field>
-</template>
-
-<script>
-import { ref } from 'vue'
-
-export default {
-  setup() {
-
-    return {
-    }
-  }
-}
-</script>
-
-:::
-
-::: demo
-
-<template>
-  <lay-field title="标题">内容</lay-field>
-</template>
-
-<script>
-import { ref } from 'vue'
-
-export default {
-  setup() {
-
-    return {
-    }
-  }
-}
-</script>
-
-:::
-
-::: demo
-
-<template>
-  <lay-field title="标题"></lay-field>
-</template>
-
-<script>
-import { ref } from 'vue'
-
-export default {
-  setup() {
-
-    return {
-    }
-  }
-}
-</script>
-
-:::
-
-::: title 字段属性
-:::
-
-::: table
-
-| Name  | Description | Accepted Values |
-| ----- | ----------- | --------------- |
-| title | 标题        | --              |
-
-:::
diff --git a/example/docs/zh-CN/components/form.md b/example/docs/zh-CN/components/form.md
deleted file mode 100644
index 289d40c..0000000
--- a/example/docs/zh-CN/components/form.md
+++ /dev/null
@@ -1,76 +0,0 @@
-::: title 基础使用
-:::
-
-::: demo
-
-<template>
-  <lay-form @submit="submit" :model="model">
-    <lay-form-item label="账户">
-      <lay-input v-model="model.username"></lay-input>
-    </lay-form-item>
-    <lay-form-item label="密码">
-      <lay-input v-model="model.password"></lay-input>
-    </lay-form-item>
-    <lay-form-item>
-      <lay-button naive-type="submit">提交</lay-button>
-    </lay-form-item>
-  </lay-form>
-</template>
-
-<script>
-import { ref, reactive } from 'vue'
-
-export default {
-  setup() {
-
-    const model = reactive({
-        username: "admin",
-        password: "admin"
-    })
-
-    const submit = function(val) {
-      alert(JSON.stringify(val))
-    }
-
-    return {
-      model,
-      submit
-    }
-  }
-}
-</script>
-
-:::
-
-::: title 表单事件
-:::
-
-::: table
-
-| Name  | Description | Accepted Values |
-| ----- | ----------- | --------------- |
-| model | 表单绑定值  | --              |
-
-:::
-
-::: title 表单事件
-:::
-
-::: table
-
-| Name   | Description | Accepted Values |
-| ------ | ----------- | --------------- |
-| submit | 提交事件    | --              |
-
-:::
-
-::: title 表单项属性
-:::
-
-::: table
-
-| Name  | Description | Accepted Values |
-| ----- | ----------- | --------------- |
-| label | 标题名称    | --              |
-
-:::
diff --git a/example/docs/zh-CN/components/grid.md b/example/docs/zh-CN/components/grid.md
deleted file mode 100644
index 7f7aa49..0000000
--- a/example/docs/zh-CN/components/grid.md
+++ /dev/null
@@ -1,166 +0,0 @@
-::: title 基础使用
-:::
-
-::: demo
-
-<template>
-  <lay-row space="10">
-     <lay-col md="12"><div class="grid-demo">1</div></lay-col>
-     <lay-col md="12"><div class="grid-demo grid-demo-bg1">2</div></lay-col>
-     <lay-col md="6"><div class="grid-demo">3</div></lay-col>
-     <lay-col md="6"><div class="grid-demo grid-demo-bg1">4</div></lay-col>
-     <lay-col md="6"><div class="grid-demo">5</div></lay-col>
-     <lay-col md="6"><div class="grid-demo grid-demo-bg1">6</div></lay-col>
-  </lay-row>
-</template>
-
-<script>
-import { ref } from 'vue'
-
-export default {
-  setup() {
-    return {
-    }
-  }
-}
-</script>
-
-<style>
-.grid-demo-bg1 {
-    background-color: #63BA79;
-}
-.grid-demo {
-    padding: 10px;
-    line-height: 50px;
-    border-radius: 2px;
-    text-align: center;
-    background-color: #79C48C;
-    color: #fff;
-}
-</style>
-
-:::
-
-::: title 栅格偏移
-:::
-
-::: demo
-
-<template>
-  <lay-row space="10">
-     <lay-col md="12"><div class="grid-demo">1</div></lay-col>
-     <lay-col md="6" mdOffset="6"><div class="grid-demo grid-demo-bg1">2</div></lay-col>
-  </lay-row>
-</template>
-
-<script>
-import { ref } from 'vue'
-
-export default {
-  setup() {
-    return {
-    }
-  }
-}
-</script>
-
-<style>
-.grid-demo-bg1 {
-    background-color: #63BA79;
-}
-.grid-demo {
-    padding: 10px;
-    line-height: 50px;
-    border-radius: 2px;
-    text-align: center;
-    background-color: #79C48C;
-    color: #fff;
-}
-</style>
-
-:::
-
-::: title 栅格适应
-:::
-
-::: demo
-
-<template>
-  <lay-row space="10">
-     <lay-col md="12" sm="12" xs="24"><div class="grid-demo">1</div></lay-col>
-     <lay-col md="12" sm="12" xs="24"><div class="grid-demo grid-demo-bg1">2</div></lay-col>
-  </lay-row>
-</template>
-
-<script>
-import { ref } from 'vue'
-
-export default {
-  setup() {
-    return {
-    }
-  }
-}
-</script>
-
-:::
-
-::: title 流式布局
-:::
-
-::: demo
-
-<template>
-  <lay-container fluid>
-    <lay-row space="10">
-      <lay-col md="4" sm="12" xs="24"><div class="grid-demo">1</div></lay-col>
-      <lay-col md="4" sm="12" xs="24"><div class="grid-demo grid-demo-bg1">2</div></lay-col>
-      <lay-col md="4" sm="12" xs="24"><div class="grid-demo">3</div></lay-col>
-      <lay-col md="4" sm="12" xs="24"><div class="grid-demo grid-demo-bg1">4</div></lay-col>
-      <lay-col md="4" sm="12" xs="24"><div class="grid-demo">5</div></lay-col>
-      <lay-col md="4" sm="12" xs="24"><div class="grid-demo grid-demo-bg1">6</div></lay-col>
-    </lay-row>
-  </lay-container>
-</template>
-
-<script>
-import { ref } from 'vue'
-
-export default {
-  setup() {
-    return {
-    }
-  }
-}
-</script>
-
-:::
-
-::: title 行属性
-:::
-
-::: table
-
-| 属性  | 描述 | 可选值 |
-| ----- | ---- | ------ |
-| space | 间隔 | 0 - 30 |
-
-:::
-
-::: title 列属性
-:::
-
-::: table
-
-| 属性      | 描述                           | 可选值 |
-| --------- | ------------------------------ | ------ |
-| xs        | 尺寸 - 超小屏幕 (手机<768px)   | 0 - 12 |
-| sm        | 尺寸 - 小屏幕 (平板 ≥768px)    | 0 - 12 |
-| md        | 尺寸 - 中等屏幕 (桌面 ≥992px)  | 0 - 12 |
-| lg        | 尺寸 - 大型屏幕 (桌面 ≥1200px) | 0 - 12 |
-| xs-offset | 偏移 - 超小屏幕 (手机<768px)   | 0 - 12 |
-| sm-offset | 偏移 - 小屏幕 (平板 ≥768px)    | 0 - 12 |
-| md-offset | 偏移 - 中等屏幕 (桌面 ≥992px)  | 0 - 12 |
-| lg-offset | 偏移 - 大型屏幕 (桌面 ≥1200px) | 0 - 12 |
-
-:::
diff --git a/example/docs/zh-CN/components/icon.md b/example/docs/zh-CN/components/icon.md
deleted file mode 100644
index 64a67c7..0000000
--- a/example/docs/zh-CN/components/icon.md
+++ /dev/null
@@ -1,1119 +0,0 @@
-::: title 基础使用
-:::
-
-::: demo
-
-<template>
-  <lay-icon type="layui-icon-face-smile"></lay-icon>
-</template>
-
-<script>
-import { ref } from 'vue'
-
-export default {
-  setup() {
-
-    return {
-    }
-  }
-}
-</script>
-
-:::
-
-::: title 图标颜色
-:::
-
-::: demo
-
-<template>
-  <lay-icon type="layui-icon-face-smile" color="red"></lay-icon> &nbsp;
-  <lay-icon type="layui-icon-face-smile" color="orange"></lay-icon> &nbsp;
-  <lay-icon type="layui-icon-face-smile" color="green"></lay-icon> &nbsp;
-  <lay-icon type="layui-icon-face-smile" color="cyan"></lay-icon> &nbsp;
-  <lay-icon type="layui-icon-face-smile" color="blue"></lay-icon> &nbsp;
-  <lay-icon type="layui-icon-face-smile" color="black"></lay-icon> &nbsp;
-</template>
-
-<script>
-import { ref } from 'vue'
-
-export default {
-  setup() {
-
-    return {
-    }
-  }
-}
-</script>
-
-:::
-
-::: title 图标尺寸
-:::
-
-::: demo
-
-<template>
-  <lay-icon type="layui-icon-star" size="26px" color="red"></lay-icon>
-</template>
-
-<script>
-import { ref } from 'vue'
-
-export default {
-  setup() {
-
-    return {
-    }
-  }
-}
-</script>
-
-:::
-
-::: title 图标列表
-:::
-
-::: demo
-
-<template>
-<ul class="site-doc-icon">
-      <li>
-        <i class="layui-icon layui-icon-heart-fill"></i>
-        <div class="doc-icon-name">实心</div>
-        <div class="doc-icon-code">&amp;#xe68f;</div>
-        <div class="doc-icon-fontclass">layui-icon-heart-fill</div>
-      </li>
-      <li>
-        <i class="layui-icon layui-icon-heart"></i>
-        <div class="doc-icon-name">空心</div>
-        <div class="doc-icon-code">&amp;#xe68c;</div>
-        <div class="doc-icon-fontclass">layui-icon-heart</div>
-      </li>
-      <li>
-        <i class="layui-icon layui-icon-light"></i>
-        <div class="doc-icon-name">亮度/晴</div>
-        <div class="doc-icon-code">&amp;#xe748;</div>
-        <div class="doc-icon-fontclass">layui-icon-light</div>
-      </li>
-      <li>
-        <i class="layui-icon layui-icon-time"></i>
-        <div class="doc-icon-name">时间/历史</div>
-        <div class="doc-icon-code">&amp;#xe68d;</div>
-        <div class="doc-icon-fontclass">layui-icon-time</div>
-      </li>
-      <li>
-        <i class="layui-icon layui-icon-bluetooth"></i>
-        <div class="doc-icon-name">蓝牙</div>
-        <div class="doc-icon-code">&amp;#xe689;</div>
-        <div class="doc-icon-fontclass">layui-icon-bluetooth</div>
-      </li>
-      <li>
-        <i class="layui-icon layui-icon-at"></i>
-        <div class="doc-icon-name">@艾特</div>
-        <div class="doc-icon-code">&amp;#xe687;</div>
-        <div class="doc-icon-fontclass">layui-icon-at</div>
-      </li>
-      <li>
-        <i class="layui-icon layui-icon-mute"></i>
-        <div class="doc-icon-name">静音</div>
-        <div class="doc-icon-code">&amp;#xe685;</div>
-        <div class="doc-icon-fontclass">layui-icon-mute</div>
-      </li>
-      <li>
-        <i class="layui-icon layui-icon-mike"></i>
-        <div class="doc-icon-name">录音/麦克风</div>
-        <div class="doc-icon-code">&amp;#xe6dc;</div>
-        <div class="doc-icon-fontclass">layui-icon-mike</div>
-      </li>
-      <li>
-        <i class="layui-icon layui-icon-key"></i>
-        <div class="doc-icon-name">密钥/钥匙</div>
-        <div class="doc-icon-code">&amp;#xe683;</div>
-        <div class="doc-icon-fontclass">layui-icon-key</div>
-      </li>
-      <li>
-        <i class="layui-icon layui-icon-gift"></i>
-        <div class="doc-icon-name">礼物/活动</div>
-        <div class="doc-icon-code">&amp;#xe627;</div>
-        <div class="doc-icon-fontclass">layui-icon-gift</div>
-      </li>
-      <li>
-        <i class="layui-icon layui-icon-email"></i>
-        <div class="doc-icon-name">邮箱</div>
-        <div class="doc-icon-code">&amp;#xe618;</div>
-        <div class="doc-icon-fontclass">layui-icon-email</div>
-      </li>
-      <li>
-        <i class="layui-icon layui-icon-rss"></i>
-        <div class="doc-icon-name">RSS</div>
-        <div class="doc-icon-code">&amp;#xe808;</div>
-        <div class="doc-icon-fontclass">layui-icon-rss</div>
-      </li>
-      <li>
-        <i class="layui-icon layui-icon-wifi"></i>
-        <div class="doc-icon-name">WiFi</div>
-        <div class="doc-icon-code">&amp;#xe7e0;</div>
-        <div class="doc-icon-fontclass">layui-icon-wifi</div>
-      </li>
-      <li>
-        <i class="layui-icon layui-icon-logout"></i>
-        <div class="doc-icon-name">退出/注销</div>
-        <div class="doc-icon-code">&amp;#xe682;</div>
-        <div class="doc-icon-fontclass">layui-icon-logout</div>
-      </li>
-      <li>
-        <i class="layui-icon layui-icon-android"></i>
-        <div class="doc-icon-name">Android 安卓</div>
-        <div class="doc-icon-code">&amp;#xe684;</div>
-        <div class="doc-icon-fontclass">layui-icon-android</div>
-      </li>
-      <li>
-        <i class="layui-icon layui-icon-ios"></i>
-        <div class="doc-icon-name">Apple IOS 苹果</div>
-        <div class="doc-icon-code">&amp;#xe680;</div>
-        <div class="doc-icon-fontclass">layui-icon-ios</div>
-      </li>
-      <li>
-        <i class="layui-icon layui-icon-windows"></i>
-        <div class="doc-icon-name">Windows</div>
-        <div class="doc-icon-code">&amp;#xe67f;</div>
-        <div class="doc-icon-fontclass">layui-icon-windows</div>
-      </li>
-      <li>
-        <i class="layui-icon layui-icon-transfer"></i>
-        <div class="doc-icon-name">穿梭框</div>
-        <div class="doc-icon-code">&amp;#xe691;</div>
-        <div class="doc-icon-fontclass">layui-icon-transfer</div>
-      </li>
-      <li>
-        <i class="layui-icon layui-icon-service"></i>
-        <div class="doc-icon-name">客服</div>
-        <div class="doc-icon-code">&amp;#xe626;</div>
-        <div class="doc-icon-fontclass">layui-icon-service</div>
-      </li>
-      <li>
-        <i class="layui-icon layui-icon-subtraction"></i>
-        <div class="doc-icon-name">减</div>
-        <div class="doc-icon-code">&amp;#xe67e;</div>
-        <div class="doc-icon-fontclass">layui-icon-subtraction</div>
-      </li>
-      <li>
-        <i class="layui-icon layui-icon-addition"></i>
-        <div class="doc-icon-name">加</div>
-        <div class="doc-icon-code">&amp;#xe624;</div>
-        <div class="doc-icon-fontclass">layui-icon-addition</div>
-      </li>
-      <li>
-        <i class="layui-icon layui-icon-slider"></i>
-        <div class="doc-icon-name">滑块</div>
-        <div class="doc-icon-code">&amp;#xe714;</div>
-        <div class="doc-icon-fontclass">layui-icon-slider</div>
-      </li>
-      <li>
-        <i class="layui-icon layui-icon-print"></i>
-        <div class="doc-icon-name">打印</div>
-        <div class="doc-icon-code">&amp;#xe66d;</div>
-        <div class="doc-icon-fontclass">layui-icon-print</div>
-      </li>
-      <li>
-        <i class="layui-icon layui-icon-export"></i>
-        <div class="doc-icon-name">导出</div>
-        <div class="doc-icon-code">&amp;#xe67d;</div>
-        <div class="doc-icon-fontclass">layui-icon-export</div>
-      </li>
-      <li>
-        <i class="layui-icon layui-icon-cols"></i>
-        <div class="doc-icon-name">列</div>
-        <div class="doc-icon-code">&amp;#xe610;</div>
-        <div class="doc-icon-fontclass">layui-icon-cols</div>
-      </li>
-      <li>
-        <i class="layui-icon layui-icon-screen-restore"></i>
-        <div class="doc-icon-name">退出全屏</div>
-        <div class="doc-icon-code">&amp;#xe758;</div>
-        <div class="doc-icon-fontclass">layui-icon-screen-restore</div>
-      </li>
-      <li>
-        <i class="layui-icon layui-icon-screen-full"></i>
-        <div class="doc-icon-name">全屏</div>
-        <div class="doc-icon-code">&amp;#xe622;</div>
-        <div class="doc-icon-fontclass">layui-icon-screen-full</div>
-      </li>
-      <li>
-        <i class="layui-icon layui-icon-rate-half"></i>
-        <div class="doc-icon-name">半星</div>
-        <div class="doc-icon-code">&amp;#xe6c9;</div>
-        <div class="doc-icon-fontclass">layui-icon-rate-half</div>
-      </li>
-      <li>
-        <i class="layui-icon layui-icon-rate"></i>
-        <div class="doc-icon-name">星星-空心</div>
-        <div class="doc-icon-code">&amp;#xe67b;</div>
-        <div class="doc-icon-fontclass">layui-icon-rate</div>
-      </li>
-      <li>
-        <i class="layui-icon layui-icon-rate-solid"></i>
-        <div class="doc-icon-name">星星-实心</div>
-        <div class="doc-icon-code">&amp;#xe67a;</div>
-        <div class="doc-icon-fontclass">layui-icon-rate-solid</div>
-      </li>
-      <li>
-        <i class="layui-icon layui-icon-cellphone"></i>
-        <div class="doc-icon-name">手机</div>
-        <div class="doc-icon-code">&amp;#xe678;</div>
-        <div class="doc-icon-fontclass">layui-icon-cellphone</div>
-      </li>
-      <li>
-        <i class="layui-icon layui-icon-vercode"></i>
-        <div class="doc-icon-name">验证码</div>
-        <div class="doc-icon-code">&amp;#xe679;</div>
-        <div class="doc-icon-fontclass">layui-icon-vercode</div>
-      </li>
-      <li>
-        <i class="layui-icon layui-icon-login-wechat"></i>
-        <div class="doc-icon-name">微信</div>
-        <div class="doc-icon-code">&amp;#xe677;</div>
-        <div class="doc-icon-fontclass">layui-icon-login-wechat</div>
-      </li>
-      <li>
-        <i class="layui-icon layui-icon-login-qq"></i>
-        <div class="doc-icon-name">QQ</div>
-        <div class="doc-icon-code">&amp;#xe676;</div>
-        <div class="doc-icon-fontclass">layui-icon-login-qq</div>
-      </li>
-      <li>
-        <i class="layui-icon layui-icon-login-weibo"></i>
-        <div class="doc-icon-name">微博</div>
-        <div class="doc-icon-code">&amp;#xe675;</div>
-        <div class="doc-icon-fontclass">layui-icon-login-weibo</div>
-      </li>
-      <li>
-        <i class="layui-icon layui-icon-password"></i>
-        <div class="doc-icon-name">密码</div>
-        <div class="doc-icon-code">&amp;#xe673;</div>
-        <div class="doc-icon-fontclass">layui-icon-password</div>
-      </li>
-      <li>
-        <i class="layui-icon layui-icon-username"></i>
-        <div class="doc-icon-name">用户名</div>
-        <div class="doc-icon-code">&amp;#xe66f;</div>
-        <div class="doc-icon-fontclass">layui-icon-username</div>
-      </li>
-      <li>
-        <i class="layui-icon layui-icon-refresh-3"></i>
-        <div class="doc-icon-name">刷新-粗</div>
-        <div class="doc-icon-code">&amp;#xe9aa;</div>
-        <div class="doc-icon-fontclass">layui-icon-refresh-3</div>
-      </li>
-      <li>
-        <i class="layui-icon layui-icon-auz"></i>
-        <div class="doc-icon-name">授权</div>
-        <div class="doc-icon-code">&amp;#xe672;</div>
-        <div class="doc-icon-fontclass">layui-icon-auz</div>
-      </li>
-      <li>
-        <i class="layui-icon layui-icon-spread-left"></i>
-        <div class="doc-icon-name">左向右伸缩菜单</div>
-        <div class="doc-icon-code">&amp;#xe66b;</div>
-        <div class="doc-icon-fontclass">layui-icon-spread-left</div>
-      </li>
-      <li>
-        <i class="layui-icon layui-icon-shrink-right"></i>
-        <div class="doc-icon-name">右向左伸缩菜单</div>
-        <div class="doc-icon-code">&amp;#xe668;</div>
-        <div class="doc-icon-fontclass">layui-icon-shrink-right</div>
-      </li>
-      <li>
-        <i class="layui-icon layui-icon-snowflake"></i>
-        <div class="doc-icon-name">雪花</div>
-        <div class="doc-icon-code">&amp;#xe6b1;</div>
-        <div class="doc-icon-fontclass">layui-icon-snowflake</div>
-      </li>
-      <li>
-        <i class="layui-icon layui-icon-tips"></i>
-        <div class="doc-icon-name">提示说明</div>
-        <div class="doc-icon-code">&amp;#xe702;</div>
-        <div class="doc-icon-fontclass">layui-icon-tips</div>
-      </li>
-      <li>
-        <i class="layui-icon layui-icon-note"></i>
-        <div class="doc-icon-name">便签</div>
-        <div class="doc-icon-code">&amp;#xe66e;</div>
-        <div class="doc-icon-fontclass">layui-icon-note</div>
-      </li>
-      <li>
-        <i class="layui-icon layui-icon-home"></i>
-        <div class="doc-icon-name">主页</div>
-        <div class="doc-icon-code">&amp;#xe68e;</div>
-        <div class="doc-icon-fontclass">layui-icon-home</div>
-      </li>
-      <li>
-        <i class="layui-icon layui-icon-senior"></i>
-        <div class="doc-icon-name">高级</div>
-        <div class="doc-icon-code">&amp;#xe674;</div>
-        <div class="doc-icon-fontclass">layui-icon-senior</div>
-      </li>
-      <li>
-        <i class="layui-icon layui-icon-refresh"></i>
-        <div class="doc-icon-name">刷新</div>
-        <div class="doc-icon-code">&amp;#xe669;</div>
-        <div class="doc-icon-fontclass">layui-icon-refresh</div>
-      </li>
-      <li>
-        <i class="layui-icon layui-icon-refresh-1"></i>
-        <div class="doc-icon-name">刷新</div>
-        <div class="doc-icon-code">&amp;#xe666;</div>
-        <div class="doc-icon-fontclass">layui-icon-refresh-1</div>
-      </li>
-      <li>
-        <i class="layui-icon layui-icon-flag"></i>
-        <div class="doc-icon-name">旗帜</div>
-        <div class="doc-icon-code">&amp;#xe66c;</div>
-        <div class="doc-icon-fontclass">layui-icon-flag</div>
-      </li>
-      <li>
-        <i class="layui-icon layui-icon-theme"></i>
-        <div class="doc-icon-name">主题</div>
-        <div class="doc-icon-code">&amp;#xe66a;</div>
-        <div class="doc-icon-fontclass">layui-icon-theme</div>
-      </li>
-      <li>
-        <i class="layui-icon layui-icon-notice"></i>
-        <div class="doc-icon-name">消息-通知</div>
-        <div class="doc-icon-code">&amp;#xe667;</div>
-        <div class="doc-icon-fontclass">layui-icon-notice</div>
-      </li>
-      <li>
-        <i class="layui-icon layui-icon-website"></i>
-        <div class="doc-icon-name">网站</div>
-        <div class="doc-icon-code">&amp;#xe7ae;</div>
-        <div class="doc-icon-fontclass">layui-icon-website</div>
-      </li>
-      <li>
-        <i class="layui-icon layui-icon-console"></i>
-        <div class="doc-icon-name">控制台</div>
-        <div class="doc-icon-code">&amp;#xe665;</div>
-        <div class="doc-icon-fontclass">layui-icon-console</div>
-      </li>
-      <li>
-        <i class="layui-icon layui-icon-face-surprised"></i>
-        <div class="doc-icon-name">表情-惊讶</div>
-        <div class="doc-icon-code">&amp;#xe664;</div>
-        <div class="doc-icon-fontclass">layui-icon-face-surprised</div>
-      </li>
-      <li>
-        <i class="layui-icon layui-icon-set"></i>
-        <div class="doc-icon-name">设置-空心</div>
-        <div class="doc-icon-code">&amp;#xe716;</div>
-        <div class="doc-icon-fontclass">layui-icon-set</div>
-      </li>
-      <li>
-        <i class="layui-icon layui-icon-template-1"></i>
-        <div class="doc-icon-name">模板</div>
-        <div class="doc-icon-code">&amp;#xe656;</div>
-        <div class="doc-icon-fontclass">layui-icon-template-1</div>
-      </li>
-      <li>
-        <i class="layui-icon layui-icon-app"></i>
-        <div class="doc-icon-name">应用</div>
-        <div class="doc-icon-code">&amp;#xe653;</div>
-        <div class="doc-icon-fontclass">layui-icon-app</div>
-      </li>
-      <li>
-        <i class="layui-icon layui-icon-template"></i>
-        <div class="doc-icon-name">模板</div>
-        <div class="doc-icon-code">&amp;#xe663;</div>
-        <div class="doc-icon-fontclass">layui-icon-template</div>
-      </li>
-      <li>
-        <i class="layui-icon layui-icon-praise"></i>
-        <div class="doc-icon-name">赞</div>
-        <div class="doc-icon-code">&amp;#xe6c6;</div>
-        <div class="doc-icon-fontclass">layui-icon-praise</div>
-      </li>
-      <li>
-        <i class="layui-icon layui-icon-tread"></i>
-        <div class="doc-icon-name">踩</div>
-        <div class="doc-icon-code">&amp;#xe6c5;</div>
-        <div class="doc-icon-fontclass">layui-icon-tread</div>
-      </li>
-      <li>
-        <i class="layui-icon layui-icon-male"></i>
-        <div class="doc-icon-name">男</div>
-        <div class="doc-icon-code">&amp;#xe662;</div>
-        <div class="doc-icon-fontclass">layui-icon-male</div>
-      </li>
-      <li>
-        <i class="layui-icon layui-icon-female"></i>
-        <div class="doc-icon-name">女</div>
-        <div class="doc-icon-code">&amp;#xe661;</div>
-        <div class="doc-icon-fontclass">layui-icon-female</div>
-      </li>
-      <li>
-        <i class="layui-icon layui-icon-camera"></i>
-        <div class="doc-icon-name">相机-空心</div>
-        <div class="doc-icon-code">&amp;#xe660;</div>
-        <div class="doc-icon-fontclass">layui-icon-camera</div>
-      </li>
-      <li>
-        <i class="layui-icon layui-icon-camera-fill"></i>
-        <div class="doc-icon-name">相机-实心</div>
-        <div class="doc-icon-code">&amp;#xe65d;</div>
-        <div class="doc-icon-fontclass">layui-icon-camera-fill</div>
-      </li>
-      <li>
-        <i class="layui-icon layui-icon-more"></i>
-        <div class="doc-icon-name">菜单-水平</div>
-        <div class="doc-icon-code">&amp;#xe65f;</div>
-        <div class="doc-icon-fontclass">layui-icon-more</div>
-      </li>
-      <li>
-        <i class="layui-icon layui-icon-more-vertical"></i>
-        <div class="doc-icon-name">菜单-垂直</div>
-        <div class="doc-icon-code">&amp;#xe671;</div>
-        <div class="doc-icon-fontclass">layui-icon-more-vertical</div>
-      </li>
-      <li>
-        <i class="layui-icon layui-icon-rmb"></i>
-        <div class="doc-icon-name">金额-人民币</div>
-        <div class="doc-icon-code">&amp;#xe65e;</div>
-        <div class="doc-icon-fontclass">layui-icon-rmb</div>
-      </li>
-      <li>
-        <i class="layui-icon layui-icon-dollar"></i>
-        <div class="doc-icon-name">金额-美元</div>
-        <div class="doc-icon-code">&amp;#xe659;</div>
-        <div class="doc-icon-fontclass">layui-icon-dollar</div>
-      </li>
-      <li>
-        <i class="layui-icon layui-icon-diamond"></i>
-        <div class="doc-icon-name">钻石-等级</div>
-        <div class="doc-icon-code">&amp;#xe735;</div>
-        <div class="doc-icon-fontclass">layui-icon-diamond</div>
-      </li>
-      <li>
-        <i class="layui-icon layui-icon-fire"></i>
-        <div class="doc-icon-name">火</div>
-        <div class="doc-icon-code">&amp;#xe756;</div>
-        <div class="doc-icon-fontclass">layui-icon-fire</div>
-      </li>
-      <li>
-        <i class="layui-icon layui-icon-return"></i>
-        <div class="doc-icon-name">返回</div>
-        <div class="doc-icon-code">&amp;#xe65c;</div>
-        <div class="doc-icon-fontclass">layui-icon-return</div>
-      </li>
-      <li>
-        <i class="layui-icon layui-icon-location"></i>
-        <div class="doc-icon-name">位置-地图</div>
-        <div class="doc-icon-code">&amp;#xe715;</div>
-        <div class="doc-icon-fontclass">layui-icon-location</div>
-      </li>
-      <li>
-        <i class="layui-icon layui-icon-read"></i>
-        <div class="doc-icon-name">办公-阅读</div>
-        <div class="doc-icon-code">&amp;#xe705;</div>
-        <div class="doc-icon-fontclass">layui-icon-read</div>
-      </li>
-      <li>
-        <i class="layui-icon layui-icon-survey"></i>
-        <div class="doc-icon-name">调查</div>
-        <div class="doc-icon-code">&amp;#xe6b2;</div>
-        <div class="doc-icon-fontclass">layui-icon-survey</div>
-      </li>
-      <li>
-        <i class="layui-icon layui-icon-face-smile"></i>
-        <div class="doc-icon-name">表情-微笑</div>
-        <div class="doc-icon-code">&amp;#xe6af;</div>
-        <div class="doc-icon-fontclass">layui-icon-face-smile</div>
-      </li>
-      <li>
-        <i class="layui-icon layui-icon-face-cry"></i>
-        <div class="doc-icon-name">表情-哭泣</div>
-        <div class="doc-icon-code">&amp;#xe69c;</div>
-        <div class="doc-icon-fontclass">layui-icon-face-cry</div>
-      </li>
-      <li>
-        <i class="layui-icon layui-icon-cart-simple"></i>
-        <div class="doc-icon-name">购物车</div>
-        <div class="doc-icon-code">&amp;#xe698;</div>
-        <div class="doc-icon-fontclass">layui-icon-cart-simple</div>
-      </li>
-      <li>
-        <i class="layui-icon layui-icon-cart"></i>
-        <div class="doc-icon-name">购物车</div>
-        <div class="doc-icon-code">&amp;#xe657;</div>
-        <div class="doc-icon-fontclass">layui-icon-cart</div>
-      </li>
-      <li>
-        <i class="layui-icon layui-icon-next"></i>
-        <div class="doc-icon-name">下一页</div>
-        <div class="doc-icon-code">&amp;#xe65b;</div>
-        <div class="doc-icon-fontclass">layui-icon-next</div>
-      </li>
-      <li>
-        <i class="layui-icon layui-icon-prev"></i>
-        <div class="doc-icon-name">上一页</div>
-        <div class="doc-icon-code">&amp;#xe65a;</div>
-        <div class="doc-icon-fontclass">layui-icon-prev</div>
-      </li>
-      <li>
-        <i class="layui-icon layui-icon-upload-drag"></i>
-        <div class="doc-icon-name">上传-空心-拖拽</div>
-        <div class="doc-icon-code">&amp;#xe681;</div>
-        <div class="doc-icon-fontclass">layui-icon-upload-drag</div>
-      </li>
-      <li>
-        <i class="layui-icon layui-icon-upload"></i>
-        <div class="doc-icon-name">上传-实心</div>
-        <div class="doc-icon-code">&amp;#xe67c;</div>
-        <div class="doc-icon-fontclass">layui-icon-upload</div>
-      </li>
-      <li>
-        <i class="layui-icon layui-icon-download-circle"></i>
-        <div class="doc-icon-name">下载-圆圈</div>
-        <div class="doc-icon-code">&amp;#xe601;</div>
-        <div class="doc-icon-fontclass">layui-icon-download-circle</div>
-      </li>
-      <li>
-        <i class="layui-icon layui-icon-component"></i>
-        <div class="doc-icon-name">组件</div>
-        <div class="doc-icon-code">&amp;#xe857;</div>
-        <div class="doc-icon-fontclass">layui-icon-component</div>
-      </li>
-      <li>
-        <i class="layui-icon layui-icon-file-b"></i>
-        <div class="doc-icon-name">文件-粗</div>
-        <div class="doc-icon-code">&amp;#xe655;</div>
-        <div class="doc-icon-fontclass">layui-icon-file-b</div>
-      </li>
-      <li>
-        <i class="layui-icon layui-icon-user"></i>
-        <div class="doc-icon-name">用户</div>
-        <div class="doc-icon-code">&amp;#xe770;</div>
-        <div class="doc-icon-fontclass">layui-icon-user</div>
-      </li>
-      <li>
-        <i class="layui-icon layui-icon-find-fill"></i>
-        <div class="doc-icon-name">发现-实心</div>
-        <div class="doc-icon-code">&amp;#xe670;</div>
-        <div class="doc-icon-fontclass">layui-icon-find-fill</div>
-      </li>
-      <li>
-        <i class="layui-icon layui-icon-loading layui-anim layui-anim-rotate layui-anim-loop"></i>
-        <div class="doc-icon-name">loading</div>
-        <div class="doc-icon-code">&amp;#xe63d;</div>
-        <div class="doc-icon-fontclass">layui-icon-loading</div>
-      </li>
-      <li>
-        <i class="layui-icon layui-icon-loading-1 layui-anim layui-anim-rotate layui-anim-loop"></i>
-        <div class="doc-icon-name">loading</div>
-        <div class="doc-icon-code">&amp;#xe63e;</div>
-        <div class="doc-icon-fontclass">layui-icon-loading-1</div>
-      </li>
-      <li>
-        <i class="layui-icon layui-icon-add-1"></i>
-        <div class="doc-icon-name">添加</div>
-        <div class="doc-icon-code">&amp;#xe654;</div>
-        <div class="doc-icon-fontclass">layui-icon-add-1</div>
-      </li>
-      <li>
-        <i class="layui-icon layui-icon-play"></i>
-        <div class="doc-icon-name">播放</div>
-        <div class="doc-icon-code">&amp;#xe652;</div>
-        <div class="doc-icon-fontclass">layui-icon-play</div>
-      </li>
-      <li>
-        <i class="layui-icon layui-icon-pause"></i>
-        <div class="doc-icon-name">暂停</div>
-        <div class="doc-icon-code">&amp;#xe651;</div>
-        <div class="doc-icon-fontclass">layui-icon-pause</div>
-      </li>
-      <li>
-        <i class="layui-icon layui-icon-headset"></i>
-        <div class="doc-icon-name">音频-耳机</div>
-        <div class="doc-icon-code">&amp;#xe6fc;</div>
-        <div class="doc-icon-fontclass">layui-icon-headset</div>
-      </li>
-      <li>
-        <i class="layui-icon layui-icon-video"></i>
-        <div class="doc-icon-name">视频</div>
-        <div class="doc-icon-code">&amp;#xe6ed;</div>
-        <div class="doc-icon-fontclass">layui-icon-video</div>
-      </li>
-      <li>
-        <i class="layui-icon layui-icon-voice"></i>
-        <div class="doc-icon-name">语音-声音</div>
-        <div class="doc-icon-code">&amp;#xe688;</div>
-        <div class="doc-icon-fontclass">layui-icon-voice</div>
-      </li>
-      <li>
-        <i class="layui-icon layui-icon-speaker"></i>
-        <div class="doc-icon-name">消息-通知-喇叭</div>
-        <div class="doc-icon-code">&amp;#xe645;</div>
-        <div class="doc-icon-fontclass">layui-icon-speaker</div>
-      </li>
-      <li>
-        <i class="layui-icon layui-icon-fonts-del"></i>
-        <div class="doc-icon-name">删除线</div>
-        <div class="doc-icon-code">&amp;#xe64f;</div>
-        <div class="doc-icon-fontclass">layui-icon-fonts-del</div>
-      </li>
-      <li>
-        <i class="layui-icon layui-icon-fonts-code"></i>
-        <div class="doc-icon-name">代码</div>
-        <div class="doc-icon-code">&amp;#xe64e;</div>
-        <div class="doc-icon-fontclass">layui-icon-fonts-code</div>
-      </li>
-      <li>
-        <i class="layui-icon layui-icon-fonts-html"></i>
-        <div class="doc-icon-name">HTML</div>
-        <div class="doc-icon-code">&amp;#xe64b;</div>
-        <div class="doc-icon-fontclass">layui-icon-fonts-html</div>
-      </li>
-      <li>
-        <i class="layui-icon layui-icon-fonts-strong"></i>
-        <div class="doc-icon-name">字体加粗</div>
-        <div class="doc-icon-code">&amp;#xe62b;</div>
-        <div class="doc-icon-fontclass">layui-icon-fonts-strong</div>
-      </li>
-      <li>
-        <i class="layui-icon layui-icon-unlink"></i>
-        <div class="doc-icon-name">删除链接</div>
-        <div class="doc-icon-code">&amp;#xe64d;</div>
-        <div class="doc-icon-fontclass">layui-icon-unlink</div>
-      </li>
-      <li>
-        <i class="layui-icon layui-icon-picture"></i>
-        <div class="doc-icon-name">图片</div>
-        <div class="doc-icon-code">&amp;#xe64a;</div>
-        <div class="doc-icon-fontclass">layui-icon-picture</div>
-      </li>
-      <li>
-        <i class="layui-icon layui-icon-link"></i>
-        <div class="doc-icon-name">链接</div>
-        <div class="doc-icon-code">&amp;#xe64c;</div>
-        <div class="doc-icon-fontclass">layui-icon-link</div>
-      </li>
-      <li>
-        <i class="layui-icon layui-icon-face-smile-b"></i>
-        <div class="doc-icon-name">表情-笑-粗</div>
-        <div class="doc-icon-code">&amp;#xe650;</div>
-        <div class="doc-icon-fontclass">layui-icon-face-smile-b</div>
-      </li>
-      <li>
-        <i class="layui-icon layui-icon-align-left"></i>
-        <div class="doc-icon-name">左对齐</div>
-        <div class="doc-icon-code">&amp;#xe649;</div>
-        <div class="doc-icon-fontclass">layui-icon-align-left</div>
-      </li>
-      <li>
-        <i class="layui-icon layui-icon-align-right"></i>
-        <div class="doc-icon-name">右对齐</div>
-        <div class="doc-icon-code">&amp;#xe648;</div>
-        <div class="doc-icon-fontclass">layui-icon-align-right</div>
-      </li>
-      <li>
-        <i class="layui-icon layui-icon-align-center"></i>
-        <div class="doc-icon-name">居中对齐</div>
-        <div class="doc-icon-code">&amp;#xe647;</div>
-        <div class="doc-icon-fontclass">layui-icon-align-center</div>
-      </li>
-      <li>
-        <i class="layui-icon layui-icon-fonts-u"></i>
-        <div class="doc-icon-name">字体-下划线</div>
-        <div class="doc-icon-code">&amp;#xe646;</div>
-        <div class="doc-icon-fontclass">layui-icon-fonts-u</div>
-      </li>
-      <li>
-        <i class="layui-icon layui-icon-fonts-i"></i>
-        <div class="doc-icon-name">字体-斜体</div>
-        <div class="doc-icon-code">&amp;#xe644;</div>
-        <div class="doc-icon-fontclass">layui-icon-fonts-i</div>
-      </li>
-      <li>
-        <i class="layui-icon layui-icon-tabs"></i>
-        <div class="doc-icon-name">Tabs 选项卡</div>
-        <div class="doc-icon-code">&amp;#xe62a;</div>
-        <div class="doc-icon-fontclass">layui-icon-tabs</div>
-      </li>
-      <li>
-        <i class="layui-icon layui-icon-radio"></i>
-        <div class="doc-icon-name">单选框-选中</div>
-        <div class="doc-icon-code">&amp;#xe643;</div>
-        <div class="doc-icon-fontclass">layui-icon-radio</div>
-      </li>
-      <li>
-        <i class="layui-icon layui-icon-circle"></i>
-        <div class="doc-icon-name">单选框-候选</div>
-        <div class="doc-icon-code">&amp;#xe63f;</div>
-        <div class="doc-icon-fontclass">layui-icon-circle</div>
-      </li>
-      <li>
-        <i class="layui-icon layui-icon-edit"></i>
-        <div class="doc-icon-name">编辑</div>
-        <div class="doc-icon-code">&amp;#xe642;</div>
-        <div class="doc-icon-fontclass">layui-icon-edit</div>
-      </li>
-      <li>
-        <i class="layui-icon layui-icon-share"></i>
-        <div class="doc-icon-name">分享</div>
-        <div class="doc-icon-code">&amp;#xe641;</div>
-        <div class="doc-icon-fontclass">layui-icon-share</div>
-      </li>
-      <li>
-        <i class="layui-icon layui-icon-delete"></i>
-        <div class="doc-icon-name">删除</div>
-        <div class="doc-icon-code">&amp;#xe640;</div>
-        <div class="doc-icon-fontclass">layui-icon-delete</div>
-      </li>
-      <li>
-        <i class="layui-icon layui-icon-form"></i>
-        <div class="doc-icon-name">表单</div>
-        <div class="doc-icon-code">&amp;#xe63c;</div>
-        <div class="doc-icon-fontclass">layui-icon-form</div>
-      </li>
-      <li>
-        <i class="layui-icon layui-icon-cellphone-fine"></i>
-        <div class="doc-icon-name">手机-细体</div>
-        <div class="doc-icon-code">&amp;#xe63b;</div>
-        <div class="doc-icon-fontclass">layui-icon-cellphone-fine</div>
-      </li>
-      <li>
-        <i class="layui-icon layui-icon-dialogue"></i>
-        <div class="doc-icon-name">聊天 对话 沟通</div>
-        <div class="doc-icon-code">&amp;#xe63a;</div>
-        <div class="doc-icon-fontclass">layui-icon-dialogue</div>
-      </li>
-      <li>
-        <i class="layui-icon layui-icon-fonts-clear"></i>
-        <div class="doc-icon-name">文字格式化</div>
-        <div class="doc-icon-code">&amp;#xe639;</div>
-        <div class="doc-icon-fontclass">layui-icon-fonts-clear</div>
-      </li>
-      <li>
-        <i class="layui-icon layui-icon-layer"></i>
-        <div class="doc-icon-name">窗口</div>
-        <div class="doc-icon-code">&amp;#xe638;</div>
-        <div class="doc-icon-fontclass">layui-icon-layer</div>
-      </li>
-      <li>
-        <i class="layui-icon layui-icon-date"></i>
-        <div class="doc-icon-name">日期</div>
-        <div class="doc-icon-code">&amp;#xe637;</div>
-        <div class="doc-icon-fontclass">layui-icon-date</div>
-      </li>
-      <li>
-        <i class="layui-icon layui-icon-water"></i>
-        <div class="doc-icon-name">水 下雨</div>
-        <div class="doc-icon-code">&amp;#xe636;</div>
-        <div class="doc-icon-fontclass">layui-icon-water</div>
-      </li>
-      <li>
-        <i class="layui-icon layui-icon-code-circle"></i>
-        <div class="doc-icon-name">代码-圆圈</div>
-        <div class="doc-icon-code">&amp;#xe635;</div>
-        <div class="doc-icon-fontclass">layui-icon-code-circle</div>
-      </li>
-      <li>
-        <i class="layui-icon layui-icon-carousel"></i>
-        <div class="doc-icon-name">轮播组图</div>
-        <div class="doc-icon-code">&amp;#xe634;</div>
-        <div class="doc-icon-fontclass">layui-icon-carousel</div>
-      </li>
-      <li>
-        <i class="layui-icon layui-icon-prev-circle"></i>
-        <div class="doc-icon-name">翻页</div>
-        <div class="doc-icon-code">&amp;#xe633;</div>
-        <div class="doc-icon-fontclass">layui-icon-prev-circle</div>
-      </li>
-      <li>
-        <i class="layui-icon layui-icon-layouts"></i>
-        <div class="doc-icon-name">布局</div>
-        <div class="doc-icon-code">&amp;#xe632;</div>
-        <div class="doc-icon-fontclass">layui-icon-layouts</div>
-      </li>
-      <li>
-        <i class="layui-icon layui-icon-util"></i>
-        <div class="doc-icon-name">工具</div>
-        <div class="doc-icon-code">&amp;#xe631;</div>
-        <div class="doc-icon-fontclass">layui-icon-util</div>
-      </li>
-      <li>
-        <i class="layui-icon layui-icon-templeate-1"></i>
-        <div class="doc-icon-name">选择模板</div>
-        <div class="doc-icon-code">&amp;#xe630;</div>
-        <div class="doc-icon-fontclass">layui-icon-templeate-1</div>
-      </li>
-      <li>
-        <i class="layui-icon layui-icon-upload-circle"></i>
-        <div class="doc-icon-name">上传-圆圈</div>
-        <div class="doc-icon-code">&amp;#xe62f;</div>
-        <div class="doc-icon-fontclass">layui-icon-upload-circle</div>
-      </li>
-      <li>
-        <i class="layui-icon layui-icon-tree"></i>
-        <div class="doc-icon-name">树</div>
-        <div class="doc-icon-code">&amp;#xe62e;</div>
-        <div class="doc-icon-fontclass">layui-icon-tree</div>
-      </li>
-      <li>
-        <i class="layui-icon layui-icon-table"></i>
-        <div class="doc-icon-name">表格</div>
-        <div class="doc-icon-code">&amp;#xe62d;</div>
-        <div class="doc-icon-fontclass">layui-icon-table</div>
-      </li>
-      <li>
-        <i class="layui-icon layui-icon-chart"></i>
-        <div class="doc-icon-name">图表</div>
-        <div class="doc-icon-code">&amp;#xe62c;</div>
-        <div class="doc-icon-fontclass">layui-icon-chart</div>
-      </li>
-      <li>
-        <i class="layui-icon layui-icon-chart-screen"></i>
-        <div class="doc-icon-name">图标 报表 屏幕</div>
-        <div class="doc-icon-code">&amp;#xe629;</div>
-        <div class="doc-icon-fontclass">layui-icon-chart-screen</div>
-      </li>
-      <li>
-        <i class="layui-icon layui-icon-engine"></i>
-        <div class="doc-icon-name">引擎</div>
-        <div class="doc-icon-code">&amp;#xe628;</div>
-        <div class="doc-icon-fontclass">layui-icon-engine</div>
-      </li>
-      <li>
-        <i class="layui-icon layui-icon-triangle-d"></i>
-        <div class="doc-icon-name">下三角</div>
-        <div class="doc-icon-code">&amp;#xe625;</div>
-        <div class="doc-icon-fontclass">layui-icon-triangle-d</div>
-      </li>
-      <li>
-        <i class="layui-icon layui-icon-triangle-r"></i>
-        <div class="doc-icon-name">右三角</div>
-        <div class="doc-icon-code">&amp;#xe623;</div>
-        <div class="doc-icon-fontclass">layui-icon-triangle-r</div>
-      </li>
-      <li>
-        <i class="layui-icon layui-icon-file"></i>
-        <div class="doc-icon-name">文件</div>
-        <div class="doc-icon-code">&amp;#xe621;</div>
-        <div class="doc-icon-fontclass">layui-icon-file</div>
-      </li>
-      <li>
-        <i class="layui-icon layui-icon-set-sm"></i>
-        <div class="doc-icon-name">设置-小型</div>
-        <div class="doc-icon-code">&amp;#xe620;</div>
-        <div class="doc-icon-fontclass">layui-icon-set-sm</div>
-      </li>
-      <li>
-        <i class="layui-icon layui-icon-reduce-circle"></i>
-        <div class="doc-icon-name">减少-圆圈</div>
-        <div class="doc-icon-code">&amp;#xe616;</div>
-        <div class="doc-icon-fontclass">layui-icon-reduce-circle</div>
-      </li>
-      <li>
-        <i class="layui-icon layui-icon-add-circle"></i>
-        <div class="doc-icon-name">添加-圆圈</div>
-        <div class="doc-icon-code">&amp;#xe61f;</div>
-        <div class="doc-icon-fontclass">layui-icon-add-circle</div>
-      </li>
-      <li>
-        <i class="layui-icon layui-icon-404"></i>
-        <div class="doc-icon-name">404</div>
-        <div class="doc-icon-code">&amp;#xe61c;</div>
-        <div class="doc-icon-fontclass">layui-icon-404</div>
-      </li>
-      <li>
-        <i class="layui-icon layui-icon-about"></i>
-        <div class="doc-icon-name">关于</div>
-        <div class="doc-icon-code">&amp;#xe60b;</div>
-        <div class="doc-icon-fontclass">layui-icon-about</div>
-      </li>
-      <li>
-        <i class="layui-icon layui-icon-up"></i>
-        <div class="doc-icon-name">箭头 向上</div>
-        <div class="doc-icon-code">&amp;#xe619;</div>
-        <div class="doc-icon-fontclass">layui-icon-up</div>
-      </li>
-      <li>
-        <i class="layui-icon layui-icon-down"></i>
-        <div class="doc-icon-name">箭头 向下</div>
-        <div class="doc-icon-code">&amp;#xe61a;</div>
-        <div class="doc-icon-fontclass">layui-icon-down</div>
-      </li>
-      <li>
-        <i class="layui-icon layui-icon-left"></i>
-        <div class="doc-icon-name">箭头 向左</div>
-        <div class="doc-icon-code">&amp;#xe603;</div>
-        <div class="doc-icon-fontclass">layui-icon-left</div>
-      </li>
-      <li>
-        <i class="layui-icon layui-icon-right"></i>
-        <div class="doc-icon-name">箭头 向右</div>
-        <div class="doc-icon-code">&amp;#xe602;</div>
-        <div class="doc-icon-fontclass">layui-icon-right</div>
-      </li>
-      <li>
-        <i class="layui-icon layui-icon-circle-dot"></i>
-        <div class="doc-icon-name">圆点</div>
-        <div class="doc-icon-code">&amp;#xe617;</div>
-        <div class="doc-icon-fontclass">layui-icon-circle-dot</div>
-      </li>
-      <li>
-        <i class="layui-icon layui-icon-search"></i>
-        <div class="doc-icon-name">搜索</div>
-        <div class="doc-icon-code">&amp;#xe615;</div>
-        <div class="doc-icon-fontclass">layui-icon-search</div>
-      </li>
-      <li>
-        <i class="layui-icon layui-icon-set-fill"></i>
-        <div class="doc-icon-name">设置-实心</div>
-        <div class="doc-icon-code">&amp;#xe614;</div>
-        <div class="doc-icon-fontclass">layui-icon-set-fill</div>
-      </li>
-      <li>
-        <i class="layui-icon layui-icon-group"></i>
-        <div class="doc-icon-name">群组</div>
-        <div class="doc-icon-code">&amp;#xe613;</div>
-        <div class="doc-icon-fontclass">layui-icon-group</div>
-      </li>
-      <li>
-        <i class="layui-icon layui-icon-friends"></i>
-        <div class="doc-icon-name">好友</div>
-        <div class="doc-icon-code">&amp;#xe612;</div>
-        <div class="doc-icon-fontclass">layui-icon-friends</div>
-      </li>
-      <li>
-        <i class="layui-icon layui-icon-reply-fill"></i>
-        <div class="doc-icon-name">回复 评论 实心</div>
-        <div class="doc-icon-code">&amp;#xe611;</div>
-        <div class="doc-icon-fontclass">layui-icon-reply-fill</div>
-      </li>
-      <li>
-        <i class="layui-icon layui-icon-menu-fill"></i>
-        <div class="doc-icon-name">菜单 隐身 实心</div>
-        <div class="doc-icon-code">&amp;#xe60f;</div>
-        <div class="doc-icon-fontclass">layui-icon-menu-fill</div>
-      </li>
-      <li>
-        <i class="layui-icon layui-icon-log"></i>
-        <div class="doc-icon-name">记录</div>
-        <div class="doc-icon-code">&amp;#xe60e;</div>
-        <div class="doc-icon-fontclass">layui-icon-log</div>
-      </li>
-      <li>
-        <i class="layui-icon layui-icon-picture-fine"></i>
-        <div class="doc-icon-name">图片-细体</div>
-        <div class="doc-icon-code">&amp;#xe60d;</div>
-        <div class="doc-icon-fontclass">layui-icon-picture-fine</div>
-      </li>
-      <li>
-        <i class="layui-icon layui-icon-face-smile-fine"></i>
-        <div class="doc-icon-name">表情-笑-细体</div>
-        <div class="doc-icon-code">&amp;#xe60c;</div>
-        <div class="doc-icon-fontclass">layui-icon-face-smile-fine</div>
-      </li>
-      <li>
-        <i class="layui-icon layui-icon-list"></i>
-        <div class="doc-icon-name">列表</div>
-        <div class="doc-icon-code">&amp;#xe60a;</div>
-        <div class="doc-icon-fontclass">layui-icon-list</div>
-      </li>
-      <li>
-        <i class="layui-icon layui-icon-release"></i>
-        <div class="doc-icon-name">发布 纸飞机</div>
-        <div class="doc-icon-code">&amp;#xe609;</div>
-        <div class="doc-icon-fontclass">layui-icon-release</div>
-      </li>
-      <li>
-        <i class="layui-icon layui-icon-ok"></i>
-        <div class="doc-icon-name">对 OK</div>
-        <div class="doc-icon-code">&amp;#xe605;</div>
-        <div class="doc-icon-fontclass">layui-icon-ok</div>
-      </li>
-      <li>
-        <i class="layui-icon layui-icon-help"></i>
-        <div class="doc-icon-name">帮助</div>
-        <div class="doc-icon-code">&amp;#xe607;</div>
-        <div class="doc-icon-fontclass">layui-icon-help</div>
-      </li>
-      <li>
-        <i class="layui-icon layui-icon-chat"></i>
-        <div class="doc-icon-name">客服</div>
-        <div class="doc-icon-code">&amp;#xe606;</div>
-        <div class="doc-icon-fontclass">layui-icon-chat</div>
-      </li>
-      <li>
-        <i class="layui-icon layui-icon-top"></i>
-        <div class="doc-icon-name">top 置顶</div>
-        <div class="doc-icon-code">&amp;#xe604;</div>
-        <div class="doc-icon-fontclass">layui-icon-top</div>
-      </li>
-      <li>
-        <i class="layui-icon layui-icon-star"></i>
-        <div class="doc-icon-name">收藏-空心</div>
-        <div class="doc-icon-code">&amp;#xe600;</div>
-        <div class="doc-icon-fontclass">layui-icon-star</div>
-      </li>
-      <li>
-        <i class="layui-icon layui-icon-star-fill"></i>
-        <div class="doc-icon-name">收藏-实心</div>
-        <div class="doc-icon-code">&amp;#xe658;</div>
-        <div class="doc-icon-fontclass">layui-icon-star-fill</div>
-      </li>
-      <li>
-        <i class="layui-icon layui-icon-close-fill"></i>
-        <div class="doc-icon-name">关闭-实心</div>
-        <div class="doc-icon-code">&amp;#x1007;</div>
-        <div class="doc-icon-fontclass">layui-icon-close-fill</div>
-      </li>
-      <li>
-        <i class="layui-icon layui-icon-close"></i>
-        <div class="doc-icon-name">关闭-空心</div>
-        <div class="doc-icon-code">&amp;#x1006;</div>
-        <div class="doc-icon-fontclass">layui-icon-close</div>
-      </li>
-      <li>
-        <i class="layui-icon layui-icon-ok-circle"></i>
-        <div class="doc-icon-name">正确</div>
-        <div class="doc-icon-code">&amp;#x1005;</div>
-        <div class="doc-icon-fontclass">layui-icon-ok-circle</div>
-      </li>
-      <li>
-        <i class="layui-icon layui-icon-add-circle-fine"></i>
-        <div class="doc-icon-name">添加-圆圈-细体</div>
-        <div class="doc-icon-code">&amp;#xe608;</div>
-        <div class="doc-icon-fontclass">layui-icon-add-circle-fine</div>
-      </li>
-    </ul>
-</template>
-
-<script>
-import { ref } from 'vue'
-
-export default {
-  setup() {
-
-    return {
-    }
-  }
-}
-</script>
-
-:::
-
-::: title 图标属性
-:::
-
-::: table
-
-| 属性   | 描述 | 默认值            |
-| ------ | ---- | ----------------- |
-| type   | 图标 | `layui-icon-home` |
-| prefix | 前缀 | `layui-icon`      |
-| color  | 颜色 | --                |
-| size   | 尺寸 | --                |
-
-:::
diff --git a/example/docs/zh-CN/components/iconPicker.md b/example/docs/zh-CN/components/iconPicker.md
deleted file mode 100644
index e9d0b09..0000000
--- a/example/docs/zh-CN/components/iconPicker.md
+++ /dev/null
@@ -1,112 +0,0 @@
-::: title 基础使用
-:::
-
-::: demo
-
-<template>
-  <lay-icon-picker type="layui-icon-face-smile"></lay-icon-picker>
-</template>
-
-<script>
-import { ref } from 'vue'
-
-export default {
-  setup() {
-
-    const icon = ref("layui-icon-home")
-
-    return {
-    }
-  }
-}
-</script>
-
-:::
-
-::: title 默认选择
-:::
-
-::: demo
-
-<template>
-  <lay-icon-picker v-model="icon" type="layui-icon-face-smile"></lay-icon-picker>
-</template>
-
-<script>
-import { ref } from 'vue'
-
-export default {
-  setup() {
-
-    const icon = ref("layui-icon-home")
-
-    return {
-    }
-  }
-}
-</script>
-
-:::
-
-::: title 开启分页
-:::
-
-::: demo
-
-<template>
-  <lay-icon-picker v-model="icon" type="layui-icon-face-smile" page></lay-icon-picker>
-</template>
-
-<script>
-import { ref } from 'vue'
-
-export default {
-  setup() {
-
-    const icon = ref("layui-icon-home")
-
-    return {
-    }
-  }
-}
-</script>
-
-:::
-
-::: title 开启搜索
-:::
-
-::: demo
-
-<template>
-  <lay-icon-picker v-model="icon" type="layui-icon-face-smile" page showSearch></lay-icon-picker>
-</template>
-
-<script>
-import { ref } from 'vue'
-
-export default {
-  setup() {
-
-    const icon = ref("layui-icon-home")
-
-    return {
-    }
-  }
-}
-</script>
-
-:::
-
-::: title icon-picker 属性
-:::
-
-::: table
-
-|            |          |     |
-| ---------- | -------- | --- |
-| v-model    | 默认值   | --  |
-| page       | 开启分页 | --  |
-| showSearch | 启用搜索 | --  |
-
-:::
diff --git a/example/docs/zh-CN/components/input.md b/example/docs/zh-CN/components/input.md
deleted file mode 100644
index 46197f5..0000000
--- a/example/docs/zh-CN/components/input.md
+++ /dev/null
@@ -1,131 +0,0 @@
-::: title 基础使用
-:::
-
-::: demo
-
-<template>
-  <lay-input v-model="data1"></lay-input>
-</template>
-
-<script>
-import { ref } from 'vue'
-
-export default {
-  setup() {
-
-    const data1 = ref("内容");
-
-    return {
-      data1
-    }
-  }
-}
-</script>
-
-:::
-
-::: title 提示信息
-:::
-
-::: demo
-
-<template>
-  <lay-input placeholder="提示信息"></lay-input>
-</template>
-
-<script>
-import { ref } from 'vue'
-
-export default {
-  setup() {
-
-    return {
-    }
-  }
-}
-</script>
-
-:::
-
-::: title 事件回调
-:::
-
-::: demo
-
-<template>
-  <lay-input v-model="data2" @input="input"></lay-input>
-</template>
-
-<script>
-import { ref } from 'vue'
-
-export default {
-  setup() {
-
-    const data2 = ref("Input 事件");
-    const input = function( val ) {
-        console.log("当前值:" + val)
-    }
-
-    return {
-      data2,
-      input
-    }
-  }
-}
-</script>
-
-:::
-
-::: title 禁止输入
-:::
-
-::: demo
-
-<template>
-  <lay-input placeholder="禁止输入" :disabled="disabled"></lay-input>
-</template>
-
-<script>
-import { ref } from 'vue'
-
-export default {
-  setup() {
-
-    const disabled = ref(true)
-
-    return {
-        disabled
-    }
-  }
-}
-</script>
-
-:::
-
-::: title 输入框属性
-:::
-
-::: table
-
-| 属性        | 描述          | 可选值         |
-| ----------- | ------------- | -------------- |
-| name        | 原始属性 name | --             |
-| placeholder | 提示信息      | --             |
-| disabled    | 禁用          | `true` `false` |
-| v-model     | 值            | --             |
-
-:::
-
-::: title 输入框属性
-:::
-
-::: table
-
-| 事件  | 描述            | 参数             |
-| ----- | --------------- | ---------------- |
-| input | 原生 input 事件 | event : 事件对象 |
-| foucs | 原生 foucs 事件 | event : 事件对象 |
-| blur  | 原生 blur 事件  | --               |
-
-:::
diff --git a/example/docs/zh-CN/components/layer.md b/example/docs/zh-CN/components/layer.md
deleted file mode 100644
index 80d7d35..0000000
--- a/example/docs/zh-CN/components/layer.md
+++ /dev/null
@@ -1,274 +0,0 @@
-::: title 基本使用
-:::
-
-::: demo
-
-<template>
-  <lay-button @click="changeVisible1" type="primary">基础使用</lay-button>
-  <lay-layer title="基础使用" v-model:visible="visible1">
-    <div style="padding:10px">
-    这是一个基础弹窗
-    </div>
-  </lay-layer>
-</template>
-
-<script>
-import { ref, watch } from "vue";
-import { useRoute, useRouter } from "vue-router";
-export default {
-  setup() {
-
-    const visible1 = ref(false)
-
-    const changeVisible1 = function() {
-        visible1.value = !visible1.value
-    }
-
-    return {
-        visible1
-    };
-  },
-};
-</script>
-
-:::
-
-::: title 允许拖动
-:::
-
-::: demo
-
-<template>
-  <lay-button @click="changeVisible2" type="primary">允许拖动</lay-button>
-  <lay-layer title="允许拖动" v-model:visible="visible2" move="true">
-    <div style="padding:10px">
-      这是一个可以拖拽的弹窗
-    </div>
-  </lay-layer>
-</template>
-
-<script>
-import { ref, watch } from "vue";
-import { useRoute, useRouter } from "vue-router";
-export default {
-  setup() {
-
-    const visible2 = ref(false)
-
-    const changeVisible2 = function() {
-        visible2.value = !visible2.value
-    }
-
-    return {
-        visible2
-    };
-  },
-};
-</script>
-
-:::
-
-::: title 放大缩小
-:::
-
-::: demo
-
-<template>
-  <lay-button @click="changeVisible3" type="primary">放大缩小</lay-button>
-  <lay-layer title="放大缩小" v-model:visible="visible3" move="true" maxmin="true">
-      <div style="padding:10px">
-        该弹窗支持放大缩小
-      </div>
-  </lay-layer>
-</template>
-
-<script>
-import { ref, watch } from "vue";
-import { useRoute, useRouter } from "vue-router";
-export default {
-  setup() {
-
-    const visible3 = ref(false)
-
-    const changeVisible3 = function() {
-        visible3.value = !visible3.value
-    }
-
-    return {
-        visible3
-    };
-  },
-};
-</script>
-
-:::
-
-::: title 指定位置
-:::
-
-::: demo
-
-<template>
-  <lay-button @click="changeVisible4" type="primary">指定位置</lay-button>
-  <lay-layer title="指定位置" v-model:visible="visible4" move="true" :offset="['100px','100px']">
-      <div style="padding:10px">
-      指定弹窗显示的默认位置
-      </div>
-  </lay-layer>
-</template>
-
-<script>
-import { ref, watch } from "vue";
-import { useRoute, useRouter } from "vue-router";
-export default {
-  setup() {
-
-    const visible4 = ref(false)
-
-    const changeVisible4 = function() {
-        visible4.value = !visible4.value
-    }
-
-    return {
-        visible4
-    };
-  },
-};
-</script>
-
-:::
-
-::: title 远程窗体
-:::
-
-::: demo
-
-<template>
-  <lay-button @click="changeVisible5" type="primary">远程窗体</lay-button>
-  <lay-layer title="加载 Iframe 内容" width="500px" height="400px" maxmin="true" v-model:visible="visible5" move="true" :type="type5" content="http://www.pearadmin.com"></lay-layer>
-</template>
-
-<script>
-import { ref, watch } from "vue";
-import { useRoute, useRouter } from "vue-router";
-export default {
-  setup() {
-
-    const type5 = ref(2)
-    const visible5 = ref(false)
-
-    const changeVisible5 = function() {
-        visible5.value = !visible5.value
-    }
-
-    return {
-        type5,
-        visible5
-    };
-  },
-};
-</script>
-
-:::
-
-::: title 定义操作
-:::
-
-::: demo
-
-<template>
-  <lay-button @click="changeVisible6" type="primary">定义操作</lay-button>
-  <lay-layer title="定义操作" v-model:visible="visible6" move="true" :btn="btn6">
-    <div style="padding:10px">
-    定义一组弹窗操作按钮
-    </div>
-  </lay-layer>
-</template>
-
-<script>
-import { ref, watch } from "vue";
-import { useRoute, useRouter } from "vue-router";
-export default {
-  setup() {
-
-    const visible6 = ref(false)
-    const btn6 = [
-        {text:'确认', callback: ()=>{ alert("确认事件") }},
-        {text:'取消', callback: ()=>{ alert("取消事件") }}
-    ]
-
-    const changeVisible6 = function() {
-        visible6.value = !visible6.value
-    }
-
-    return {
-        btn6,
-        visible6
-    };
-  },
-};
-</script>
-
-:::
-
-::: title 开启遮盖
-:::
-
-::: demo
-
-<template>
-  <lay-button @click="changeVisible7" type="primary">开启遮盖</lay-button>
-  <lay-layer title="开启遮盖" move="true" shade="true" v-model:visible="visible7">
-    <div style="padding:10px">
-      允许点击遮盖层关闭弹窗
-    </div>
-  </lay-layer>
-</template>
-
-<script>
-import { ref, watch } from "vue";
-import { useRoute, useRouter } from "vue-router";
-export default {
-  setup() {
-
-    const visible7 = ref(false)
-
-    const changeVisible7 = function() {
-        visible7.value = !visible7.value
-    }
-
-    return {
-        visible7
-    };
-  },
-};
-</script>
-
-:::
-
-::: title 弹层属性
-:::
-
-::: table
-
-| 备注            | 描述          | 默认值                     |
-| --------------- | ------------- | -------------------------- |
-| title           | 标题          | --                         |
-| move            | 允许拖拽      | `false`                    |
-| maxmin          | 最小化 最大化 | `false`                    |
-| offset          | 位置          | --                         |
-| width           | 宽            | --                         |
-| height          | 高            | --                         |
-| v-model:visible | 展示 隐藏     | false                      |
-| content         | 内容          | --                         |
-| shade           | 开启遮盖      | --                         |
-| shadeClose      | 遮盖点击关闭  | --                         |
-| zIndex          | 自定义层级    | --                         |
-| type            | 类型          | `1: component` `2: iframe` |
-| closeBtn        | 显示关闭      | true                       |
-| btn             | 按钮          |                            |
-| btnAlign        | 按钮布局      | `l` `r` `c`                |
-| anim            | 入场动画      | `0` `-` `6`                |
-| isOutAnim       | 关闭动画      | `true` `false`             |
-
-:::
diff --git a/example/docs/zh-CN/components/layout.md b/example/docs/zh-CN/components/layout.md
deleted file mode 100644
index 8d940cd..0000000
--- a/example/docs/zh-CN/components/layout.md
+++ /dev/null
@@ -1,186 +0,0 @@
-::: title 基础使用
-:::
-
-::: demo
-
-<template>
-  <lay-layout>
-    <lay-header>header</lay-header>
-    <lay-body>content</lay-body>
-    <lay-footer>footer</lay-footer>
-  </lay-layout>
-</template>
-
-<script>
-import { ref } from 'vue';
-
-export default {
-  setup() {
-
-    return {
-    }
-  }
-}
-</script>
-
-<style>
-.lay-code .layui-footer,
-.lay-code .layui-header {
-  line-height: 60px;
-  text-align: center;
-  background: #87ca9a;
-  color: white;
-}
-.lay-code .layui-side {
-  display: flex;
-  background: #77c38c;
-  align-items: center;
-  justify-content: center;
-  color: white;
-}
-.lay-code .layui-body {
-  display: flex;
-  background: #5FB878;
-  align-items: center;
-  justify-content: center;
-  color: white;
-}
-</style>
-
-:::
-
-::: title 左右布局
-:::
-
-::: demo
-
-<template>
-  <lay-layout>
-    <lay-side>left</lay-side>
-    <lay-body>content</lay-body>
-    <lay-side>right</lay-side>
-  </lay-layout>
-</template>
-
-<script>
-import { ref } from 'vue';
-
-export default {
-  setup() {
-
-    return {
-    }
-  }
-}
-</script>
-
-:::
-
-::: title 后台布局
-:::
-
-::: demo
-
-<template>
-  <lay-layout>
-    <lay-header>header</lay-header>
-    <lay-layout>
-      <lay-side>side</lay-side>
-      <lay-body>content</lay-body>
-    </lay-layout>
-  </lay-layout>
-</template>
-
-<script>
-import { ref } from 'vue';
-
-export default {
-  setup() {
-
-    return {
-    }
-  }
-}
-</script>
-
-:::
-
-::: title 复杂布局
-:::
-
-::: demo
-
-<template>
-  <lay-layout>
-    <lay-side>side</lay-side>
-    <lay-layout>
-      <lay-header>header</lay-header>
-      <lay-body>body</lay-body>
-      <lay-footer>footer</lay-footer>
-    </lay-layout>
-  </lay-layout>
-  <hr>
-  <lay-layout>
-    <lay-layout>
-      <lay-header>header</lay-header>
-      <lay-body>body</lay-body>
-      <lay-footer>footer</lay-footer>
-    </lay-layout>
-    <lay-side>side</lay-side>
-  </lay-layout>
-  <hr>
-  <lay-layout>
-    <lay-header>Header</lay-header>
-    <lay-body>
-      <lay-layout>
-        <lay-side :width="160">Left</lay-side>
-        <lay-body>Content</lay-body>
-      </lay-layout>
-    </lay-body>
-    <lay-footer>Footer</lay-footer>
-  </lay-layout>
-  <hr>
-  <lay-layout>
-    <lay-header>Header</lay-header>
-    <lay-body>
-      <lay-layout>
-        <lay-body>Content</lay-body>
-        <lay-side :width="160">Right</lay-side>
-      </lay-layout>
-    </lay-body>
-    <lay-footer>Footer</lay-footer>
-  </lay-layout>
-</template>
-
-<script>
-import { ref } from 'vue';
-
-export default {
-  setup() {
-
-    return {
-    }
-  }
-}
-</script>
-
-:::
-
-<br>
-<br>
-
-::: title 布局组件
-:::
-
-::: table
-
-| 组件       | 描述 |     |
-| ---------- | ---- | --- |
-| lay-layout | 容器 | --  |
-| lay-header | 顶部 | --  |
-| lay-logo   | 图标 | --  |
-| lay-side   | 侧边 | --  |
-| lay-body   | 内容 | --  |
-| lay-footer | 底部 | --  |
-
-:::
diff --git a/example/docs/zh-CN/components/line.md b/example/docs/zh-CN/components/line.md
deleted file mode 100644
index 19676f0..0000000
--- a/example/docs/zh-CN/components/line.md
+++ /dev/null
@@ -1,43 +0,0 @@
-::: demo
-
-<template>
-  默认分割线
-  <lay-line></lay-line><br/>
-  赤色分割线
-  <lay-line theme="red"></lay-line><br/>
-  橙色分割线
-  <lay-line theme="orange"></lay-line><br/>
-  墨绿分割线
-  <lay-line theme="green"></lay-line><br/>
-  青色分割线
-  <lay-line theme="cyan"></lay-line><br/>
-  蓝色分割线
-  <lay-line theme="blue"></lay-line><br/>
-  黑色分割线
-  <lay-line theme="black"></lay-line><br/>
-</template>
-
-<script>
-import { ref } from 'vue'
-
-export default {
-  setup() {
-
-    return {
-    }
-  }
-}
-</script>
-
-:::
-
-::: title 分割属性
-:::
-
-::: table
-
-| Name  | Description | Accepted Values                               |
-| ----- | ----------- | --------------------------------------------- |
-| theme | 主题        | `orange` `green` `cyan` `blue` `black` `gray` |
-
-:::
diff --git a/example/docs/zh-CN/components/menu.md b/example/docs/zh-CN/components/menu.md
deleted file mode 100644
index a8f7b7e..0000000
--- a/example/docs/zh-CN/components/menu.md
+++ /dev/null
@@ -1,101 +0,0 @@
-::: title 基础使用
-:::
-
-::: demo
-
-<template>
-  <lay-menu v-model:selectedKey="selectedKey" v-model:openKeys="openKeys">
-    <lay-menu-item title="首页" id="1"></lay-menu-item>
-    <lay-menu-item title="用户" id="2"></lay-menu-item>
-    <lay-menu-item title="角色" id="3"></lay-menu-item> 
-    <lay-menu-item title="目录" id="7">
-        <lay-menu-child-item title="菜单一" id="4"></lay-menu-child-item> 
-        <lay-menu-child-item title="菜单二" id="5"></lay-menu-child-item>
-        <lay-menu-child-item title="菜单三" id="6"></lay-menu-child-item>
-    </lay-menu-item> 
-  </lay-menu>
-</template>
-
-<script>
-import { ref } from 'vue'
-
-export default {
-  setup() {
-
-    const selectedKey = ref("5")
-    const openKeys = ref(["7"])   
-    return {
-      selectedKey,
-      openKeys
-    }
-  }
-}
-</script>
-
-:::
-
-::: title 垂直导航
-:::
-
-::: demo
-
-<template>
-  <lay-menu v-model:selectedKey="selectedKey" v-model:openKeys="openKeys" v-model:tree="isTree">
-    <lay-menu-item title="首页" id="1">
-      <template v-slot:title> 
-        <router-link to="">无感</router-link>
-      </template>
-    </lay-menu-item>
-    <lay-menu-item title="用户" id="2"></lay-menu-item>
-    <lay-menu-item title="角色" id="3"></lay-menu-item> 
-    <lay-menu-item title="目录" id="7">
-        <lay-menu-child-item title="菜单一" id="4"></lay-menu-child-item> 
-        <lay-menu-child-item title="菜单二" id="5"></lay-menu-child-item>
-        <lay-menu-child-item title="菜单三" id="6"></lay-menu-child-item>
-    </lay-menu-item> 
-  </lay-menu>
-</template>
-
-<script>
-import { ref } from 'vue'
-
-export default {
-  setup() {
-
-    const isTree = ref(true)
-    const selectedKey = ref("5")
-    const openKeys = ref(["7"])
-
-    return {
-      isTree,
-      openKeys,
-      selectedKey
-    }
-  }
-}
-</script>
-
-:::
-
-::: title 菜单属性
-:::
-
-::: table
-
-| 属性                | 描述   | 备注 |
-| ------------------- | ------ | ---- |
-| v-model:selectedKey | 选中项 | --   |
-| v-model:openKeys    | 打开项 | --   |
-
-:::
-
-::: title 菜单插槽
-:::
-
-::: table
-
-| 插槽  | 描述     | 备注 |
-| ----- | -------- | ---- |
-| title | 菜单标题 | --   |
-
-:::
diff --git a/example/docs/zh-CN/components/page.md b/example/docs/zh-CN/components/page.md
deleted file mode 100644
index 5e8bb3c..0000000
--- a/example/docs/zh-CN/components/page.md
+++ /dev/null
@@ -1,234 +0,0 @@
-::: title 基础使用
-:::
-
-::: demo
-
-<template>
-  <lay-page :limit="limit" :total="total" :show-page="showPage"></lay-page>
-</template>
-
-<script>
-import { ref } from 'vue'
-
-export default {
-  setup() {
-
-    const limit = ref(20)
-    const total = ref(100)
-    const showPage = ref(true)
-
-    return {
-      limit,
-      total,
-      showPage
-    }
-  }
-}
-</script>
-
-:::
-
-::: title 简单模式
-:::
-
-::: demo
-
-<template>
-  <lay-page :limit="limit" :total="total"></lay-page>
-</template>
-
-<script>
-import { ref } from 'vue'
-
-export default {
-  setup() {
-
-    const limit = ref(20)
-    const total = ref(100)
-
-    return {
-      limit,
-      total
-    }
-  }
-}
-</script>
-
-:::
-
-::: title 插槽使用
-:::
-
-::: demo
-
-<template>
-  <lay-page :limit="limit" :total="total">
-    <template v-slot:prev>上</template>
-    <template v-slot:next>下</template>
-  </lay-page>
-</template>
-
-<script>
-import { ref } from 'vue'
-
-export default {
-  setup() {
-
-    const limit = ref(20)
-    const total = ref(100)
-
-    return {
-      limit,
-      total
-    }
-  }
-}
-</script>
-
-:::
-
-::: title 不同主题
-:::
-
-::: demo
-
-<template>
-  <lay-page :limit="limit" :total="total" :show-page="showPage" theme="red"></lay-page>
-  <br>
-  <lay-page :limit="limit" :total="total" :show-page="showPage" theme="blue"></lay-page>
-  <br>
-  <lay-page :limit="limit" :total="total" :show-page="showPage" theme="orange"></lay-page>
-</template>
-
-<script>
-import { ref } from 'vue'
-
-export default {
-  setup() {
-
-    const limit = ref(20)
-    const total = ref(100)
-    const showPage = ref(true)
-
-    return {
-      limit,
-      total,
-      showPage
-    }
-  }
-}
-</script>
-
-:::
-
-::: title 完整分页
-:::
-
-::: demo
-
-<template>
-  <lay-page :limit="limit" :total="total" :show-count="showCount" :show-page="showPage" :show-limit="showLimit" :show-refresh="showRefresh" showSkip="showSkip"></lay-page>
-</template>
-
-<script>
-import { ref } from 'vue'
-
-export default {
-  setup() {
-
-    const limit = ref(20)
-    const total = ref(100)
-    const showCount = ref(true)
-    const showPage = ref(true)
-    const showLimit = ref(true)
-    const showRefresh = ref(true)
-    const showSkip = ref(true)
-
-    return {
-      limit,
-      total,
-      showCount,
-      showPage,
-      showLimit,
-      showRefresh,
-      showSkip
-    }
-  }
-}
-</script>
-
-:::
-
-::: title 切换事件
-:::
-
-::: demo
-
-<template>
-  <lay-page :limit="limit" :total="total" @jump="jump" :show-page="showSkip"></lay-page>
-</template>
-
-<script>
-import { ref } from 'vue'
-
-export default {
-  setup() {
-
-    const limit = ref(20)
-    const total = ref(100)
-    const showPage = ref(true)
-    const jump = function({ current }) {
-      console.log("当前页:" + current)
-    }
-
-    return {
-      limit,
-      total,
-      jump,
-      showPage
-    }
-  }
-}
-</script>
-
-:::
-
-::: title 分页属性
-:::
-
-::: table
-
-| 属性        | 描述         | 默认值  |
-| ----------- | ------------ | ------- |
-| limit       | 每页数量     | --      |
-| total       | 总条数       | --      |
-| showCount   | 显示总数     | `false` |
-| showPage    | 显示每页     | `false` |
-| showLimit   | 显示每页数量 | `false` |
-| showRefresh | 显示刷新按钮 | `false` |
-| showSkip    | 显示跳转     | `false` |
-
-:::
-
-::: title 分页事件
-:::
-
-::: table
-
-| 事件 | 描述     | 参数                  |
-| ---- | -------- | --------------------- |
-| jump | 切换回调 | { current: 当前页面 } |
-
-:::
-
-::: title 分页插槽
-:::
-
-::: table
-
-| 插槽 | 描述   | 默认值 |
-| ---- | ------ | ------ |
-| prev | 上一页 | 上一页 |
-| next | 下一页 | 下一页 |
-
-:::
diff --git a/example/docs/zh-CN/components/panel.md b/example/docs/zh-CN/components/panel.md
deleted file mode 100644
index bb65a5e..0000000
--- a/example/docs/zh-CN/components/panel.md
+++ /dev/null
@@ -1,33 +0,0 @@
-::: title 基础使用
-:::
-
-::: demo
-
-<template>
-  <lay-panel><div style="padding: 30px;">面板</div></lay-panel>
-</template>
-
-<script>
-import { ref } from 'vue'
-
-export default {
-  setup() {
-
-    return {
-    }
-  }
-}
-</script>
-
-:::
-
-::: title 面板插槽
-:::
-
-::: table
-
-| 插槽    | 描述     | 可选值 |
-| ------- | -------- | ------ |
-| default | 默认插槽 | --     |
-
-:::
diff --git a/example/docs/zh-CN/components/progress.md b/example/docs/zh-CN/components/progress.md
deleted file mode 100644
index c94f64e..0000000
--- a/example/docs/zh-CN/components/progress.md
+++ /dev/null
@@ -1,127 +0,0 @@
-::: title 基础使用
-:::
-
-::: demo
-
-<template>
-  <lay-progress percent="70"></lay-progress>
-  <br>
-  <lay-progress percent="60"></lay-progress>
-</template>
-
-<script>
-import { ref } from 'vue';
-
-export default {
-  setup() {
-
-    return {
-    }
-  }
-}
-</script>
-
-:::
-
-::: title 尺寸大小
-:::
-
-::: demo
-
-<template>
-  <lay-progress percent="40" size="big"></lay-progress>
-  <br>
-  <lay-progress percent="60" size="big" theme="green"></lay-progress>
-  <br>
-  <lay-progress percent="80" size="big" theme="cyan"></lay-progress>
-</template>
-
-<script>
-import { ref } from 'vue'
-
-export default {
-  setup() {
-
-    return {
-    }
-  }
-}
-</script>
-
-:::
-
-::: title 指定主题
-:::
-
-::: demo
-
-<template>
-  <lay-progress percent="60" theme="red"></lay-progress>
-  <br>
-  <lay-progress percent="60" theme="orange"></lay-progress>
-  <br>
-  <lay-progress percent="60" theme="green"></lay-progress>
-  <br>
-  <lay-progress percent="60" theme="blue"></lay-progress>
-  <br>
-  <lay-progress percent="60" theme="cyan"></lay-progress>
-</template>
-
-<script>
-import { ref } from 'vue';
-
-export default {
-  setup() {
-
-    return {
-    }
-  }
-}
-</script>
-
-:::
-
-::: title 显示文字
-:::
-
-::: demo
-
-<template>
-  <lay-progress percent="80" :show-text="showText"></lay-progress>
-  <br/>
-  <br/>
-  <lay-progress percent="80" :show-text="showText" text="销售量"></lay-progress>
-</template>
-
-<script>
-import { ref } from 'vue'
-
-export default {
-  setup() {
-
-    const showText = ref(true)
-
-    return {
-      showText
-    }
-  }
-}
-</script>
-
-:::
-
-::: title 进度属性
-:::
-
-::: table
-
-| 属性     | 描述     | 可选值                                        |
-| -------- | -------- | --------------------------------------------- |
-| percent  | 进度     | --                                            |
-| theme    | 主题     | `orange` `green` `cyan` `blue` `black` `gray` |
-| size     | 尺寸     | `big`                                         |
-| text     | 提示     | --                                            |
-| color    | 颜色     | --                                            |
-| showText | 展示描述 | --                                            |
-
-:::
diff --git a/example/docs/zh-CN/components/radio.md b/example/docs/zh-CN/components/radio.md
deleted file mode 100644
index e57707f..0000000
--- a/example/docs/zh-CN/components/radio.md
+++ /dev/null
@@ -1,119 +0,0 @@
-::: title 基础使用
-:::
-
-::: demo
-
-<template>
-  <lay-form>
-    <lay-radio v-model="selected1" name="action" label="1">写作</lay-radio>
-    <lay-radio v-model="selected1" name="action" label="2">画画</lay-radio>
-    <lay-radio v-model="selected1" name="action" label="3">运动</lay-radio>
-  </lay-form>
-</template>
-
-<script>
-import { ref } from 'vue'
-
-export default {
-  setup() {
-
-    const selected1 = ref("1");
-
-    return {
-        selected1
-    }
-  }
-}
-</script>
-
-:::
-
-::: title 禁用状态
-:::
-
-::: demo
-
-<template>
-  <lay-form>
-    <lay-radio v-model="selected2" name="action" label="1">写作</lay-radio>
-    <lay-radio v-model="selected2" name="action" label="2">画画</lay-radio>
-    <lay-radio v-model="selected2" name="action" label="3">运动</lay-radio>
-    <lay-radio v-model="selected2" name="action" label="4" :disabled="disabled">禁用</lay-radio>
-  </lay-form>
-</template>
-
-<script>
-import { ref } from 'vue'
-
-export default {
-  setup() {
-
-    const disabled = ref(true);
-    const selected2 = ref("1");
-
-    return {
-        disabled,
-        selected2
-    }
-  }
-}
-</script>
-
-:::
-
-::: title 事件回调
-:::
-
-::: demo
-
-<template>
-  <lay-form>
-    <lay-radio v-model="selected3" name="action" label="1" @change="change">写作</lay-radio>
-    <lay-radio v-model="selected3" name="action" label="2" @change="change">画画</lay-radio>
-    <lay-radio v-model="selected3" name="action" label="3" @change="change">运动</lay-radio>
-  </lay-form>
-</template>
-
-<script>
-import { ref } from 'vue'
-
-export default {
-  setup() {
-
-    const selected3 = ref("1");
-    const change = function( current ) {
-        console.log("当前值:" + current)
-    }
-    return {
-        selected3,
-        change
-    }
-  }
-}
-</script>
-
-:::
-
-::: title 单选框属性
-:::
-
-::: table
-
-| 属性    | 描述          | 默认值 |
-| ------- | ------------- | ------ |
-| name    | 原始属性 name | --     |
-| label   | 当前值        | --     |
-| v-model | 选中值        | --     |
-
-:::
-
-::: title 单选框事件
-:::
-
-::: table
-
-| 事件   | 描述     | 参数             |
-| ------ | -------- | ---------------- |
-| change | 切换事件 | current : 当前值 |
-
-:::
diff --git a/example/docs/zh-CN/components/rate.md b/example/docs/zh-CN/components/rate.md
deleted file mode 100644
index 96f2424..0000000
--- a/example/docs/zh-CN/components/rate.md
+++ /dev/null
@@ -1,148 +0,0 @@
-::: title 基础使用
-:::
-
-::: demo
-
-<template>
-  <lay-rate v-model="all1"></lay-rate>
-</template>
-
-<script>
-import { ref } from 'vue';
-
-export default {
-  setup() {
-
-     const all1 = ref(0)
-
-    return {
-      all1
-    }
-  }
-}
-</script>
-
-:::
-
-::: title 响应结果
-:::
-
-::: demo
-
-<template>
-  <lay-rate v-model="all"></lay-rate> {{all}}
-</template>
-
-<script>
-import { ref } from 'vue'
-
-export default {
-  setup() {
-
-    const all = ref(4)
-
-    return {
-      all
-    }
-  }
-}
-</script>
-
-:::
-
-::: title 指定长度
-:::
-
-::: demo
-
-<template>
-  <lay-rate v-model="all2" :length="length"></lay-rate>
-</template>
-
-<script>
-import { ref } from 'vue';
-
-export default {
-  setup() {
-
-    const all2 = ref(4);
-    const length = ref(10)
-
-    return {
-      all2,
-      length
-    }
-  }
-}
-</script>
-
-:::
-
-::: title 只读模式
-:::
-
-::: demo
-
-<template>
-  <lay-rate v-model="all3" readonly="true"></lay-rate>
-</template>
-
-<script>
-import { ref } from 'vue';
-
-export default {
-  setup() {
-
-    const all3 = ref(4)
-
-    return {
-      all3
-    }
-  }
-}
-</script>
-
-:::
-
-::: title 定义主题
-:::
-
-::: demo
-
-<template>
-  <lay-rate v-model="all4" theme="#FF8000"></lay-rate><br>
-  <lay-rate v-model="all4" theme="#009688"></lay-rate><br>
-  <lay-rate v-model="all4" theme="#1E9FFF"></lay-rate><br>
-  <lay-rate v-model="all4" theme="#2F4056"></lay-rate><br>
-  <lay-rate v-model="all4" theme="#FE0000"></lay-rate><br>
-</template>
-
-<script>
-import { ref } from 'vue';
-
-export default {
-  setup() {
-
-    const all4 = ref(4)
-
-    return {
-      all4
-    }
-  }
-}
-</script>
-
-:::
-
-::: title 评分属性
-:::
-
-::: table
-
-| 属性     | 描述     | 默认值 |
-| -------- | -------- | ------ |
-| v-model  | 评分值   | --     |
-| length   | 评分长度 | --     |
-| readonly | 只读模式 | --     |
-
-:::
diff --git a/example/docs/zh-CN/components/select.md b/example/docs/zh-CN/components/select.md
deleted file mode 100644
index 8765bf9..0000000
--- a/example/docs/zh-CN/components/select.md
+++ /dev/null
@@ -1,102 +0,0 @@
-::: title 基础使用
-:::
-
-::: demo
-
-<template>
-  <lay-select>
-    <lay-select-option value="1" label="学习"></lay-select-option>
-    <lay-select-option value="2" label="编码"></lay-select-option>
-    <lay-select-option value="3" label="运动"></lay-select-option>
-  </lay-select>
-</template>
-
-<script>
-import { ref } from 'vue'
-
-export default {
-  setup() {
-
-    return {
-    }
-  }
-}
-</script>
-
-:::
-
-::: title 选择禁用
-:::
-
-::: demo
-
-<template>
-  <lay-select v-model="selected">
-    <lay-select-option value="1" label="学习"></lay-select-option>
-    <lay-select-option value="2" label="编码" disabled="true"></lay-select-option>
-    <lay-select-option value="3" label="运动"></lay-select-option>
-  </lay-select>
-</template>
-
-<script>
-import { ref } from 'vue'
-
-export default {
-  setup() {
-
-    const selected = ref('1')
-
-    return {
-      selected
-    }
-  }
-}
-</script>
-
-:::
-
-::: title select 属性
-:::
-
-::: table
-
-| Name    | Description    | Accepted Values |
-| ------- | -------------- | --------------- |
-| name    | 原生 name 属性 | --              |
-| v-model | 选中值         | --              |
-
-:::
-
-::: title select-option 属性
-:::
-
-::: table
-
-| Name  | Description | Accepted Values |
-| ----- | ----------- | --------------- |
-| label | 标签        | --              |
-| value | 值          | --              |
-
-:::
-
-::: title select-option 插槽
-:::
-
-::: table
-
-| Name    | Description | Accepted Values |
-| ------- | ----------- | --------------- |
-| default | 默认        | --              |
-
-:::
-
-::: title select 事件
-:::
-
-::: table
-
-| Name   | Description | Accepted Values |
-| ------ | ----------- | --------------- |
-| change | 切换事件    | value           |
-
-:::
diff --git a/example/docs/zh-CN/components/slider.md b/example/docs/zh-CN/components/slider.md
deleted file mode 100644
index 8f3e6c7..0000000
--- a/example/docs/zh-CN/components/slider.md
+++ /dev/null
@@ -1,42 +0,0 @@
-::: demo
-
-<template>
-  <lay-slider></lay-slider>
-</template>
-
-<script>
-import { ref } from 'vue'
-
-export default {
-  setup() {
-
-    return {
-    }
-  }
-}
-</script>
-
-:::
-
-::: demo
-
-<template>
-  <lay-slider :vertical="vertical"></lay-slider>
-</template>
-
-<script>
-import { ref } from 'vue'
-
-export default {
-  setup() {
-
-    const vertical = ref(true)
-
-    return {
-        vertical
-    }
-  }
-}
-</script>
-
-:::
\ No newline at end of file
diff --git a/example/docs/zh-CN/components/switch.md b/example/docs/zh-CN/components/switch.md
deleted file mode 100644
index 3ee8a87..0000000
--- a/example/docs/zh-CN/components/switch.md
+++ /dev/null
@@ -1,135 +0,0 @@
-::: title 基础使用
-:::
-
-::: demo
-
-<template>
-  <lay-switch v-model="active1"></lay-switch>
-</template>
-
-<script>
-import { ref } from 'vue'
-
-export default {
-  setup() {
-
-    const active1 = ref(false);
-
-    return {
-        active1
-    }
-  }
-}
-</script>
-
-:::
-
-::: title 事件回调
-:::
-
-::: demo
-
-<template>
-  <lay-switch v-model="active2" @change="change"></lay-switch>
-</template>
-
-<script>
-import { ref } from 'vue'
-
-export default {
-  setup() {
-
-    const active2 = ref(true);
-
-    const change = function( val ) {
-        console.log("当前值:" + val)
-    }
-
-    return {
-        active2,
-        change
-    }
-  }
-}
-</script>
-
-:::
-
-::: title 禁用状态
-:::
-
-::: demo
-
-<template>
-  <lay-switch v-model="active3" :disabled="disabled"></lay-switch>
-</template>
-
-<script>
-import { ref } from 'vue'
-
-export default {
-  setup() {
-
-    const active3 = ref(true);
-    const disabled = ref(true)
-
-    return {
-        active3
-    }
-  }
-}
-</script>
-
-:::
-
-::: title 修改描述
-:::
-
-::: demo
-
-<template>
-  <lay-switch v-model="active4" active-text="白天"  inactive-text="夜间"></lay-switch>
-</template>
-
-<script>
-import { ref } from 'vue'
-
-export default {
-  setup() {
-
-    const active4 = ref(true)
-
-    return {
-        active4
-    }
-  }
-}
-</script>
-
-:::
-
-::: title 开关属性
-:::
-
-::: table
-
-| 属性          | 描述           | 可选值         |
-| ------------- | -------------- | -------------- |
-| name          | 原生 name 属性 | --             |
-| v-model       | 是否启用       | `true` `false` |
-| disabled      | 禁用           | `true` `false` |
-| active-text   | 启用描述       | `启动`         |
-| inactive-text | 禁用描述       | `禁用`         |
-
-:::
-
-::: title 开关事件
-:::
-
-::: table
-
-| 属性   | 描述     | 可选值           |
-| ------ | -------- | ---------------- |
-| change | 切换事件 | current : 当前值 |
-
-:::
diff --git a/example/docs/zh-CN/components/tab.md b/example/docs/zh-CN/components/tab.md
deleted file mode 100644
index b2fcc2e..0000000
--- a/example/docs/zh-CN/components/tab.md
+++ /dev/null
@@ -1,192 +0,0 @@
-::: title 基础使用
-:::
-
-::: demo
-
-<template>
-  <lay-tab v-model="current1">
-    <lay-tab-item title="选项一" id="1"><div style="padding:20px">选项一</div></lay-tab-item>
-    <lay-tab-item title="选项二" id="2"><div style="padding:20px">选项二</div></lay-tab-item>
-  </lay-tab>
-</template>
-
-<script>
-import { ref } from 'vue'
-
-export default {
-  setup() {
-
-    const current1 = ref("1")
-
-    return {
-      current1
-    }
-  }
-}
-</script>
-
-:::
-
-::: title 简约模式
-:::
-
-::: demo
-
-<template>
-  <lay-tab type="brief" v-model="current2">
-    <lay-tab-item title="选项一" id="1"><div style="padding:20px">选项一</div></lay-tab-item>
-    <lay-tab-item title="选项二" id="2"><div style="padding:20px">选项二</div></lay-tab-item>
-  </lay-tab>
-</template>
-
-<script>
-import { ref } from 'vue'
-
-export default {
-  setup() {
-
-    const current2 = ref("1")
-
-    return {
-      current2
-    }
-  }
-}
-</script>
-
-:::
-
-::: title 卡片模式
-:::
-
-::: demo
-
-<template>
-  <lay-tab type="card" v-model="current3">
-    <lay-tab-item title="选项一" id="1"><div style="padding:20px">选项一</div></lay-tab-item>
-    <lay-tab-item title="选项二" id="2"><div style="padding:20px">选项二</div></lay-tab-item>
-  </lay-tab>
-</template>
-
-<script>
-import { ref } from 'vue'
-
-export default {
-  setup() {
-
-    const current3 = ref("1")
-
-    return {
-      current3
-    }
-  }
-}
-</script>
-
-:::
-
-::: title 允许关闭
-:::
-
-::: demo
-
-<template>
-  <lay-tab type="card" v-model="current4" :allow-close="allowClose" @change="change" @close="close">
-    <lay-tab-item title="选项一" id="1"><div style="padding:20px">选项一</div></lay-tab-item>
-    <lay-tab-item title="选项二" id="2"><div style="padding:20px">选项二</div></lay-tab-item>
-  </lay-tab>
-</template>
-
-<script>
-import { ref } from 'vue'
-
-export default {
-  setup() {
-
-    const current4 = ref("1")
-    const allowClose = ref(true)
-
-    const change = function(id){
-      console.log("当前值:" +id)
-    }
-
-    const close = function(id){
-      console.log("需要关闭:" + id)
-    }
-
-    return {
-      current4,
-      allowClose,
-      change,
-      close
-    }
-  }
-}
-</script>
-
-:::
-
-::: title 嵌套循环
-:::
-
-::: demo
-
-<template>
-  <lay-tab type="card" v-model="current5" @change="change5">
-    <lay-tab-item v-for="a in arr" :key="a" :title="a.title" :id="a.id">
-    </lay-tab-item>
-  </lay-tab>
-</template>
-
-<script>
-import { ref } from 'vue'
-
-export default {
-  setup() {
-
-    const current5 = ref('1')
-    const change5 = function(id){
-      alert(id)
-    }
-
-    const arr = ref([
-      {id:'1', title:'选项一'},
-      {id:'2', title:'选项二'}
-    ])
-
-    arr.value.push({id:'3', title:'选项三'})
-
-    return {
-      current5,
-      arr
-    }
-  }
-}
-</script>
-
-:::
-
-::: title 选项卡属性
-:::
-
-::: table
-
-| 属性        | 描述     | 可选值         |
-| ----------- | -------- | -------------- |
-| v-model     | 当前激活 | --             |
-| type        | 主题样式 | --             |
-| allow-close | 允许关闭 | `true` `false` |
-
-:::
-
-::: title 选项卡事件
-:::
-
-::: table
-
-| 事件   | 描述     | 参数 |
-| ------ | -------- | ---- |
-| change | 选中切换 | --   |
-| close  | 关闭事件 | --   |
-
-:::
diff --git a/example/docs/zh-CN/components/table.md b/example/docs/zh-CN/components/table.md
deleted file mode 100644
index cbb312e..0000000
--- a/example/docs/zh-CN/components/table.md
+++ /dev/null
@@ -1,311 +0,0 @@
-::: title 基础使用
-:::
-
-::: demo
-
-<template>
-  <lay-table :columns="columns" :dataSource="dataSource">
-    <template v-slot:username="{ data }"> {{data.username}} </template>
-    <template v-slot:password="{ data }"> {{data.password}} </template>
-    <template v-slot:operator="{ data }">
-      <lay-button >修改</lay-button>
-      <lay-button type="primary">删除</lay-button>
-    </template>
-  </lay-table>
-</template>
-
-<script>
-import { ref } from 'vue'
-
-export default {
-  setup() {
-
-    const columns = [
-      {
-        title:"账户",
-        width:"200px",
-        slot:"username",
-        key:"username"
-      },{
-        title:"密码",
-        width: "180px",
-        slot:"password",
-        key:"password"
-      },{
-        title:"年龄",
-        width: "180px",
-        key:"age"
-      },{
-        title:"操作",
-        width: "180px",
-        customSlot:"operator",
-        key:"operator"
-      }
-    ]
-
-    const dataSource = [
-      {username:"root", password:"root", age:"18"},
-      {username:"woow", password:"woow", age:"20"}
-    ]
-
-    return {
-      columns,
-      dataSource
-    }
-  }
-}
-</script>
-
-:::
-
-::: title 不同尺寸
-:::
-
-::: demo
-
-<template>
-  <lay-table :columns="columns" :dataSource="dataSource" size="lg">
-    <template v-slot:username="{ data }"> {{data.username}} </template>
-    <template v-slot:password="{ data }"> {{data.password}} </template>
-    <template v-slot:operator="{ data }">
-      <lay-button >修改</lay-button>
-      <lay-button type="primary">删除</lay-button>
-    </template>
-  </lay-table>
-</template>
-
-<script>
-import { ref } from 'vue'
-
-export default {
-  setup() {
-
-    const columns = [
-      {
-        title:"账户",
-        width:"200px",
-        slot:"username",
-        key:"username"
-      },{
-        title:"密码",
-        width: "180px",
-        slot:"password",
-        key:"password"
-      },{
-        title:"年龄",
-        width: "180px",
-        key:"age"
-      },{
-        title:"操作",
-        width: "180px",
-        customSlot:"operator",
-        key:"operator"
-      }
-    ]
-
-    const dataSource = [
-      {username:"root", password:"root", age:"18"},
-      {username:"woow", password:"woow", age:"20"}
-    ]
-
-    return {
-      columns,
-      dataSource
-    }
-  }
-}
-</script>
-
-:::
-
-::: title 开启分页
-:::
-
-::: demo
-
-<template>
-  <lay-table :columns="columns" :dataSource="dataSource" :page="page" @change="change">
-    <template v-slot:username="{ data }"> {{data.username}} </template>
-    <template v-slot:password="{ data }"> {{data.password}} </template>
-    <template v-slot:operator="{ data }">
-      <lay-button >修改</lay-button>
-      <lay-button type="primary">删除</lay-button>
-    </template>
-  </lay-table>
-</template>
-
-<script>
-import { ref } from 'vue'
-
-export default {
-  setup() {
-    
-    const page = {
-      total: 100,
-      limit: 10
-    }
-
-    const change = function({ current }){
-      console.log("当前页:" + JSON.stringify(current))
-    }
-
-    const columns = [
-      {
-        title:"账户",
-        width:"200px",
-        slot:"username",
-        key:"username"
-      },{
-        title:"密码",
-        width: "180px",
-        slot:"password",
-        key:"password"
-      },{
-        title:"年龄",
-        width: "180px",
-        key:"age"
-      },{
-        title:"操作",
-        width: "180px",
-        customSlot:"operator",
-        key:"operator"
-      }
-    ]
-
-    const dataSource = [
-      {username:"root", password:"root", age:"18"},
-      {username:"woow", password:"woow", age:"20"}
-    ]
-
-    return {
-      page,
-      change,
-      columns,
-      dataSource
-    }
-  }
-}
-</script>
-
-:::
-
-::: title 完整表格
-:::
-
-::: demo
-
-<template>
-  <lay-table :columns="columns" id="id" :dataSource="dataSource" v-model:selectedKeys="selectedKeys"  :checkbox="checkbox" :default-toolbar="defaultToolbar" @row="rowClick">
-    <template v-slot:toolbar>
-      <lay-button size="sm">新增</lay-button>
-      <lay-button size="sm">删除</lay-button>
-    </template>
-    <template v-slot:username="{ data }"> {{data.username}} </template>
-    <template v-slot:password="{ data }"> {{data.password}} </template>
-    <template v-slot:operator="{ data }">
-      <lay-button >修改</lay-button>
-      <lay-button type="primary">删除</lay-button>
-    </template>
-  </lay-table>
-</template>
-
-<script>
-import { ref } from 'vue'
-
-export default {
-  setup() {
-
-    const selectedKeys = ref(['1'])
-    const checkbox = ref(true)
-    const defaultToolbar = ref(true)
-
-    const columns = [
-      {
-        title:"账户",
-        width:"200px",
-        slot:"username",
-        key:"username"
-      },{
-        title:"密码",
-        width: "180px",
-        slot:"password",
-        key:"password"
-      },{
-        title:"年龄",
-        width: "180px",
-        key:"age"
-      },{
-        title:"操作",
-        width: "180px",
-        customSlot:"operator",
-        key:"operator"
-      }
-    ]
-
-    const dataSource = [
-      {id:"1", username:"root", password:"root", age:"18"},
-      {id:"2", username:"woow", password:"woow", age:"20"}
-    ]
-
-    const rowClick = function(data) {
-      alert(JSON.stringify(data))
-    }
-    
-    const rowDoubleClick = function(data) {
-      alert(JSON.stringify(data))
-    }
-
-    return {
-      columns,
-      dataSource,
-      selectedKeys,
-      checkbox,
-      defaultToolbar,
-      rowClick,
-      rowDoubleClick
-    }
-  }
-}
-</script>
-
-:::
-
-::: title 表格属性
-:::
-
-::: table
-
-| 属性                     | 描述       | 可选值         |
-| ------------------------ | ---------- | -------------- |
-| columns                  | 列配置     | --             |
-| dataSource               | 数据源     | --             |
-| checkbox                 | 开启复现框 | --             |
-| id                       | 主键       | --             |
-| selectedKeys ( v-model ) | 选中项     | --             |
-| default-toolbar          | 开启工具栏 | `lg` `md` `sm` |
-| size                     | 尺寸       | --             |
-
-:::
-
-::: title 表格事件
-:::
-
-::: table
-
-| 属性       | 描述   | 参数          |
-| ---------- | ------ | ------------- |
-| row        | 行单击 | data : 当前行 |
-| row-double | 行双击 | data : 当前行 |
-
-:::
-
-::: title 表格插槽
-:::
-
-::: table
-
-| 插槽    | 描述         | 默认 |
-| ------- | ------------ | ---- |
-| toolbar | 自定义工具栏 | --   |
-
-:::
diff --git a/example/docs/zh-CN/components/textarea.md b/example/docs/zh-CN/components/textarea.md
deleted file mode 100644
index cc3c8a3..0000000
--- a/example/docs/zh-CN/components/textarea.md
+++ /dev/null
@@ -1,110 +0,0 @@
-::: title 基础使用
-:::
-
-::: demo
-
-<template>
-  <lay-textarea placeholder="请输入描述" v-model="data1"></lay-textarea>
-</template>
-
-<script>
-import { ref } from 'vue'
-
-export default {
-  setup() {
-
-    const data1 = ref("");
-
-    return {
-      data1
-    }
-  }
-}
-</script>
-
-:::
-
-::: title 事件回调
-:::
-
-::: demo
-
-<template>
-  <lay-textarea placeholder="Input 事件" v-model="data2" @input="input"></lay-textarea>
-</template>
-
-<script>
-import { ref } from 'vue'
-
-export default {
-  setup() {
-
-    const data2 = ref("");
-
-    const input = function( val ) {
-        console.log(val)
-    }
-
-    return {
-      data2,
-      input
-    }
-  }
-}
-</script>
-
-:::
-
-::: title 禁止输入
-:::
-
-::: demo
-
-<template>
-  <lay-textarea placeholder="禁止输入" v-model="data3" :disabled="disabled"></lay-textarea>
-</template>
-
-<script>
-import { ref } from 'vue'
-
-export default {
-  setup() {
-
-    const data3 = ref("");
-    const disabled = ref(true)
-    return {
-      data3,
-      disabled
-    }
-  }
-}
-</script>
-
-:::
-
-::: title 文本域属性
-:::
-
-::: table
-
-| 属性        | 描述          | 可选值         |
-| ----------- | ------------- | -------------- |
-| name        | 原始属性 name | --             |
-| placeholder | 提示信息      | --             |
-| disabled    | 禁用          | `true` `false` |
-| v-model     | 值            | --             |
-
-:::
-
-::: title 文本域事件
-:::
-
-::: table
-
-| 事件  | 描述            | 可选值           |
-| ----- | --------------- | ---------------- |
-| input | 原生 input 事件 | event : 事件对象 |
-| foucs | 原生 foucs 事件 | event : 事件对象 |
-| blur  | 原生 blur 事件  | --               |
-
-:::
diff --git a/example/docs/zh-CN/components/timeline.md b/example/docs/zh-CN/components/timeline.md
deleted file mode 100644
index 43b5036..0000000
--- a/example/docs/zh-CN/components/timeline.md
+++ /dev/null
@@ -1,85 +0,0 @@
-::: title 基础使用
-:::
-
-::: demo
-
-<template>
-    <lay-timeline>
-        <lay-timeline-item title="8月18日">
-            <p>
-                layui 2.0 的一切准备工作似乎都已到位。发布之弦，一触即发。
-                <br>不枉近百个日日夜夜与之为伴。因小而大，因弱而强。
-                <br>无论它能走多远，抑或如何支撑？至少我曾倾注全心，无怨无悔 <i class="layui-icon"></i>
-            </p>
-        </lay-timeline-item>
-        <lay-timeline-item title="8月16日">
-            <p>杜甫的思想核心是儒家的仁政思想，他有<em>“致君尧舜上，再使风俗淳”</em>的宏伟抱负。</p>
-            <ul>
-                <li>《登高》</li>
-                <li>《茅屋为秋风所破歌》</li>
-            </ul>
-        </lay-timeline-item>
-        <lay-timeline-item title="8月15日">
-            <p>
-                中国人民抗日战争胜利日
-                <br>铭记、感恩
-                <br>所有为中华民族浴血奋战的英雄将士
-                <br>永垂不朽
-            </p>
-        </lay-timeline-item>
-    </lay-timeline>
-</template>
-
-<script>
-import { ref } from 'vue'
-
-export default {
-  setup() {
-
-    return {
-    }
-  }
-}
-</script>
-
-:::
-
-::: title 简单模式
-:::
-
-::: demo
-
-<template>
-    <lay-timeline>
-        <lay-timeline-item title="2021年，layui vue 里程碑版本 1.0 发布" simple></lay-timeline-item>
-        <lay-timeline-item title="2017年，layui 里程碑版本 2.0 发布" simple></lay-timeline-item>
-        <lay-timeline-item title="2016年，layui 首个版本发布" simple></lay-timeline-item>
-        <lay-timeline-item title="2015年，layui 孵化" simple></lay-timeline-item>
-    </lay-timeline>
-</template>
-
-<script>
-import { ref } from 'vue'
-
-export default {
-  setup() {
-
-    return {
-    }
-  }
-}
-</script>
-
-:::
-
-::: title timeline-item attributes
-:::
-
-::: table
-
-|        |          |     |
-| ------ | -------- | --- |
-| simple | 简单模式 | --  |
-| title  | 标题     | --  |
-
-:::
diff --git a/example/docs/zh-CN/components/transfer.md b/example/docs/zh-CN/components/transfer.md
deleted file mode 100644
index ba2f79a..0000000
--- a/example/docs/zh-CN/components/transfer.md
+++ /dev/null
@@ -1,108 +0,0 @@
-::: title 基础使用
-:::
-
-::: demo
-
-<template>
-  <lay-transfer :dataSource="dataSource1"></lay-transfer>
-</template>
-
-<script>
-import { ref } from 'vue'
-
-export default {
-  setup() {
-
-    const dataSource1 = [{id:'1', title:'易大师'},{id:'2', title:'战争之王'}]
-
-    return {
-      dataSource1
-    }
-  }
-}
-</script>
-
-:::
-
-::: title 指定标题
-:::
-
-::: demo
-
-<template>
-  <lay-transfer :dataSource="dataSource2" :title="title"></lay-transfer>
-</template>
-
-<script>
-import { ref } from 'vue'
-
-export default {
-  setup() {
-
-    const dataSource2 = [{id:'1', title:'易大师'},{id:'2', title:'战争之王'}]
-    const title = ['我喜欢的','我不喜欢的']
-
-
-    return {
-      dataSource2,
-      title
-    }
-  }
-}
-</script>
-
-:::
-
-::: title 使用插槽
-:::
-
-::: demo
-
-<template>
-  <lay-transfer :dataSource="dataSource1">
-    <template v-slot:item="{ data }">
-      {{data.id}}
-    </template>
-  </lay-transfer>
-</template>
-
-<script>
-import { ref } from 'vue'
-
-export default {
-  setup() {
-
-    const dataSource1 = [{id:'1', title:'易大师'},{id:'2', title:'战争之王'}]
-
-    return {
-      dataSource1
-    }
-  }
-}
-</script>
-
-:::
-
-::: title transfer 属性
-:::
-
-::: table
-
-| Name       | Description | Accepted Values |
-| ---------- | ----------- | --------------- |
-| dataSource | 数据来源    | --              |
-| title      | 标题        | --              |
-| id         | 主键        | --              |
-
-:::
-
-::: title transfer 插槽
-:::
-
-::: table
-
-| Name | Description | Accepted Values |
-| ---- | ----------- | --------------- |
-| item | 列表项      | { data }        |
-
-:::
diff --git a/example/docs/zh-CN/components/tree.md b/example/docs/zh-CN/components/tree.md
deleted file mode 100644
index acdd05e..0000000
--- a/example/docs/zh-CN/components/tree.md
+++ /dev/null
@@ -1,255 +0,0 @@
-::: demo
-
-<template>
-  <lay-tree
-    :data="data"
-    :onlyIconControl="iconCtrl"
-    :showLine="showLine"
-    :showCheckbox="showCheckbox"
-    v-model:checkedKeys="checkedKeys"
-    @node-click="handleClick"
-    :disabled="disabled"
-  >
-  </lay-tree>
-  <br/>
-  是否可开启选择框：
-  <br/>
-  <lay-switch v-model="showCheckbox"></lay-switch>
-  <br/>
-  checkedKeys：
-  <pre>
-    {{ checkedKeys }}
-  </pre>
-  只能通过节点左侧图标来展开收缩：
-  <br/>
-  <lay-switch v-model="iconCtrl"></lay-switch>
-  <br/>
-  是否开启连接线：
-  <br/>
-  <lay-switch v-model="showLine"></lay-switch>
-  <br/>
-  当前点击的节点：
-  <br/>
-  <pre>
-    {{ clickNode }}
-  </pre>
-  <br/>
-</template>
-
-<script setup>
-import { ref } from 'vue';
-
-const data = ref([{
-	title: '一级1',
-	id: 1,
-	field: 'name1',
-	checked: true,
-	spread: true,
-	children: [{
-		title: '二级1-1 可允许跳转',
-		id: 3,
-		field: 'name11',
-		href: 'https://www.layui.com/',
-		children: [{
-			title: '三级1-1-3',
-			id: 23,
-			field: '',
-			children: [{
-				title: '四级1-1-3-1',
-				id: 24,
-				field: '',
-				children: [{
-					title: '五级1-1-3-1-1',
-					id: 30,
-					field: ''
-				},
-				{
-					title: '五级1-1-3-1-2',
-					id: 31,
-					field: ''
-				}]
-			}]
-		},
-		{
-			title: '三级1-1-1',
-			id: 7,
-			field: '',
-			children: [{
-				title: '四级1-1-1-1 可允许跳转',
-				id: 15,
-				field: '',
-				href: 'https://www.layui.com/doc/'
-			}]
-		},
-		{
-			title: '三级1-1-2',
-			id: 8,
-			field: '',
-			children: [{
-				title: '四级1-1-2-1',
-				id: 32,
-				field: ''
-			}]
-		}]
-	},
-	{
-		title: '二级1-2',
-		id: 4,
-		spread: true,
-		children: [{
-			title: '三级1-2-1',
-			id: 9,
-			field: '',
-			disabled: true
-		},
-		{
-			title: '三级1-2-2',
-			id: 10,
-			field: ''
-		}]
-	},
-	{
-		title: '二级1-3',
-		id: 20,
-		field: '',
-		children: [{
-			title: '三级1-3-1',
-			id: 21,
-			field: ''
-		},
-		{
-			title: '三级1-3-2',
-			id: 22,
-			field: ''
-		}]
-	}]
-},
-{
-	title: '一级2',
-	id: 2,
-	field: '',
-	spread: true,
-	children: [{
-		title: '二级2-1',
-		id: 5,
-		field: '',
-		spread: true,
-		children: [{
-			title: '三级2-1-1',
-			id: 11,
-			field: ''
-		},
-		{
-			title: '三级2-1-2',
-			id: 12,
-			field: ''
-		}]
-	},
-	{
-		title: '二级2-2',
-		id: 6,
-		field: '',
-		children: [{
-			title: '三级2-2-1',
-			id: 13,
-			field: ''
-		},
-		{
-			title: '三级2-2-2',
-			id: 14,
-			field: '',
-			disabled: true
-		}]
-	}]
-},
-{
-	title: '一级3',
-	id: 16,
-	field: '',
-	children: [{
-		title: '二级3-1',
-		id: 17,
-		field: '',
-		fixed: true,
-		children: [{
-			title: '三级3-1-1',
-			id: 18,
-			field: ''
-		},
-		{
-			title: '三级3-1-2',
-			id: 19,
-			field: ''
-		}]
-	},
-	{
-		title: '二级3-2',
-		id: 27,
-		field: '',
-		children: [{
-			title: '三级3-2-1',
-			id: 28,
-			field: ''
-		},
-		{
-			title: '三级3-2-2',
-			id: 29,
-			field: ''
-		}]
-	}]
-}]);
-
-const iconCtrl = ref(false);
-const showLine = ref(true);
-const clickNode = ref(null);
-const showCheckbox = ref(true);
-const checkedKeys = ref([1]);
-const disabled = ref(false);
-
-function handleClick(node) {
- clickNode.value = node
-}
-</script>
-
-:::
-
-::: title tree attributes
-:::
-
-::: table
-
-| Name                             | Description                              | Accepted Values |
-| -------------------------------- | ---------------------------------------- | --------------- |
-| data                             | 树型组件数据,类型 TreeData \| TreeData[] | null            |
-| showCheckbox                     | 是否显示复选框                           | false           |
-| onlyIconControl                  | 是否仅允许节点左侧图标控制展开收缩       | false           |
-| showLine                         | 是否开启连接线                           | true            |
-| checkedKeys(v-model:checkedKeys) | 开启 showCheckbox 后, 选中的节点         | []              |
-
-:::
-
-::: title TreeData
-:::
-
-::: table
-
-| Name     | Description    | Accepted Values |
-| -------- | -------------- | --------------- |
-| id       | 唯一值         | -               |
-| title    | 节点名称       | -               |
-| children | 子节点         | []              |
-| disabled | 该节点是否禁用 | false           |
-| spread   | 该节点是否展开 | false           |
-
-:::
-
-::: title tree events
-:::
-
-::: table
-
-| Name       | Description     | Accepted Params |
-| ---------- | --------------- | --------------- |
-| node-click | 节点 click 事件 | --              |
-
-:::
diff --git a/example/docs/zh-CN/guide/changelog.md b/example/docs/zh-CN/guide/changelog.md
deleted file mode 100644
index a3e350d..0000000
--- a/example/docs/zh-CN/guide/changelog.md
+++ /dev/null
@@ -1,164 +0,0 @@
-::: title 更新记录
-:::
-
-<lay-timeline style="padding-left:30px;padding-top:30px;">
-  <lay-timeline-item title="尾版本号：日常 bugfix 更新" simple></lay-timeline-item>
-  <lay-timeline-item title="次版本号：带有新特性的向下兼容的版本。" simple></lay-timeline-item>
-  <lay-timeline-item title="主版本号：含有破坏性更新和新特性，不在发布周期内。" simple></lay-timeline-item>
-</lay-timeline>
-
-::: demo
-<template>
-<lay-timeline>
-<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>
-</template>
-
-<script>
-import { ref } from 'vue'
-
-export default {
-  setup() {
-
-    return {
-    }
-  }
-}
-</script>
-
-:::
diff --git a/example/docs/zh-CN/guide/contribution.md b/example/docs/zh-CN/guide/contribution.md
deleted file mode 100644
index 54b084c..0000000
--- a/example/docs/zh-CN/guide/contribution.md
+++ /dev/null
@@ -1,2 +0,0 @@
-::: title 贡献代码
-:::
diff --git a/example/docs/zh-CN/guide/getStarted.md b/example/docs/zh-CN/guide/getStarted.md
deleted file mode 100644
index 793df67..0000000
--- a/example/docs/zh-CN/guide/getStarted.md
+++ /dev/null
@@ -1,54 +0,0 @@
-::: title 快速上手
-:::
-
-<br>
-
-::: describe 这里是 Layui 的 Vue 实现，开发和服务于企业级后台产品。
-:::
-
-<img src="https://portrait.gitee.com/uploads/avatars/namespace/2849/8547475_layui-vue_1633242524.png" style="margin-left:24px;border-radius: 10px;" width="140px" />
-
-<br>
-<br>
-<br>
-
-::: describe 1.使用 npm 下载
-:::
-
-```
-npm install @layui/layui-vue --save
-```
-
-<br>
-
-::: describe 2.在 main.ts 中依赖
-:::
-
-```js
-import App from './App.vue'
-import { createApp } from 'vue'
-import Layui from '@layui/layui-vue'
-import '@layui/layui-vue/lib/layui.css'
-
-createApp(App).use(Layui).mount('#app')
-```
-
-<br>
-
-::: describe 3.在 index.vue 使用
-:::
-
-```html
-<lay-layout>
-  <lay-header>
-    <lay-logo>Layui Admin</lay-logo>
-  </lay-header>
-  <lay-side></lay-side>
-  <lay-body>
-    <router-view></router-view>
-  </lay-body>
-  <lay-footer>pearadmin.com</lay-footer>
-</lay-layout>
-```
-
-- 前往: [layui-vue-sample](https://gitee.com/layui-vue/layui-vue-sample)
diff --git a/example/docs/zh-CN/guide/introduce.md b/example/docs/zh-CN/guide/introduce.md
deleted file mode 100644
index 8e57741..0000000
--- a/example/docs/zh-CN/guide/introduce.md
+++ /dev/null
@@ -1,19 +0,0 @@
-::: title 基本介绍
-:::
-
-<img src="http://layui-doc.pearadmin.com/static/images/layui/logo-2.png" />
-
-<br>
-
-::: block
-
-layui - vue（谐音：类 UI) 是 一 套 Vue 3.0 的 桌 面 端 组 件 库 , Layui 的 另 一 种 呈 现 方 式
-
-:::
-
-<lay-timeline>
-  <lay-timeline-item title="2021年，layui vue 里程碑版本 0.2.0 发布" simple></lay-timeline-item>
-  <lay-timeline-item title="2017年，layui 里程碑版本 2.0 发布" simple></lay-timeline-item>
-  <lay-timeline-item title="2016年，layui 首个版本发布" simple></lay-timeline-item>
-  <lay-timeline-item title="2015年，layui 孵化" simple></lay-timeline-item>
-</lay-timeline>
diff --git a/example/docs/zh-CN/guide/norms.md b/example/docs/zh-CN/guide/norms.md
deleted file mode 100644
index 2531f05..0000000
--- a/example/docs/zh-CN/guide/norms.md
+++ /dev/null
@@ -1,2 +0,0 @@
-::: title 开发规范
-:::
\ No newline at end of file
diff --git a/example/docs/zh-CN/guide/problem.md b/example/docs/zh-CN/guide/problem.md
deleted file mode 100644
index ddcf1b9..0000000
--- a/example/docs/zh-CN/guide/problem.md
+++ /dev/null
@@ -1,2 +0,0 @@
-::: title 常见问题
-:::
diff --git a/example/docs/zh-CN/guide/sandbox.md b/example/docs/zh-CN/guide/sandbox.md
deleted file mode 100644
index 54aaf14..0000000
--- a/example/docs/zh-CN/guide/sandbox.md
+++ /dev/null
@@ -1,23 +0,0 @@
-::: title 沙盒环境
-:::
-
-::: demo
-
-<template>
-  <lay-layer title="一任流行坎止"></lay-layer>
-  <lay-layer title="身如不系之舟" :offset="['260px','220px']"></lay-layer>
-</template>
-
-<script>
-import { ref, watch } from "vue";
-import { useRoute, useRouter } from "vue-router";
-export default {
-  setup() {
-
-    return {
-    };
-  },
-};
-</script>
-
-:::
diff --git a/example/docs/zh-CN/hooks/useClickOutside.md b/example/docs/zh-CN/hooks/useClickOutside.md
deleted file mode 100644
index ddd56b6..0000000
--- a/example/docs/zh-CN/hooks/useClickOutside.md
+++ /dev/null
@@ -1,42 +0,0 @@
-::: title 基础使用
-:::
-
-::: block 使 用 useClickOutside 监 听 元 素 外 click 事 件
-:::
-
-```vue
-<template>
-  <lay-button type="primary" ref="buttonRef">当前元素</lay-button>
-</template>
-
-<script>
-import { ref, watch } from 'vue'
-import useClickOutside from '/@src/hooks/useClickOutside'
-
-export default {
-  setup() {
-    const buttonRef = (ref < null) | (HTMLElement > null)
-    const isClickOutside = useClickOutside(buttonRef)
-
-    watch(isClickOutside, () => {
-      console.log('元素外 click 事件')
-    })
-
-    return {
-      buttonRef,
-    }
-  },
-}
-</script>
-```
-
-::: title 使用备注
-:::
-
-::: table
-
-| 备注           | 描述            | 类型 |
-| -------------- | --------------- | ---- |
-| isClickOutside | 使用 watch 监听 | Ref  |
-
-:::
diff --git a/example/docs/zh-CN/hooks/useFullScreen.md b/example/docs/zh-CN/hooks/useFullScreen.md
deleted file mode 100644
index ec0d831..0000000
--- a/example/docs/zh-CN/hooks/useFullScreen.md
+++ /dev/null
@@ -1,42 +0,0 @@
-::: title 基础使用
-:::
-
-::: block 使 用 useMove 为 元 素 提 供 拖 拽 支 持
-:::
-
-```vue
-<template>
-  <lay-button @click="fullScreen">全屏切换</lay-button>
-</template>
-
-<script>
-import useFullScreen from '/@src/hooks/useFullScreen'
-
-export default {
-  setup() {
-    const { fullScreen, isFullScreen } = useFullScreen()
-
-    watch(isFullScreen, () => {
-      console.log('全屏切换')
-    })
-
-    return {
-      fullScreen,
-      isFullScreen,
-    }
-  },
-}
-</script>
-```
-
-::: title 使用备注
-:::
-
-::: table
-
-| 事件         | 描述     | 类型     |
-| ------------ | -------- | -------- |
-| fullScreen   | 全屏切换 | Function |
-| isFullScreen | 当前状态 | Ref      |
-
-:::
diff --git a/example/docs/zh-CN/hooks/useMove.md b/example/docs/zh-CN/hooks/useMove.md
deleted file mode 100644
index c3dc7d9..0000000
--- a/example/docs/zh-CN/hooks/useMove.md
+++ /dev/null
@@ -1,37 +0,0 @@
-::: title 基础使用
-:::
-
-::: block 使 用 useFullScreen 快 速 完 成 fullScreen 操 作
-:::
-
-```vue
-<template>
-  <button id="button">拖动</button>
-</template>
-
-<script>
-import { ref, watch, onMounted } from 'vue'
-import useMove from '/@src/hooks/useMove'
-
-export default {
-  setup() {
-    onMounted(() => {
-      const el = document.getElementById('button')
-      useMove(el)
-    })
-    return {}
-  },
-}
-</script>
-```
-
-::: title 使用备注
-:::
-
-::: table
-
-| 备注 | 描述           | 类型        |
-| ---- | -------------- | ----------- |
-| el   | 需要拖拽的元素 | HtmlElement |
-
-:::
diff --git a/example/src/App.vue b/example/src/App.vue
index b3b7c07..b3d096d 100644
--- a/example/src/App.vue
+++ b/example/src/App.vue
@@ -1,13 +1,7 @@
 <script setup>
-import CompositionTest from "./components/func/CompositionAPITest.vue";
-import OptionAPITest from "./components/func/OptionAPITest.vue";
 import HelloWord from "./components/HelloWord.vue";
-import UserList from "./components/func/UserList.vue";
 </script>
 
 <template>
   <HelloWord />
-  <OptionAPITest />
-  <CompositionTest />
-  <UserList />
 </template>
\ No newline at end of file
diff --git a/example/src/components/HelloWord.vue b/example/src/components/HelloWord.vue
index 2287cdc..f3ce001 100644
--- a/example/src/components/HelloWord.vue
+++ b/example/src/components/HelloWord.vue
@@ -1,11 +1,17 @@
 <template>
   <lay-layer v-model="visible" maxmin resize>内容</lay-layer>
+  <lay-layer v-model="drawerVisible" type="drawer">
+    <button @click="onChangeInteriorDrawerVisible">内部抽屉</button>
+    <lay-layer v-model="interiorDrawerVisible" type="drawer" area="200px">内部抽屉内容</lay-layer>
+  </lay-layer>
   <button @click="onChangeVisible">组件</button>
   <button @click="openModal">函数</button>
   <button @click="close">关闭</button>
   <button @click="closeAll">关闭全部</button>
   <button @click="openMsg">普通消息</button>
-  <button type="button" @click="openIframe">iframe</button>
+  <button type="button" @click="openIframe">远程窗体</button>
+  <button type="button" @click="onChangeDrawerVisible">抽屉</button>
+  <button type="button" @click="openDrawer">函数抽屉</button>
 </template>
 
 
@@ -14,24 +20,33 @@ import { ref, h } from "vue";
 import { LayLayer, layer } from "../../../src/index";
 
 const visible = ref(false);
+const drawerVisible = ref(false);
+const interiorDrawerVisible = ref(false);
 
 const onChangeVisible = () => {
   visible.value = true;
 }
 
+const onChangeDrawerVisible = () => {
+  drawerVisible.value = true;
+}
+
+const onChangeInteriorDrawerVisible = () => {
+  interiorDrawerVisible.value = true;
+}
+
 var instance = null;
 
 const openModal = () => {
   instance = layer.open({
     content: "内容",
     area: ['500px', '500px'],
-    shade: false,
     maxmin: true
   })
 }
 
 const openMsg = () => {
-  layer.msg("普通消息", { icon: 2, time: 100000 })
+  layer.msg("普通消息", { icon: 2, time: 1000 })
 }
 
 const close = () => {
@@ -47,8 +62,17 @@ const openIframe = function () {
     title: "标题",
     maxmin: true,
     resize: true,
-    content: "https://finalsummer.gitee.io/layervue/",
+    content: "http://layui-vue.pearadmin.com",
   });
 };
+
+const openDrawer = () => {
+  layer.drawer({
+    title: "抽屉",
+    content: "抽屉内容",
+    offset: "b",
+    area: "300px",
+  })
+}
 </script>
 
diff --git a/example/src/components/func/CompositionAPITest.vue b/example/src/components/func/CompositionAPITest.vue
deleted file mode 100644
index cc3e2e9..0000000
--- a/example/src/components/func/CompositionAPITest.vue
+++ /dev/null
@@ -1,145 +0,0 @@
-<template>
-  <div>
-    <p>自定义标题-响应式</p>
-    <div>
-      <span>{{ model }}</span>
-    </div>
-    <input type="text" v-model="layerFuncTitle" placeholder="尝试更改标题标题" />
-    <button @click="openVNode">函数VNode</button>
-    <button @Click="model.username = model.username + '测试'">修改username</button>
-  </div>
-&nbsp;
-  <div>
-    <p>自定义内容区text-响应式</p>
-    <input type="text" v-model="layerFuncContentText" placeholder="尝试更改这里的内容" />
-    <button @click="openModalText">函数ModelText</button>
-  </div>
-&nbsp;
-  <div>
-    <p>自定义内容区html-响应式</p>
-    <input type="text" v-model="layerFuncContentHtml" placeholder="尝试更改这里的内容" />
-    <button @click="openModalHtml">函数ModelHtml</button>
-  </div>
-&nbsp;
-  <div>
-    <p>自定义内容区iframe-响应式: http://layui-vue.pearadmin.com/</p>
-    <input type="text" v-model="layerFuncContentIframe" placeholder="尝试更改这里的内容" />
-    <button @click="openModalIframe">函数ModelIframe</button>
-  </div>
-&nbsp;
-  <div>
-    <p>
-      自定义内容区vNode-响应式
-      <span>复制到输入框: h('button', 'VNode响应式' )</span>
-    </p>
-    <button @click="layerFuncContentvNode = h('button', 'VNode响应式替换')">点击修改</button>
-    <input type="text" v-model="layerFuncContentvNode" placeholder="尝试更改这里的内容" />
-    <button @click="openModalvNode">函数ModelvNode</button>
-  </div>
-&nbsp;
-  <div>
-    <p>响应式</p>
-    <input type="text" v-model="dataRef" width="500" placeholder="请输入" />
-    <button @click="openRef">函数input</button>
-    <button @click="dataRef++">count+</button>
-    <button @click="dataRef--">count-</button>
-  </div>
-</template>
-
-<script setup>
-import { ref, h, createVNode, resolveComponent, reactive } from "vue";
-import { useLayer } from "../../../../src/index";
-import Test from "./test.vue";
-
-// layer.init();
-const { layer } = useLayer();
-
-var instance = null;
-
-let layerFuncTitle = ref("自定义title")
-let layerFuncContentText = ref("尝试更改这里的内容")
-let layerFuncContentHtml = ref("<h1> 渲染HTML</h1>")
-let layerFuncContentIframe = ref("https://finalsummer.gitee.io/layervue/")
-let layerFuncContentvNode = ref(h("input", {
-  value: "test",
-}))
-let dataRef = ref("123")
-
-// vNode响应式更新
-const openModalvNode = () => {
-  // eval不是必须的,此处只是为了转换输入框 value
-  instance = layer.open({
-    title: "vNode",
-    content: () => eval(layerFuncContentvNode.value),
-    area: ['500px', '500px'],
-    shade: false,
-    maxmin: true
-  })
-}
-
-// HTML 响应式更新
-const openModalHtml = () => {
-  instance = layer.open({
-    title: "HTML",
-    content: () => layerFuncContentHtml.value,
-    isHtmlFragment: true,
-    area: ['500px', '500px'],
-    shade: false,
-    maxmin: true
-  })
-}
-
-// iframe 响应式更新
-const openModalIframe = () => {
-  instance = layer.open({
-    type: 2,
-    title: "iframe",
-    content: () => layerFuncContentIframe.value,
-    area: ['500px', '500px'],
-    shade: false,
-    maxmin: true
-  })
-}
-
-// 文本响应式更新
-const openModalText = () => {
-  instance = layer.open({
-    title: "Text",
-    content: () => layerFuncContentText.value,
-    area: ['500px', '500px'],
-    shade: false,
-    maxmin: true
-  })
-}
-
-// v-model
-// const LayInput = resolveComponent("LayInput");
-const openRef = () => {
-  layer.open({
-    title: "inputTest",
-    content: () => h("input", {
-      value: dataRef.value,
-      onInput: (e) => dataRef.value = e.target.value
-    }),
-    shade: false,
-  })
-}
-
-// 组件通信测试
-const model = reactive({
-  username: "admin",
-  password: "123",
-  specialty: "1"
-})
-const openVNode = () => {
-  layer.open({
-    title: () => layerFuncTitle.value,
-    content: h(Test, { model, }),
-    area: ['500px', '500px'],
-    shade: false,
-  })
-}
-
-</script>
-
-
diff --git a/example/src/components/func/OptionAPITest.vue b/example/src/components/func/OptionAPITest.vue
deleted file mode 100644
index 3a6c726..0000000
--- a/example/src/components/func/OptionAPITest.vue
+++ /dev/null
@@ -1,40 +0,0 @@
-<template>
-  <p>{{ model }}</p>
-  <button @click="openVNode">Options API</button>
-  <br />
-</template>
-<script>
-import { h } from "vue"
-import { layer, useLayer } from "../../../../src/index";
-import Test from "./Test.vue";
-
-export default {
-  components: {
-    Test
-  },
-  data() {
-    return {
-      model: {
-        username: "admin",
-        password: "123",
-        specialty: "1"
-      }
-    }
-  },
-  mounted() {
-    useLayer();
-  },
-  methods: {
-    openVNode() {
-      layer.open({
-        content: h(Test, { model: this.model }),
-        area: ['500px', '500px'],
-        shade: false,
-      })
-    }
-  }
-}
-</script>
-<style lang="">
-  
-</style>
\ No newline at end of file
diff --git a/example/src/components/func/Test.vue b/example/src/components/func/Test.vue
deleted file mode 100644
index 2e5d275..0000000
--- a/example/src/components/func/Test.vue
+++ /dev/null
@@ -1,48 +0,0 @@
-<template>
-  <lay-form :model="model">
-    <lay-form-item label="账户" prop="username">
-      <lay-input v-model="model.username"></lay-input>
-    </lay-form-item>
-    <lay-form-item label="密码" prop="password">
-      <lay-input v-model="model.password" type="password"></lay-input>
-    </lay-form-item>
-    <lay-form-item label="爱好" prop="hobby">
-      <lay-select v-model="model.hobby">
-        <lay-select-option value="1" label="学习"></lay-select-option>
-        <lay-select-option value="2" label="编码"></lay-select-option>
-        <lay-select-option value="3" label="运动"></lay-select-option>
-      </lay-select>
-    </lay-form-item>
-    <lay-form-item label="特长" prop="specialty">
-      <lay-radio v-model="model.specialty" name="specialty" label="1">写作</lay-radio>
-      <lay-radio v-model="model.specialty" name="specialty" label="2">画画</lay-radio>
-      <lay-radio v-model="model.specialty" name="specialty" label="3">编码</lay-radio>
-    </lay-form-item>
-    <lay-form-item label="描述" prop="desc">
-      <lay-textarea placeholder="请输入描述" v-model="model.desc"></lay-textarea>
-    </lay-form-item>
-    <lay-form-item>
-      <lay-button @click="submitClick">提交</lay-button>
-    </lay-form-item>
-  </lay-form>
-</template>
-<script setup>
-import { layer } from "../../../../src/index";
-
-const props = defineProps({
-  model: Object
-})
-
-const submitClick = function () {
-  layer.open({
-    type: 1,
-    title: "表单结果",
-    content: `<div style="padding: 10px">${JSON.stringify(props.model)}</div>`,
-    shade: false,
-    isHtmlFragment: true,
-    btn: [{ text: '确认', callback(index) { layer.closeAll() } }],
-    area: '500px'
-  });
-};
-
-</script>
\ No newline at end of file
diff --git a/example/src/components/func/UserForm.vue b/example/src/components/func/UserForm.vue
deleted file mode 100644
index 297a3de..0000000
--- a/example/src/components/func/UserForm.vue
+++ /dev/null
@@ -1,29 +0,0 @@
-<template>
-  <lay-form :model="userForm">
-    <lay-form-item label="id" prop="id">
-      <lay-input v-model="userForm.id"></lay-input>
-    </lay-form-item>
-    <lay-form-item label="账户" prop="username">
-      <lay-input v-model="userForm.username"></lay-input>
-    </lay-form-item>
-    <lay-form-item label="密码" prop="password">
-      <lay-input v-model="userForm.password"></lay-input>
-    </lay-form-item>
-    <lay-form-item label="年龄" prop="age">
-      <lay-input v-model="userForm.age"></lay-input>
-    </lay-form-item>
-    <div>
-      <lay-button @click="$emit('ok', props.userForm)">确认</lay-button>
-      <lay-button @click="$emit('cancel', props.userForm)">取消</lay-button>
-    </div>
-  </lay-form>
-</template>
-<script setup>
-
-const props = defineProps({
-  userForm: Object
-})
-
-const emit = defineEmits(['cancel', 'ok'])
-
-</script>
\ No newline at end of file
diff --git a/example/src/components/func/UserList.vue b/example/src/components/func/UserList.vue
deleted file mode 100644
index 87463a9..0000000
--- a/example/src/components/func/UserList.vue
+++ /dev/null
@@ -1,193 +0,0 @@
-<template lang="">
-  <!-- 表格添加,修改 -->
-  <lay-table
-    :columns="columns"
-    id="id"
-    :dataSource="dataSource"
-    v-model:selectedKeys="selectedKeys"
-    :checkbox="checkbox"
-    :default-toolbar="defaultToolbar"
-  >
-    <!-- 工具条 -->
-    <template v-slot:toolbar>
-      <lay-button size="sm" @click="handlerUserTbAdd()">新增</lay-button>
-      <lay-button size="sm" @click="handlerUserTbBatchDel()">删除</lay-button>
-    </template>
-    <template v-slot:username="{ data }">{{ data.username }}</template>
-    <template v-slot:password="{ data }">{{ data.password }}</template>
-    <template v-slot:operator="{ data }">
-      <lay-button @click="handlerUserTbEdit(data)">修改</lay-button>
-      <lay-button type="primary" @click="handlerUserTbDel(data)">删除</lay-button>
-    </template>
-  </lay-table>
-  
-  <div style="padding: 10px">userForm{{ userFormData }}</div>
-</template>
-<script setup>
-import { ref, h, createVNode, resolveComponent, reactive } from "vue";
-import { layer} from "../../../../src/index";
-import UserForm from "./UserForm.vue"
-
-// 表格和表单响应式 CRUD 
-const selectedKeys = ref([])
-const checkbox = ref(true)
-const defaultToolbar = ref(true)
-let userFormData = ref({}) //用户数据
-var instance = null;
-
-const columns = [
-  {
-    title: "id",
-    width: "200px",
-    key: "id"
-  },
-  {
-    title: "账户",
-    width: "200px",
-    customSlot: "username",
-    key: "username"
-  }, {
-    title: "密码",
-    width: "180px",
-    customSlot: "password",
-    key: "password"
-  }, {
-    title: "年龄",
-    width: "180px",
-    key: "age"
-  }, {
-    title: "操作",
-    width: "180px",
-    customSlot: "operator",
-    key: "operator"
-  }
-]
-
-const dataSource = ref([
-  { id: "1", username: "root", password: "root", age: "18" },
-  { id: "2", username: "woow", password: "woow", age: "20" },
-  { id: "4", username: "selectedKeys是id", password: "test", age: "20" }
-])
-
-//添加
-const handlerUserTbAdd = function () {
-  userFormData.value = {};
-  instance = layer.open({
-    title: "新增",
-    content: h(UserForm, {
-      userForm: userFormData.value,
-      onCancel() {
-        console.log("add --> 取消事件");
-        layer.close(instance)
-      },
-      onOk() {
-        console.log("add --> 添加事件");
-        dataSource.value.push(userFormData.value)
-        layer.close(instance);
-      }
-    }),
-    btn: [{
-      text: '确认',
-      callback() {
-        dataSource.value.push(userFormData.value)
-        layer.close(instance);
-      }
-    },
-    {
-      text: '取消',
-      callback() {
-        userFormData.value = {};
-        layer.close(instance);
-      }
-    }],
-    area: ['500px', '500px'],
-    maxmin: true,
-  })
-}
-
-// 编辑
-const handlerUserTbEdit = function (data) {
-  // 防止编辑表单时同步修改data,复杂的对象需要深拷贝
-  userFormData.value = { ...data }
-  instance = layer.open({
-    title: "编辑",
-    content: h(UserForm, {
-      userForm: userFormData.value,
-      onCancel() {
-        userFormData.value = {};
-        layer.close(instance);
-      },
-      onOk() {
-        dataSource.value.forEach((user, index) => {
-          if (user.id === userFormData.value.id) {
-            dataSource.value[index] = userFormData.value
-          }
-        })
-        layer.close(instance);
-      }
-    }),
-    btn: [{
-      text: '确认',
-      callback() {
-        dataSource.value.forEach((user, index) => {
-          if (user.id === userFormData.value.id) {
-            dataSource.value[index] = userFormData.value
-          }
-        })
-        layer.close(instance);
-      }
-    },
-    {
-      text: '取消',
-      callback() {
-        userFormData.value = {};
-        layer.close(instance);
-      }
-    }],
-    area: ['500px', '500px'],
-    maxmin: true,
-  })
-}
-
-// 删除
-const handlerUserTbDel = function (data) {
-  instance = layer.confirm("删除" + JSON.stringify(data), {
-    btn: [{
-      text: '确认',
-      callback() {
-        let index = dataSource.value.findIndex(user => user.id === data.id)
-        dataSource.value.splice(index, 1);
-        layer.close(instance);
-      }
-    }, {
-      text: '取消',
-      callback() {
-        layer.close(instance);
-      }
-    }]
-  })
-}
-
-// 批量删除
-const handlerUserTbBatchDel = function () {
-  instance = layer.confirm("批量删除" + JSON.stringify(selectedKeys.value), {
-    btn: [{
-      text: '确认',
-      callback() {
-        selectedKeys.value.forEach((userid) => {
-          dataSource.value.splice(dataSource.value.findIndex(user => user.id === userid), 1);
-        })
-        layer.close(instance);
-      }
-    }, {
-      text: '取消',
-      callback() {
-        layer.close(instance);
-      }
-    }]
-  })
-}
-</script>
-<style lang="">
-  
-</style>
\ No newline at end of file
diff --git a/example/src/main.ts b/example/src/main.ts
index a468319..7fc8a01 100644
--- a/example/src/main.ts
+++ b/example/src/main.ts
@@ -1,6 +1,4 @@
 import { createApp } from 'vue'
 import App from "./App.vue"
-import Layui from '@layui/layui-vue'
-import '@layui/layui-vue/lib/index.css'
 
-createApp(App).use(Layui).mount('#app')
\ No newline at end of file
+createApp(App).mount('#app')
\ No newline at end of file
diff --git a/package.json b/package.json
index 66fe7bd..cba0b37 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@layui/layer-vue",
-  "version": "1.2.4",
+  "version": "1.2.5",
   "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/layer-vue.es.js",
@@ -28,12 +28,8 @@
   ],
   "author": "就眠儀式",
   "license": "MIT",
-  "peerDependencies": {
-    "vue": "^3.2.26"
-  },
   "dependencies": {
-    "@layui/layui-vue": "^0.3.3",
-    "vue": "^3.2.26"
+    "vue": "^3.2.27"
   },
   "devDependencies": {
     "@babel/core": "^7.15.8",
@@ -44,8 +40,8 @@
     "@types/markdown-it-container": "^2.0.4",
     "@types/node": "^16.11.9",
     "@vitejs/plugin-vue": "^1.9.3",
-    "@vue/compiler-sfc": "^3.2.26",
-    "@vue/server-renderer": "^3.2.26",
+    "@vue/compiler-sfc": "^3.2.27",
+    "@vue/server-renderer": "^3.2.27",
     "escape-html": "^1.0.3",
     "less": "^4.1.2",
     "markdown-it-container": "^3.0.0",
diff --git a/src/css/layer.css b/src/css/layer.css
index ce7f6c1..ee0ff21 100644
--- a/src/css/layer.css
+++ b/src/css/layer.css
@@ -99,6 +99,284 @@ html #layuicss-layer {
     -webkit-animation-duration: .3s;
     animation-duration: .3s
 }
+/* 抽屉开始 */
+/* right to left */
+@keyframes layer-rl {
+    from {
+        -webkit-transform: translate3d(100%, 0, 0);
+        -ms-transform: translate3d(100%, 0, 0);
+        transform: translate3d(100%, 0, 0);
+        opacity: 0;
+        
+    }
+    to {
+        -webkit-transform: translate3d(0, 0, 0);
+        -ms-transform: translate3d(0, 0, 0);
+        transform: translate3d(0, 0, 0);
+        opacity: 1;
+    }
+}
+
+@-webkit-keyframes layer-rl {
+    from {
+        -webkit-transform: translate3d(100%, 0, 0);
+        -ms-transform: translate3d(100%, 0, 0);
+        transform: translate3d(100%, 0, 0);
+        opacity: 0;
+       
+    }
+    to {
+        -webkit-transform: translate3d(0, 0, 0);
+        -ms-transform: translate3d(0, 0, 0);
+        transform: translate3d(0, 0, 0);
+        opacity: 1;
+    }
+}
+
+.layer-anim-rl {
+    -webkit-animation-name: layer-rl;
+    animation-name: layer-rl;
+     /* animation-timing-function:cubic-bezier(0.7, 0.3, 0.1, 1); */
+}
+
+/* right to left close */
+@keyframes layer-rl-close {
+    from {
+        -webkit-transform: translate3d(0, 0, 0);
+        -ms-transform: translate3d(0, 0, 0);
+        transform: translate3d(0, 0, 0);
+        
+    }
+    to {
+        -webkit-transform: translate3d(100%, 0, 0);
+        -ms-transform: translate3d(100%, 0, 0);
+        transform: translate3d(100%, 0, 0);
+    }
+}
+
+@-webkit-keyframes layer-rl-close {
+    from {
+        -webkit-transform: translate3d(0, 0, 0);
+        -ms-transform: translate3d(0, 0, 0);
+        transform: translate3d(0, 0, 0);
+        
+    }
+    to {
+        -webkit-transform: translate3d(100%, 0, 0);
+        -ms-transform: translate3d(100%, 0, 0);
+        transform: translate3d(100%, 0, 0);
+    }
+}
+
+.layer-anim-rl-close {
+    -webkit-animation-name: layer-rl-close;
+    animation-name: layer-rl-close;
+     /* animation-timing-function:cubic-bezier(0.7, 0.3, 0.1, 1); */
+}
+/* left to right */
+@-webkit-keyframes layer-lr {
+    from {
+        -webkit-transform: translate3d(0, 0, 0);
+        -ms-transform: translate3d(0, 0, 0);
+        transform: translate3d(0, 0, 0);
+        opacity: 0
+    }
+    to {
+        -webkit-transform: translate3d(-100%, 0, 0);
+        -ms-transform: translate3d(-100%, 0, 0);
+        transform: translate3d(-100%, 0, 0);
+        opacity: 1
+    }
+}
+
+@keyframes layer-lr {
+    from {
+        -webkit-transform: translate3d(-100%, 0, 0);
+        -ms-transform: translate3d(-100%, 0, 0);
+        transform: translate3d(-100%, 0, 0);
+        opacity: 0
+    }
+    to {
+        -webkit-transform: translate3d(0, 0, 0);
+        -ms-transform: translate3d(0, 0, 0);
+        transform: translate3d(0, 0, 0);
+        opacity: 1
+    }
+}
+.layer-anim-lr {
+    -webkit-animation-name: layer-lr;
+    animation-name: layer-lr
+}
+
+/* left to right close */
+@-webkit-keyframes layer-lr-close {
+    from {
+        -webkit-transform: translate3d(0, 0, 0);
+        -ms-transform: translate3d(0, 0, 0);
+        transform: translate3d(0, 0, 0);
+    }
+    to {
+        -webkit-transform: translate3d(-100%, 0, 0);
+        -ms-transform: translate3d(-100%, 0, 0);
+        transform: translate3d(-100%, 0, 0);
+    }
+}
+
+@keyframes layer-lr-close {
+    from {
+        -webkit-transform: translate3d(0, 0, 0);
+        -ms-transform: translate3d(0, 0, 0);
+        transform: translate3d(0, 0, 0);
+    }
+    to {
+        -webkit-transform: translate3d(-100%, 0, 0);
+        -ms-transform: translate3d(-100%, 0, 0);
+        transform: translate3d(-100%, 0, 0);
+    }
+}
+.layer-anim-lr-close {
+    -webkit-animation-name: layer-lr-close;
+    animation-name: layer-lr-close
+}
+
+/* top to bottom */
+@-webkit-keyframes layer-tb {
+    from {
+        -webkit-transform: translate3d(0, -100%, 0);
+        -ms-transform: translate3d(0, -100%, 0);
+        transform: translate3d(0, -100%, 0);
+        opacity: 0;
+        animation-timing-function:cubic-bezier(0.7, 0.3, 0.1, 1);
+    }
+    to {
+        -webkit-transform: translate3d(0, 0, 0);
+        -ms-transform: translate3d(0, 0, 0);
+        transform: translate3d(0, 0, 0);
+        opacity: 1;
+        animation-timing-function:cubic-bezier(0.7, 0.3, 0.1, 1);
+    }
+}
+
+@keyframes layer-tb {
+    from {
+        -webkit-transform: translate3d(0, -100%, 0);
+        -ms-transform: translate3d(0, -100%, 0);
+        transform: translate3d(0, -100%, 0);
+        opacity: 0;
+        animation-timing-function:cubic-bezier(0.7, 0.3, 0.1, 1);
+    }
+    to {
+        -webkit-transform: translate3d(0, 0, 0);
+        -ms-transform: translate3d(0, 0, 0);
+        transform: translate3d(0, 0, 0);
+        opacity: 1;
+        animation-timing-function:cubic-bezier(0.7, 0.3, 0.1, 1);
+    }
+}
+.layer-anim-tb {
+    -webkit-animation-name: layer-tb;
+    animation-name: layer-tb
+}
+
+/* top to bottom close */
+@-webkit-keyframes layer-tb-close {
+    from {
+        -webkit-transform: translate3d(0, 0, 0);
+        -ms-transform: translate3d(0, 0, 0);
+        transform: translate3d(0, 0, 0);
+    }
+    to {
+        -webkit-transform: translate3d(0, -100%, 0);
+        -ms-transform: translate3d(0, -100%, 0);
+        transform: translate3d(0, -100%, 0);
+    }
+}
+
+@keyframes layer-tb-close {
+    from {
+        -webkit-transform: translate3d(0, 0, 0);
+        -ms-transform: translate3d(0, 0, 0);
+        transform: translate3d(0, 0, 0);
+    }
+    to {
+        -webkit-transform: translate3d(0, -100%, 0);
+        -ms-transform: translate3d(0, -100%, 0);
+        transform: translate3d(0, -100%, 0);
+    }
+}
+.layer-anim-tb-close {
+    -webkit-animation-name: layer-tb-close;
+    animation-name: layer-tb-close
+}
+
+/* bottom to top */
+@-webkit-keyframes layer-bt {
+    from {
+        -webkit-transform: translate3d(0, 100%, 0);
+        -ms-transform: translate3d(0, 100%, 0);
+        transform: translate3d(0, 100%, 0);
+        opacity: 0
+    }
+    to {
+        -webkit-transform: translate3d(0, 0, 0);
+        -ms-transform: translate3d(0, 0, 0);
+        transform: translate3d(0, 0, 0);
+        opacity: 1
+    }
+}
+
+@keyframes layer-bt {
+    from {
+        -webkit-transform: translate3d(0, 100%, 0);
+        -ms-transform: translate3d(0, 100%, 0);
+        transform: translate3d(0, 100%, 0);
+        opacity: 0
+    }
+    to {
+        -webkit-transform: translate3d(0, 0, 0);
+        -ms-transform: translate3d(0, 0, 0);
+        transform: translate3d(0, 0, 0);
+        opacity: 1
+    }
+}
+.layer-anim-bt {
+    -webkit-animation-name: layer-bt;
+    animation-name: layer-bt
+}
+
+/* bottom to top close */
+@-webkit-keyframes layer-bt-close {
+    from {
+        -webkit-transform: translate3d(0, 0, 0);
+        -ms-transform: translate3d(0, 0, 0);
+        transform: translate3d(0, 0, 0);
+    }
+    to {
+        -webkit-transform: translate3d(0, 100%, 0);
+        -ms-transform: translate3d(0,  100%, 0);
+        transform: translate3d(0, 100%, 0);
+    }
+}
+
+@keyframes layer-bt-close {
+    from {
+        -webkit-transform: translate3d(0, 0, 0);
+        -ms-transform: translate3d(0, 0, 0);
+        transform: translate3d(0, 0, 0);
+        
+    }
+    to {
+        -webkit-transform: translate3d(0,  100%, 0);
+        -ms-transform: translate3d(0,  100%, 0);
+        transform: translate3d(0,  100%, 0);
+        
+    }
+}
+.layer-anim-bt-close {
+    -webkit-animation-name: layer-bt-close;
+    animation-name: layer-bt-close
+}
+/* 抽屉结束 */
 
 @-webkit-keyframes layer-bounceIn {
     0% {
diff --git a/src/layer/index.ts b/src/layer/index.ts
index 592cd11..e7e0def 100644
--- a/src/layer/index.ts
+++ b/src/layer/index.ts
@@ -69,6 +69,13 @@ const layer = {
     let defaultOption = {};
     return layer.create(option, defaultOption, callback);
   },
+  // 抽屉
+  drawer: (option: any, callback: Function) => {
+    let defaultOption = {
+      type:"drawer",
+    };
+    return layer.create(option, defaultOption, callback);
+  },
   // 消息框
   msg: (message: string, option: any, callback: Function) => {
     let defaultOption = {
diff --git a/src/module/modal/index.vue b/src/module/modal/index.vue
index 820b0ff..ed70cc0 100644
--- a/src/module/modal/index.vue
+++ b/src/module/modal/index.vue
@@ -20,6 +20,8 @@ import {
   minArea,
   minOffset,
   updateMinArrays,
+  getDrawerAnimationClass,
+  calculateDrawerArea,
 } from "../../tools";
 import useMove from "../../tools/useMove";
 
@@ -43,7 +45,7 @@ export interface LayModalProps {
   btn?: Record<string, unknown>[] | false;
   move?: boolean | string;
   resize?: boolean | string;
-  type?: 0 | 1 | 2 | 3 | "dialog" | "component" | "iframe" | "loading";
+  type?: 0 | 1 | 2 | 3 | "dialog" | "component" | "iframe" | "loading" | "drawer";
   content?: string | Function | object | VNodeTypes
   isHtmlFragment?: boolean;
   shade?: boolean | string;
@@ -99,8 +101,8 @@ const id: Ref<string> = ref(nextId());
 const max: Ref<boolean> = ref(false);
 const min: Ref<boolean> = ref(false);
 const type: number = calculateType(props.type);
-const area: Ref<string[]> = ref(calculateArea(props.area));
-const offset: Ref<string[]> = ref(calculateOffset(props.offset, area));
+const area: Ref<string[]> = props.type != "drawer" ? ref(calculateArea(props.area)) : ref(calculateDrawerArea(props.offset, props.area));
+const offset: Ref<string[]> = ref(calculateOffset(props.offset, area, props.type));
 const contentHeight = ref(calculateContent(area.value[1], props.btn, type));
 const index: Ref<number | Function> = ref(props.zIndex);
 const visible: Ref<boolean> = ref(false);
@@ -122,7 +124,7 @@ const _l: Ref<string> = ref(offset.value[1]);
 const firstOpenDelayCalculation = function () {
   setTimeout(() => {
     area.value = getArea(layero.value);
-    offset.value = calculateOffset(props.offset, area.value);
+    offset.value = calculateOffset(props.offset, area.value, props.type);
     w.value = area.value[0];
     h.value = area.value[1];
     t.value = offset.value[0];
@@ -241,7 +243,7 @@ const setTopHandle = () => {
 
 // 拖拽支持
 const supportMove = function () {
-  if (props.move) {
+  if (props.move && props.type != "drawer") {
     if (layero.value != null) {
       // @ts-ignore
       useMove(layero.value, (width, height, left, top) => {
@@ -269,11 +271,17 @@ const styles = computed(() => {
 
 // 入场动画
 const enterActiveClass = computed(() => {
+  if(props.type === "drawer"){
+    return getDrawerAnimationClass(props.offset)
+  }
   return `layer-anim layer-anim-0${props.anim}`;
 });
 
 // 出场动画
 const leaveActiveClass = computed(() => {
+  if(props.type === "drawer"){
+    return getDrawerAnimationClass(props.offset,true);
+  }
   return props.isOutAnim ? `layer-anim-close` : "";
 });
 
diff --git a/src/tools/index.ts b/src/tools/index.ts
index 39544b2..971c481 100644
--- a/src/tools/index.ts
+++ b/src/tools/index.ts
@@ -50,10 +50,13 @@ export function calculateArea(area: any) {
 // @param offset
 // @param domSize
 // @return 正确位置
-export function calculateOffset(offset: any, area: any) {
+export function calculateOffset(offset: any, area: any, type: any) {
   var arr = ['t', 'r', 'b', 'l', 'lt', 'lb', 'rt', 'rb']
   var t = offset[0];
   var l = offset[1];
+  if(offset instanceof Array && type === "drawer"){
+    offset = 'r';
+  }
   // @ts-ignore
   if (arr.indexOf(offset) > -1) {
     t = '50%';
@@ -80,7 +83,7 @@ export function calculateOffset(offset: any, area: any) {
 export function calculateType(modalType: number | string) {
   if(modalType === 'dialog' || modalType === 0 || modalType === '0'){
     return 0;
-  }else if(modalType === 'component' || modalType === 1 || modalType === '1'){
+  }else if(modalType === 'component' || modalType === 'drawer' || modalType === 1 || modalType === '1'){
     return 1;
   }else if(modalType === 'iframe' || modalType === 2 || modalType === '2'){
     return 2;
@@ -171,4 +174,36 @@ export function updateMinArrays(id: string, state: Boolean) {
     i = -1;
   }
   return i;
-}
\ No newline at end of file
+}
+
+// 抽屉动画类
+export function getDrawerAnimationClass(offset: any,isClose: boolean = false){
+  const prefix = "layer-anim layer-anim";
+  let suffix = "rl";
+  if(offset === "l"){
+    suffix = "lr";
+  }else if(offset === "r"){
+    suffix = "rl"
+  }else if(offset === "t"){
+    suffix = "tb"
+  }else if(offset === "b"){
+    suffix = "bt"
+  }
+  return isClose ? `${prefix}-${suffix}-close` : `${prefix}-${suffix}`;
+}
+
+// 抽屉宽/高
+export function calculateDrawerArea(offset: any, drawerArea: string[] | string = "350px"){
+  if(drawerArea instanceof Array){
+    return drawerArea;
+  }
+  if(drawerArea === "auto"){
+    drawerArea = "350px";
+  }
+  if(offset === "l" || offset === "r"){
+    return [drawerArea, "100%"];
+  }else if(offset === "t" || offset === "b"){
+    return ["100%", drawerArea];
+  }
+  return [drawerArea,"100%"];
+}
-- 
Gitee