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

描述: 按钮或输入框防抖。

<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

描述: 输入框防抖。

<el-input v-input-debounce:1000="reset" placeholder="输入框防抖" />

参数说明:

• v-input-debounce - 指令接受以下参数：
• 延迟时间：以毫秒为单位的防抖延迟时间（如 1000），默认为 500 毫秒。
• 方法：要执行的函数（如 reset）。

3. v-btn-debounce

描述: 按钮防抖。

<el-button v-btn-debounce="500">防抖按钮</el-button>

参数说明:

• v-btn-debounce - 指令接受以下参数：
• 延迟时间：以毫秒为单位的防抖延迟时间（如 500），默认为 1000 毫秒。

4. v-btn-throttle

描述: 按钮节流。

<el-button v-btn-throttle="500">节流按钮</el-button>

参数说明:

• v-btn-throttle - 指令接受以下参数：
• 间隔时间：以毫秒为单位的防抖延迟时间（如 500），默认为 1000 毫秒。

5. v-relative-time

描述: 时间转换，展示距离当前时间的相对时间。（刚刚，xx分钟前，xx小时前，xx天前，年/月/日）

<div v-relative-time="1699795200000"></div>

参数说明:

• v-relative-time - 指令接受以下参数：
• 过去时间戳：过去的时间戳（如 1699795200000）

6. v-replace

描述: 限制输入框的输入内容。

<el-input v-replace:price="inputValue" />

参数说明:

• v-relative-time - 指令接受以下参数：
• 限制类型：允许两位小数的金额price（如 price）
• 限制类型仅允许正数plusPrice（如 price）。
• 限制类型仅允许正整数num（如 price）。
• 限制类型仅允许自然数natural（如 price）。
• 输入内容限制输入的内容（如 inputValue）

7. v-el-drag-dialog

描述: 可拖拽的对话框（仅用于element-ui）。

<el-dialog v-el-drag-dialog>
  <div class="el-dialog__header">拖拽我</div>
  <div>对话框内容</div>
</el-dialog>

文件插件(files)

 1. downloadBase64File(base64文件下载)
 2. downloadFiles(文件http地址下载)

格式化数据(format)

 1. unrepeated(数组对象去重)
 2. treeToFlat(树形结构拍平为一维数组)
 3. flatToTree(一维数组递归成为树形结构)
 4. recursionFunction(递归重构子集数据)
 5. filterData(将switch case语句转为数组对象)
 6. dateDiff(计算日期差值(单位：天))
 7. getNowDate(获取当前日期)
 8. setFormColumnsData(设置自定义表单列数据)

数据验证(test)

 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)

 1. debounce(防抖)
 2. throttle(节流)
 3. sleep(睡眠阻塞延时)

组件使用

样式使用

main.js文件中 import 'common-utils-kit/lib/utils-kit.css';

文件预览（preview）

需要安装 npm i docx-preview --save 预览docx 需要安装 npm i axios --save 预览docx