common-utils-kit 1.1.33 → 1.1.35

package/README.md

@@ -1,422 +1,714 @@
-# Common Utils Kit
-`common-utils-kit`是一个包含常用函数的npm包，提供了一系列验证、防抖节流、数据格式化等功能
-## 安装
-```
-npm install common-utils-kit
-```
-
-### 全局引入
-新建 vue.prototype.js 文件
-```
-import Vue from 'vue';
-import commonUtilsKit from 'common-utils-kit';
-Vue.prototype.$files = commonUtilsKit.files;
-Vue.prototype.$format = commonUtilsKit.format;
-Vue.prototype.$test = commonUtilsKit.test;
-Vue.prototype.$tool = commonUtilsKit.tool;
-Vue.use(commonUtilsKit.directive); // 注册自定义指令
-```
-在main文件中引入vue.prototype.js
-```
-import './vue.prototype.js'; // 引入 vue.prototype.js
-```
-### 局部引入
-```
-import commonUtilsKit from "common-utils-kit";
-例：验证是否为数字 commonUtilsKit.test.number(1)
-```
-#### 使用方式
-```
-this.$test.email("200")  //false
-```
-
-# 使用文档
-
-## 指令列表(directives)
-
-### 1. `v-debounce`
-**描述**: 按钮或输入框防抖。
-```html
-<el-input v-model="aa" v-debounce="[reset, 'input', 1000]" placeholder="输入框数组防抖" />
-<el-button v-debounce="[reset, 'click', 1000]">刷新</el-button>
-```
-**参数说明**:
-- `v-debounce` - 指令接受一个数组，包含以下参数。
-- **方法**： 要执行的函数（如 `reset`）。
-- **事件类型**：要监听的事件类型（如 `'click'`）。
-- **延迟时间**：防抖延迟的时间，以毫秒为单位（如 `1000`）。
-
-### 2. `v-input-debounce`
-**描述**: 输入框防抖。
-```html
-<el-input v-input-debounce:1000="reset" placeholder="输入框防抖" />
-```
-**参数说明**:
-- `v-input-debounce` - 指令接受以下参数：
-- **延迟时间**：以毫秒为单位的防抖延迟时间（如 `1000`），默认为 500 毫秒。
-- **方法**：要执行的函数（如 `reset`）。
-
-### 3. `v-btn-debounce`
-**描述**: 按钮防抖。
-```html
-<el-button v-btn-debounce="500">防抖按钮</el-button>
-```
-**参数说明**:
-- `v-btn-debounce` - 指令接受以下参数：
-- **延迟时间**：以毫秒为单位的防抖延迟时间（如 `500`），默认为 1000 毫秒。
-
-### 4. `v-btn-throttle`
-**描述**: 按钮节流。
-```html
-<el-button v-btn-throttle="500">节流按钮</el-button>
-```
-**参数说明**:
-- `v-btn-throttle` - 指令接受以下参数：
-- **间隔时间**：以毫秒为单位的防抖延迟时间（如 `500`），默认为 1000 毫秒。
-
-### 5. `v-relative-time`
-
-**描述**: 时间转换，展示距离当前时间的相对时间。（刚刚，xx分钟前，xx小时前，xx天前，年/月/日）
-```html
-<div v-relative-time="1699795200000"></div>
-```
-**参数说明**:
-- `v-relative-time` - 指令接受以下参数：
-- **过去时间戳**：过去的时间戳（如 `1699795200000`）
-
-### 6. `v-el-drag-dialog`
-**描述**: 可拖拽的对话框（仅用于element-ui）。
-```html
-<el-dialog v-el-drag-dialog>
-  <div class="el-dialog__header">拖拽我</div>
-  <div>对话框内容</div>
-</el-dialog>
-```
-
-### 7. `v-input-rule`
-**描述**: 按规则限制输入框内容，兼容原生 input 和 Element UI `el-input`。
-```html
-<el-input v-model="amount" v-input-rule:priceRange="[0, 1000000]" placeholder="金额范围" />
-<el-input v-model="optionalCount" v-input-rule:range.empty="[0, 10000]" placeholder="允许清空的整数范围" />
-```
-**参数说明**:
-- `price`：允许正负金额，最多两位小数。
-- `plusPrice`：允许非负金额，最多两位小数。
-- `positivePrice`：允许正数金额，最终事件中小于等于 0 会清空。
-- `integer`：允许正负整数。
-- `plusInteger`：允许非负整数。
-- `positiveInteger`：允许正整数。
-- `range`：只允许数字，并按 `[min, max]` 限制范围。
-- `priceRange`：只允许金额，最多两位小数，并按 `[min, max]` 限制范围；最终事件会补齐两位小数。
-- `.empty`：用于 `range` / `priceRange`，传入最小值时仍允许最终值为空。
-
-## 文件插件(files)
-```html
- 1. downloadBase64File(base64文件下载)
- 2. downloadFiles(文件http地址下载)
- ```
-## 格式化数据(format)
-```html
- 1. unrepeated(数组对象去重)
- 2. treeToFlat(树形结构拍平为一维数组)
- 3. flatToTree(一维数组递归成为树形结构)
- 4. recursionFunction(递归重构子集数据)
- 5. filterData(将switch case语句转为数组对象)
- 6. dateDiff(计算日期差值(单位：天))
- 7. getNowDate(获取当前日期)
- 8. setFormColumnsData(设置自定义表单列数据)
- ```
-## 数据验证(test)
-```html
- 1. hasValue(是否有值,可验证指定类型)
- 2. valueType(返回数据类型)
- 3. emai(是否为邮箱)
- 4. mobile(是否为手机号)
- 5. url(是否为url)
- 6. idCard(是否为身份证号)
- 7. carNo(是否为车牌号)
- 8. chinese(是否为中文)
- 9. letter(是否为字母)
- 10. landline(是否为座机)
- 11. code(是否为6位数短信验证码)
- ```
-## 通用工具(tool)
-```html
- 1. debounce(防抖)
- 2. throttle(节流)
- 3. sleep(睡眠阻塞延时)
- ```
-
-## 请求取消(request.AxiosCanceler)
-```js
-import { request } from 'common-utils-kit';
-
-const canceler = new request.AxiosCanceler({ type: 'abort' });
-const config = { method: 'get', url: '/api/list', params: { pageNum: 1 } };
-canceler.addPending(config);
-canceler.removePending(config);
-canceler.removeAllPending();
-```
-
-## 请求封装(request)
-```js
-import { request } from 'common-utils-kit';
-
-const http = new request.RequestHttp({
-  baseURL: '/api',
-  timeout: 60000,
-  withCredentials: true,
-}, {
-  getToken: () => localStorage.getItem('token'),
-  tokenHeader: 'token',
-  showLoading: () => {},
-  hideLoading: () => {},
-  message: Message,
-});
-
-http.get('/user/info', { id: 1 }, { cancel: true, loading: false });
-http.post('/user/save', { name: '张三' });
-```
-
-请求选项：
-
-- `cancel`：是否启用重复请求取消，默认启用。
-- `loading`：是否调用 loading 回调，默认启用。
-- `getToken`：业务项目注入的 token 获取函数。
-- `tokenHeader`：token 写入的请求头字段名，默认 `token`。
-- `message`：业务项目注入的提示对象，兼容 Element UI `Message`。
-
-## WebSocket(websocket)
-```js
-import { websocket } from 'common-utils-kit';
-
-const client = websocket.createSocketClient({
-  url: 'ws://example.com/socket',
-  heartMessage: 'ping',
-  heartTime: 60000,
-  reconnectTime: 5000,
-  onMessage: event => console.log(event.data),
-});
-
-client.connect();
-client.send({ type: 'hello' });
-client.close();
-```
-
-## 表格工具(table)
-
-示例工程可在 `/element/table` 页面查看合并行展示效果。
-
-```vue
-<template>
-  <el-table
-    :data="tableData"
-    :span-method="spanMethod"
-    border
-  >
-    <el-table-column prop="region" label="区域" />
-    <el-table-column prop="city" label="城市" />
-    <el-table-column prop="store" label="门店" />
-    <el-table-column prop="count" label="数量" />
-  </el-table>
-</template>
-
-<script>
-import { table } from 'common-utils-kit';
-
-export default {
-  data() {
-    return {
-      tableData: [],
-      spanMethod: () => [1, 1],
-      sourceData: [
-        { region: '华东', city: '杭州', store: '西湖店', count: 12 },
-        { region: '华南', city: '广州', store: '天河店', count: 8 },
-        { region: '华东', city: '上海', store: '浦东店', count: 15 }
-      ]
-    };
-  },
-  created() {
-    const sorted = table.sortMergeData(this.sourceData, 'region');
-    const spanList = table.getMergeSpanList(sorted, 'region');
-    this.tableData = sorted;
-    this.spanMethod = table.createMergeSpanMethod(spanList, 0);
-  }
-};
-</script>
-```
-
-## 组件使用
-组件源码按依赖分类维护：不依赖 UI 框架的自定义 Vue 组件放在 `src/components`，Element UI 二次封装或强依赖 Element UI 的组件放在 `src/element-ui`。历史上已从 `common-utils-kit/element` 导出的自定义组件会先保留兼容导出。
-
-vue.config.js文件中设置别名
-  configureWebpack: {
-    resolve: {
-      alias: {
-        'common-utils-kit/element': 'common-utils-kit/lib/element/index.umd.js'
-      }
-    }
-  },
-页面
-import {View3D}  from 'common-utils-kit/element';
-直接使用
-如果是使用webpack5以上版本的可直接使用
-import {View3D}  from 'common-utils-kit/element';
-
-### ScrollTable 滚动表格
-
-```vue
-<template>
-  <scroll-table
-    :columns="columns"
-    :main-data="tableData"
-    :loading="loading"
-    :finished="finished"
-    height="460"
-    @load="loadMore"
-  />
-</template>
-
-<script>
-import { ScrollTable } from 'common-utils-kit/element';
-
-export default {
-  components: {
-    ScrollTable,
-  },
-};
-</script>
-```
-
-参数：
-
-- `columns`：列配置，字段使用 `param`、`label`、`width`、`minWidth`、`align`、`tooltip`。
-- `mainData`：表格数据。
-- `loading`：是否正在加载下一页。
-- `finished`：是否已无更多数据。
-- `loadDistance`：距离底部多少像素触发 `load`，默认 `40`。
-
-### ScreenScale 缩放容器
-
-```vue
-<template>
-  <screen-scale :width="1920" :height="1080">
-    <div style="width: 1920px; height: 1080px;">
-      设计稿内容
-    </div>
-  </screen-scale>
-</template>
-
-<script>
-import { ScreenScale } from 'common-utils-kit/element';
-
-export default {
-  components: {
-    ScreenScale,
-  },
-};
-</script>
-```
-
-参数：
-
-- `width`：设计稿宽度，默认 `1920`。
-- `height`：设计稿高度，默认 `1080`。
-
-### ResetDrawer 抽屉壳
-
-用于解决业务抽屉直接用 `v-if` 销毁整个组件时，`el-drawer append-to-body` 挂载异常的问题。`ResetDrawer` 会让外层 `el-drawer` 常驻并固定 `append-to-body`，只在打开时渲染默认插槽，关闭动画结束后再销毁默认插槽内容。
-
-```vue
-<template>
-  <reset-drawer
-    v-model="drawerVisible"
-    title="业务抽屉"
-    size="480px"
-    :wrapper-closable="false"
-  >
-    <business-drawer-content :id="currentId" />
-  </reset-drawer>
-</template>
-
-<script>
-import { ResetDrawer } from 'common-utils-kit/element';
-
-export default {
-  components: {
-    ResetDrawer,
-  },
-  data() {
-    return {
-      drawerVisible: false,
-      currentId: '',
-    };
-  },
-};
-</script>
-```
-
-使用说明：
-- 不要再给 `reset-drawer` 外层套 `v-if`，否则外层 `el-drawer` 仍会被销毁。
-- 默认插槽内容会在每次打开时重新创建，业务组件的 `created`、`mounted` 和 `data` 会自然重新执行。
-- 插槽内容会在 `closed` 事件后销毁，避免关闭动画过程中内容突然消失。
-- 组件会过滤 `destroy-on-close` 和 `append-to-body` 透传，销毁时机由 `ResetDrawer` 统一控制。
-- 常用 `el-drawer` 参数如 `title`、`size`、`direction`、`wrapper-closable`、`before-close` 可继续按原方式传入。
-
-### ResetDialog 对话框壳
-
-用于解决业务对话框直接用 `v-if` 销毁整个组件时，`el-dialog append-to-body` 挂载异常的问题。`ResetDialog` 会让外层 `el-dialog` 常驻并固定 `append-to-body`，只在打开时渲染默认插槽和 footer 插槽，关闭动画结束后再销毁插槽内容。
-
-```vue
-<template>
-  <reset-dialog
-    v-model="dialogVisible"
-    title="业务对话框"
-    width="560px"
-    :close-on-click-modal="false"
-  >
-    <business-dialog-content :id="currentId" />
-    <template slot="footer">
-      <el-button @click="dialogVisible = false">
-        取消
-      </el-button>
-      <el-button type="primary" @click="dialogVisible = false">
-        确定
-      </el-button>
-    </template>
-  </reset-dialog>
-</template>
-
-<script>
-import { ResetDialog } from 'common-utils-kit/element';
-
-export default {
-  components: {
-    ResetDialog,
-  },
-  data() {
-    return {
-      dialogVisible: false,
-      currentId: '',
-    };
-  },
-};
-</script>
-```
-
-使用说明：
-- 不要再给 `reset-dialog` 外层套 `v-if`，否则外层 `el-dialog` 仍会被销毁。
-- 默认插槽和 `footer` 插槽内容会在每次打开时重新创建，业务组件状态会自然重置。
-- 插槽内容会在 `closed` 事件后销毁，避免关闭动画过程中内容突然消失。
-- 组件会过滤 `destroy-on-close` 和 `append-to-body` 透传，销毁时机由 `ResetDialog` 统一控制。
-- 常用 `el-dialog` 参数如 `title`、`width`、`fullscreen`、`top`、`close-on-click-modal`、`before-close` 可继续按原方式传入。
-
-## 样式使用
-main.js文件中
-import 'common-utils-kit/lib/utils-kit.css';
-
-
-### 文件预览（preview）
-需要安装 npm i docx-preview --save 预览docx
-需要安装 npm i axios --save 预览docx
-
+# Common Utils Kit
+
+`common-utils-kit` 是一个基于 Vue 2 和 Element UI 的公共能力包，当前同时提供：
+
+- 通用工具方法
+- 自定义指令
+- 请求封装
+- WebSocket 封装
+- Element UI 业务组件
+
+当前版本：`1.1.34`
+
+## 安装
+
+```bash
+npm install common-utils-kit
+```
+
+依赖要求：
+
+- `vue` 2.x
+- `element-ui` `>=2.13.2`
+
+## 目录能力
+
+### 主入口
+
+主入口 `common-utils-kit` 当前导出：
+
+- `test`
+- `format`
+- `tool`
+- `file`
+- `confirm`
+- `request`
+- `websocket`
+- `table`
+- `directive`
+
+```js
+import {
+  test,
+  format,
+  tool,
+  file,
+  confirm,
+  request,
+  websocket,
+  table,
+  directive,
+} from 'common-utils-kit';
+```
+
+### Element 组件入口
+
+`common-utils-kit/element` 当前导出：
+
+- `View3D`
+- `ScreenScale`
+- `ConfirmDialog`
+- `ElementForm`
+- `ElementTable`
+- `ScrollTable`
+- `ResetDrawer`
+- `ResetDialog`
+
+```js
+import {
+  View3D,
+  ScreenScale,
+  ConfirmDialog,
+  ElementForm,
+  ElementTable,
+  ScrollTable,
+  ResetDrawer,
+  ResetDialog,
+} from 'common-utils-kit/element';
+```
+
+### 样式
+
+```js
+import 'common-utils-kit/lib/utils-kit.css';
+```
+
+## 快速开始
+
+### 1. 全局挂载常用能力
+
+```js
+import Vue from 'vue';
+import {
+  test,
+  format,
+  tool,
+  file,
+  confirm,
+  table,
+  directive,
+} from 'common-utils-kit';
+
+Vue.prototype.$test = test;
+Vue.prototype.$format = format;
+Vue.prototype.$tool = tool;
+Vue.prototype.$fileKit = file;
+Vue.prototype.$confirmKit = confirm;
+Vue.prototype.$tableKit = table;
+
+Vue.use(directive);
+```
+
+### 2. 局部使用
+
+```js
+import { confirm, table } from 'common-utils-kit';
+
+confirm.customConfirm({ title: '提示', toolTips: '确认执行当前操作？' });
+
+const sorted = table.sortMergeData(list, 'region');
+```
+
+## 工具能力
+
+### test
+
+常用校验能力：
+
+- `hasValue`
+- `valueType`
+- `email`
+- `mobile`
+- `url`
+- `idCard`
+- `carNo`
+- `amount`
+- `chinese`
+- `letter`
+- `landline`
+- `code`
+
+```js
+import { test } from 'common-utils-kit';
+
+test.email('demo@test.com');
+test.mobile('13800138000');
+```
+
+### format
+
+常用数据处理能力：
+
+- `getProperty`
+- `unrepeated`
+- `treeToFlat`
+- `flatToTree`
+- `recursionFunction`
+- `filterData`
+- `dateDiff`
+- `getNowDate`
+- `setFormColumnsData`
+
+```js
+import { format } from 'common-utils-kit';
+
+const flatList = format.treeToFlat(treeData);
+const treeData = format.flatToTree(list);
+```
+
+### tool
+
+提供：
+
+- `debounce`
+- `throttle`
+- `sleep`
+
+```js
+import { tool } from 'common-utils-kit';
+
+const submit = tool.debounce(() => {
+  console.log('submit');
+}, 500);
+```
+
+### file
+
+提供：
+
+- `downloadBase64File`
+- `downloadFiles`
+- `fileToBase64`
+- `base64ToFile`
+- `base64ToFileBlob`
+- `uploadCompress`
+
+```js
+import { file } from 'common-utils-kit';
+
+file.downloadFiles('https://example.com/demo.pdf', 'demo.pdf');
+```
+
+### confirm
+
+当前主用方法是 `customConfirm`，统一从主入口使用，不再从 `element-ui` 目录单独引用。
+
+```js
+import { confirm } from 'common-utils-kit';
+
+const res = await confirm.customConfirm({
+  title: '操作确认',
+  toolTips: '确认执行当前操作？',
+  titleIcon: 'el-icon-warning-outline',
+  tipIcon: 'el-icon-warning',
+});
+
+console.log(res.flag);
+```
+
+输入弹窗示例：
+
+```js
+const res = await confirm.customConfirm({
+  title: '填写原因',
+  dialogType: 'input',
+  toolTips: '请输入本次操作原因',
+  inputPlaceholder: '请输入原因',
+  inputValue: '',
+});
+
+console.log(res.flag, res.inputValue);
+```
+
+常用参数：
+
+- `title`
+- `dialogType`
+- `toolTips`
+- `inputValue`
+- `inputPlaceholder`
+- `btnParam`
+- `closeOnClickModal`
+- `closeOnPressEscape`
+- `customClass`
+- `titleIcon`
+- `tipIcon`
+
+### request
+
+请求封装从 `request` 模块获取。
+
+```js
+import { request } from 'common-utils-kit';
+
+const http = new request.RequestHttp({
+  baseURL: '/api',
+  timeout: 60000,
+  withCredentials: true,
+}, {
+  getToken: () => localStorage.getItem('token'),
+  tokenHeader: 'token',
+  showLoading: () => {},
+  hideLoading: () => {},
+  message: Message,
+});
+
+http.get('/user/info', { id: 1 }, { cancel: true, loading: false });
+http.post('/user/save', { name: '张三' });
+```
+
+请求取消能力：
+
+```js
+import { request } from 'common-utils-kit';
+
+const canceler = new request.AxiosCanceler({ type: 'abort' });
+
+const config = {
+  method: 'get',
+  url: '/api/list',
+  params: { pageNum: 1 },
+};
+
+canceler.addPending(config);
+canceler.removePending(config);
+canceler.removeAllPending();
+```
+
+### websocket
+
+```js
+import { websocket } from 'common-utils-kit';
+
+const client = websocket.createSocketClient({
+  url: 'ws://example.com/socket',
+  heartMessage: 'ping',
+  heartTime: 60000,
+  reconnectTime: 5000,
+  onMessage: event => console.log(event.data),
+});
+
+client.connect();
+client.send({ type: 'hello' });
+client.close();
+```
+
+### table
+
+当前主用场景是 Element 表格合并行辅助。
+
+```js
+import { table } from 'common-utils-kit';
+
+const sorted = table.sortMergeData(sourceData, 'region');
+const spanList = table.getMergeSpanList(sorted, 'region');
+const spanMethod = table.createMergeSpanMethod(spanList, 0);
+```
+
+## 指令
+
+通过 `Vue.use(directive)` 安装后，当前可用指令包括：
+
+- `v-debounce`
+- `v-input-debounce`
+- `v-btn-debounce`
+- `v-btn-throttle`
+- `v-click-lock`
+- `v-relative-time`
+- `v-input-rule`
+- `v-local-loading`
+- `v-full-loading`
+- `v-el-drag-dialog`
+
+示例：
+
+```vue
+<template>
+  <div>
+    <el-input
+      v-model="keyword"
+      v-input-debounce:1000="handleSearch"
+      placeholder="输入后防抖搜索"
+    />
+
+    <el-button v-btn-throttle="500" @click="handleSubmit">
+      节流提交
+    </el-button>
+  </div>
+</template>
+```
+
+## Element 组件
+
+## ConfirmDialog
+
+`ConfirmDialog` 是一个基于 `el-dialog` 的业务确认弹窗组件。
+
+```vue
+<template>
+  <confirm-dialog
+    v-model="dialogVisible"
+    title="删除提示"
+    dialog-type="tips"
+    tool-tips="删除后数据不可恢复，是否继续？"
+    :btn-param="componentBtns"
+    title-icon="el-icon-warning-outline"
+    tip-icon="el-icon-warning"
+    @affirm="handleConfirm"
+  />
+</template>
+
+<script>
+import { ConfirmDialog } from 'common-utils-kit/element';
+
+export default {
+  components: {
+    ConfirmDialog,
+  },
+  data() {
+    return {
+      dialogVisible: false,
+      componentBtns: [
+        { btnlable: '取消', type: '', flag: 'cancel' },
+        { btnlable: '确认删除', type: 'danger', flag: 'confirm' },
+      ],
+    };
+  },
+  methods: {
+    handleConfirm(flag, value) {
+      console.log(flag, value);
+      this.dialogVisible = false;
+    },
+  },
+};
+</script>
+```
+
+## ElementForm
+
+`ElementForm` 是配置型表单/展示组件。
+
+### 基础用法
+
+```vue
+<template>
+  <element-form
+    ref="formExample"
+    :columns="formColumns"
+    :form-data="formData"
+    :label-width="110"
+    :value-width="90"
+    @itemChange="itemChange"
+    @handleSearch="handleSearch"
+    @handleClear="handleClear"
+  />
+</template>
+
+<script>
+import { ElementForm } from 'common-utils-kit/element';
+
+export default {
+  components: {
+    ElementForm,
+  },
+  data() {
+    return {
+      formData: {
+        customerName: '',
+        customerType: '',
+      },
+      formColumns: [
+        {
+          param: 'customerName',
+          label: '客户名称',
+          effect: 'form',
+          type: 'search',
+          rules: { required: true },
+          proport: 8,
+        },
+        {
+          param: 'customerType',
+          label: '客户类型',
+          effect: 'form',
+          type: 'select',
+          props: { label: 'label', value: 'value' },
+          data: [],
+          rules: { select: true },
+          proport: 8,
+        },
+      ],
+    };
+  },
+};
+</script>
+```
+
+### 通过 ref 批量填充列配置
+
+`batchSetColumnData` 现在通过组件实例方法提供，不需要再从内部 `utils/common.js` 直接引用。
+
+```js
+created() {
+  this.formColumns = this.createFormColumns();
+},
+mounted() {
+  this.formColumns = this.$refs.formExample.batchSetColumnData({
+    客户类型: [
+      { label: '企业客户', value: 'company' },
+      { label: '个人客户', value: 'personal' },
+    ],
+    客户标签: [
+      { label: '重点客户', value: 'important' },
+      { label: '已签约', value: 'contract' },
+      { label: '待跟进', value: 'follow' },
+    ],
+  }, { unique: 'label', data: 'data' });
+}
+```
+
+### 组件实例方法
+
+- `submitForm()`：执行表单校验，返回 `Boolean`
+- `clearValidate(param)`：清空校验
+- `batchSetColumnData(config, props)`：基于当前 `columns` 返回新的列配置
+- `setFormDisabled(disabled, params)`：批量设置表单项禁用状态
+
+### 常见字段
+
+- `param`
+- `label`
+- `effect`
+- `type`
+- `rules`
+- `proport`
+- `props`
+- `data`
+- `clearable`
+- `filterable`
+- `multiple`
+- `disabled`
+
+### 支持的常见类型
+
+- `input`
+- `select`
+- `cascader`
+- `date`
+- `checkbox`
+- `radio`
+- `textarea`
+- `search`
+
+## ElementTable
+
+`ElementTable` 是配置型表格组件，支持：
+
+- 复选列
+- 单选列
+- 序号列
+- 详情跳转列
+- 开关列
+- 图片列
+- 按钮列
+- 分隔展示
+- 拼接展示
+- 气泡提示
+- 气泡表格
+- 表头插槽
+- 单元格插槽
+
+```vue
+<template>
+  <element-table
+    :columns="columns"
+    :main-data="tableData"
+    :show-checkbox="true"
+    :show-radio="true"
+    :select-radio.sync="selectRadio"
+    :show-index="true"
+    :page="page"
+    row-key="id"
+    @handleButton="handleButton"
+    @setStatus="setStatus"
+    @openDetail="openDetail"
+  />
+</template>
+
+<script>
+import { ElementTable } from 'common-utils-kit/element';
+
+export default {
+  components: {
+    ElementTable,
+  },
+};
+</script>
+```
+
+## ScrollTable
+
+滚动加载表格组件：
+
+```vue
+<template>
+  <scroll-table
+    :columns="columns"
+    :main-data="tableData"
+    :loading="loading"
+    :finished="finished"
+    height="460"
+    @load="loadMore"
+  />
+</template>
+
+<script>
+import { ScrollTable } from 'common-utils-kit/element';
+
+export default {
+  components: {
+    ScrollTable,
+  },
+};
+</script>
+```
+
+常用参数：
+
+- `columns`
+- `mainData`
+- `loading`
+- `finished`
+- `loadDistance`
+- `height`
+
+## ScreenScale
+
+大屏缩放容器：
+
+```vue
+<template>
+  <screen-scale :width="1920" :height="1080">
+    <div style="width: 1920px; height: 1080px;">
+      大屏内容
+    </div>
+  </screen-scale>
+</template>
+
+<script>
+import { ScreenScale } from 'common-utils-kit/element';
+
+export default {
+  components: {
+    ScreenScale,
+  },
+};
+</script>
+```
+
+## ResetDrawer
+
+用于解决业务抽屉外层直接 `v-if` 销毁时，`append-to-body` 挂载异常的问题。
+
+```vue
+<template>
+  <reset-drawer
+    v-model="drawerVisible"
+    title="业务抽屉"
+    size="480px"
+    :wrapper-closable="false"
+  >
+    <business-drawer-content :id="currentId" />
+  </reset-drawer>
+</template>
+
+<script>
+import { ResetDrawer } from 'common-utils-kit/element';
+
+export default {
+  components: {
+    ResetDrawer,
+  },
+};
+</script>
+```
+
+## ResetDialog
+
+用于解决业务弹窗外层直接 `v-if` 销毁时，`append-to-body` 挂载异常的问题。
+
+```vue
+<template>
+  <reset-dialog
+    v-model="dialogVisible"
+    title="业务弹窗"
+    width="560px"
+    :close-on-click-modal="false"
+  >
+    <business-dialog-content :id="currentId" />
+    <template slot="footer">
+      <el-button @click="dialogVisible = false">取消</el-button>
+      <el-button type="primary" @click="dialogVisible = false">确定</el-button>
+    </template>
+  </reset-dialog>
+</template>
+
+<script>
+import { ResetDialog } from 'common-utils-kit/element';
+
+export default {
+  components: {
+    ResetDialog,
+  },
+};
+</script>
+```
+
+## View3D
+
+`View3D` 为三维展示组件，当前通过 `common-utils-kit/element` 兼容导出：
+
+```js
+import { View3D } from 'common-utils-kit/element';
+```
+
+具体业务参数请结合实际页面或示例工程使用。
+
+## 本地开发
+
+```bash
+npm run dev
+```
+
+## 构建
+
+```bash
+npm run build
+```
+
+## 构建 npm 主入口
+
+```bash
+npm run lib
+```
+
+## 构建 Element 子入口
+
+```bash
+npm run lib:module
+```
+
+## 检查
+
+```bash
+npm run lint
+```