vue-utils-plugin

install

npm i @mvpleung/vue-utils

use

<template>
  <div>
    <div>
      <input v-model="name" v-if="$utils.isEmpty(info.name)" placeholder=""/>
    </div>
  </div>
</template>

<script>
    import Vue from "vue";
    import utilsPlugin from "vue-utils-plugin";
    Vue.use(utilsPlugin,{
        utils: {
         replace: function(str, replace, replaceStr){}
        }
      }
    );
    export default {
        name: 'app',
        data () {
            return {
                name: '',
                info: {
                  name: ''
                }
            }
        },
        methods:{
            submit: function () {
                this.$utils.replace('', '', '');
            }
        }
    }
</script>

配置说明

配置传入一个对象

{
    utils:{}//自定义工具方法
}

默认工具

参考 ./src/default

|Method|Params|Description| |---|----|----| |isEmpty|value |是否为空| |isEmptyArray|value| 是否为空数组| |isEmptyObject|value| 是否为空对象| |trim|str:String|去除空格| |is|type:String, val|精准数据类型判断(Object/Array/String等)| |getUrlParams|key: String, url: String|获取Url传参(a?code=123),Url默认取当前window.location| |getUrlVars|url: String|获取URL全部参数，返回JSON对象,Url默认取当前location| |removeUrlParam|url: String, key: String|移除URL参数,返回操作后的 Url| |setUrlParams|obj: Object, url: String|批量设置URL参数,返回操作后的 Url,Url默认取当前location| |setSessionItem|key: String, value: Object, needCipher: Boolean|存入 session 缓存 （自动转换为String，支持加密存储）| |getSessionItem|key: String, needDecipher: Boolean|取出 session 缓存（自动转换为Object，支持解密，配合 setSessionItem）| |removeSessionItem|key: String|清除session 缓存| |setLocalItem|key: String, value: Object, option: Object|存入 local 缓存 （自动转换为String，支持加密存储）, option: {exp: Number /**过期时间(秒)**/, needCipher: Boolean /**是否加密**/}| |getLocalItem|key: String, option: Object|取出 local 缓存（自动转换为Object）, option: {exp: Number /**过期时间(秒)**/, needDecipher: Boolean /**是否解密**/, force: Boolean /**为true已过期数据返回null**/}| |removeLocalItem|key: String|清除local 缓存| |evalJson|jsonStr: String|解析JSON字符串（过滤XSS攻击代码）| |replaceAll|value: String, replaceStr: String, replaceValue: String|替换所有指定的字符,replaceStr: /**待替换字符**/, replaceValue: /**替换后字符**/| |formatDateTime|unixTime: [Date|String|Number], pattern: String|格式化日期(支持Date、时间戳、日期格式字符串),默认 yyyy-MM-dd| |stepYear|date: [Date|String], year: Number, format: Boolean|步进年份,year: 正数加，负数减, format: 是否格式化为字符串，默认为 true| |stepMonth|date: [Date|String], month: Number, pattern: String, format: Boolean|步进月份,month: 正数加，负数减, pattern: 日期格式，默认为 yyyy-MM-dd, format: 是否格式化为字符串，默认为 true| |stepDays|date: [Date|String], days: Number, pattern: String, format: Boolean|步进天数,days: 正数加，负数减, pattern: 日期格式，默认为 yyyy-MM-dd, format: 是否格式化为字符串，默认为 true| |calcAge|date: [Date|String], today: [Date|String]|计算周岁,today: 非必填，默认今天| |compareDate|date1: [Date|String|Number], date2: [Date|String|Number]|比较日期大小,true:date1 > date2| |dateDiff|date1: [Date|String|Number], date2: [Date|String|Number], unit: String|计算相差(date1-date2)天数(小时、分钟、秒), unit: 单位,取值范围['day', 'hour', 'minute', 'second']| |uuid||生成36位唯一码（同 Java UUID）| |pathToRegexp|prefix: String, path: String|根据规则获取路径参数,返回Object（pathToRegexp(/:code/:id, /123/456）=> {code: 123, id: 456}| |get|object: Object, path: String, defaultValue: Object|通过既定路径获取对象参数 get(obj, 'a.b.c')| |attribute|object: Object, path: String, create: Boolean, cb: Function|同上,不存在则创建（此函数不支持数组）| |camelCase|value: String, reverse: Boolean|转换驼峰命名（驼峰转连接符、连接符转驼峰）| |koala|el: HTMLElement, options: Object|输入框延迟触发函数,options: {delay: Number, keydown: Function, keypress: Function, keyup: Function}| |forEach|arr: [Array|Object], func: Function|扩展 forEach，支持 Object/Array , 支持 return false 跳出循环（提高执行效率）| |inArray|val: Object, values: Array|同 jQuery inArray , 是否存在某数组中，返回下标，-1：未找到| |revHash|data: Object, length: Number|获取hash值,length: 默认 10 位| |cipher|data: Object, pwd: String|使用 aes192 加密数据| |deCipher|encrypted: String, pwd: String|使用 aes192 解密数据| |deepAssign|target: Object, source1: Object, ...|深度合并（Object.assign 升级版）| |deepClone|source: Object|对象深拷贝| |assignClone|target: Object, source1: Object, ...|深度合并（深度合并克隆）| |debounce|func: Function, wait: Number, immediate: Boolean|延迟触发（函数抖动）,wait: 触发时间, immediate: 不等待上次结束，重新触发等待时间| |toThousandslsFilter|num: Number|千分位分割 1,000| |exportTableToExcel|selector: String, fileName: String, tHeader: [String|Array], opts: Object|导出table表格到 Excel, selector: 表格选择器, tHeader: 表头数组或表头选择器, opts: {ignore: {index(忽略下标), noneType: true|false (忽略类型)}}| |exportJsonToExcel|tHeader: Array, jsonData: Array, fileName: String, opts: Object, filter: Function|导出JSON数据到Excel, tHeader: 表头数组, opts: {ignore: {index(忽略下标), noneType: true|false (忽略类型)}}, filter: 过滤函数，用于处理循环过程中的数据| |formatMinutes|minutes: Number|格式化分钟('5天 5小时 20分钟')| |formatSeconds|seconds: Number|格式化秒数('5天 5小时 20分钟 20秒')| |clearAllTimeInterval||清除所有的timeout、interval| |download|source: [String|Canvas|Blob], saveName: String|下载文件|

Socket工具

参考 ./src/socket.tool.js

|Method|Params|Description| |---|----|----| |createWebSocket|url: String, option: Object|创建websocket, url: 符合socket规范的链接, option: 配置项，参考下文|

|Param|Type|Description| |---|----|----| |heartCheck|Boolean|是否开启心跳检测| |reconnect|Boolean|是否重连,默认true| |heartTime|Number|心跳时间,默认60s| |timeout|Number|超时时间，默认15分钟| |reDelay|Number|重连延迟间隔，默认为30秒| |callbacks|Object|onopen(event), onclose(event), onerror(event), onmessage(event)| |debug|Boolean|是否为调试模式(输入日志)|

UI工具

参考 ./src/ui.tool.js

|Method|Params|Description| |---|----|----| |hideKeyboard|el: HTMLElement|隐藏软键盘, el: 不填写隐藏全局| |toggle|el: HTMLElement, arrow: HTMLElement, deg: Number|切换控件显示隐藏, el: 隐藏的节点, arrow: 箭头Dom, deg: rotate角度| |modalHelper||解决弹窗滚动穿透(父层处理)| |bubbleScroll|layerNode: String|处理弹层滚动穿透(弹出层处理), layerNode: 需要滚动节点的选择器|

License

LICENSE