Vue2 Utils Kit

安装

npm install vue2-utils-kit

全局引入

新建 vue.prototype.js 文件

import Vue from 'vue';
import commonUtilsKit from 'vue2-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

使用方式

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)

格式化数据(format)

数据验证(test)

通用工具(tool)