utilo
前端业务开发中多个项目会频繁使用到可复用的工具类函数,为了避免不同项目中因变动而重复拷贝,参考并整合一个可实用的工具库。
安装
$ npm i utilo -S
全局使用
import Vue from 'vue'
import Utilo from 'utilo'
Vue.prototype.utilo = Utilo
按需引入
import {formatTime} from 'utilo' // 引入格式化时间模块
import {bankcard as bank} from "utilo"; // 如遇命名问题可使用
目录
- Array - 数组
- Clone - 克隆
- Date - 日期与时间
- Dom - 文档对象
- Draw - 基础绘图
- Format - 格式化
- Function - 函数
- Keycode - 按键值
- Number - 数字
- Password - 密码
- Regexp - 正则
- String - 字符串
- Type - 类型
- Ua - 浏览器标识
- Url - 链接参数
Array (数组)
chunk 数组拆分
import {chunk} from 'utilo'
/**
* chunk 数组拆分
* @since 1.0.0
* @param {Array} array 待拆分数组
* @param {Number} size 数量
* @return {Array}
*/
chunk([1,2,3,4,5],2) // => [[1,2],[3,4],[5]]
sort 数组排序
import {sort} from 'utilo'
/**
* sort 数组排序
* @since 1.0.0
* @param {Array} array 待排序数组
* @param {Number} type 1:从小到大 2:从大到小 3:随机
* @param {String} key 根据键值排序 默认为空
* @return {Array}
*/
sort([4,2,3,1,5],1) // => [1,2,3,4,5]
sort([4,2,3,1,5],2) // => [5,4,3,2,1]
// 键值
let array = [{id:1,value:10},{id:2,value:8},{id:3,value:"12"}]
sort(array,1,'value') // => [{id:2,value:8},{id:1,value:10},{id:3,value:"12"}]
unique 数组去重
import {unique} from 'utilo'
/**
* unique 数组去重
* @since 1.0.0
* @param {Array} array 待去重数组
* @return {Array}
*/
unique([1,2,3,2,0]) // => [1,2,3,0]
Clone (克隆)
clone 浅拷贝
import {clone} from 'utilo'
/**
* clone 浅拷贝
* @since 1.0.0
* 1.0.2 rename:clone
* @param {Object | Array} data
* @return {Object | Array}
*/
clone({a:1,b:2})
deepCopy 深拷贝
import {deepCopy} from 'utilo'
/**
* deepCopy 深拷贝
* @since 1.0.0
* 1.0.2 rename:deepCopy
* @param {Object | Array} data
* @return {Object | Array}
*/
deepCopy([{a:1,b:2},{c:3,d:4}])
Date (日期与时间)
formatTime 格式化日期与时间
time
需传入时间戳(秒级/毫秒级皆可)
format
可传入的类型有:
- YYYY-MM-DD hh:mm:ss
- YYYY/MM/DD hh:mm:ss
- Y年M月D日 h时m分s秒
v1.0.2
- Y年M月D日
v1.0.2
- YYYY-MM-DD
- YYYY/MM/DD
- MM-DD
- MM/DD
- hh:mm:ss
- hh:mm
- computed 或 timeAgo
例:50分钟前
import {formatTime} from 'utilo'
/**
* formatTime 格式化日期与时间
* @since 1.0.0
* 1.0.2 add:`format` 类型 `Y年M月D日 h时m分s秒` 和 'Y年M月D日'
* @param {String} format 返回日期时间的格式
* @param {Number} time 传入时间戳(默认当前时间)
* @param {String} lang 语言 (当前版本仅支持 en-US、zh-CN 默认中文)
* @return {String}
*/
formatTime() // 输出当前时间 -> 2020-11-04 12:00:00
let time = parseInt(new Date().getTime())-3000
formatTime('timeAgo',time,'en-US') // -> 3 seconds ago
changeTimezone 切换时区
import {changeTimezone} from 'utilo'
/**
* changeTimezone 更改时区时间
* @since 1.0.0
* 1.0.2 update:修改传入顺序
* @param {Number} timezone 传入需要转换的时区
* @param {Number} time 时间戳(默认当前时间)
* @return {Number} 该地区当前毫秒级时间戳
*/
// 假设当前为北京时间 2020-11-21 16:00:00 需要切换到东京时间
changeTimezone(9) // => 1605949200000
Dom (文档对象)
getScrollTop 获取滚动条距离
import {getScrollTop} from 'utilo'
/**
* getScrollTop 获取滚动条距离
* @since 1.0.0
* @return {Number}
*/
getScrollTop()
setScrollTop 设置滚动条到顶部的距离
import {setScrollTop} from 'utilo'
/**
* setScrollTop 设置滚动条到顶部的距离
* @since 1.0.0
* @param {Number} value 距离
* @return {Number}
*/
setScrollTop(100) // 滚动到离顶部100的距离
scrollTo 滚动到某个位置(动画)
import {scrollTo} from 'utilo'
/**
* scrollTo 在${duration}ms时间内,滚动条平滑滚动到${to}指定位置
* @since 1.0.0
* @param {Number} to 距离
* @param {Number} duration 毫秒
*/
scrollTo(100,300) // 300ms时间从0滚动到100
offset 获取元素的距离document的位置
import {offset} from 'utilo'
/**
* offset 获取元素的距离document的位置
* @since 1.0.0
* @param {HTMLElement} ele
* @return { {left:Number,top:Number} }
*/
offset(this.$refs.element) // -> {left:0,top:200}
windowResize 软键盘缩回、弹起回调
import {resize} from 'utilo'
/**
* windowResize 软键盘缩回、弹起回调
* 当软件键盘弹起会改变当前 window.innerHeight,监听这个值变化
* @since 1.0.0
* @param {Function} downCb 当软键盘弹起后,缩回的回调
* @return {Function} upCb 当软键盘弹起的回调
*/
resize(func1,func2)
Draw (基础绘图)
createDraw 创建画布
import {createDraw} from 'utilo'
/**
* createDraw 创建画布
* @since 1.0.0
* @param {String} 元素id
* @param {Number} width 宽度
* @param {Number} height 高度
* @return {context}
*/
let cxt = createDraw()
drawText 写上文字
import {drawText} from 'utilo'
/**
* drawText 写上文字
* @since 1.0.0
* @param {String} 元素id
* @param {Number} width 宽度
* @param {Number} height 高度
* @return {context}
*/
drawText(ctx,0,100,'你好')
drawRoundRect 圆矩/圆形
import {drawRoundRect} from 'utilo'
/**
* drawRoundRect 圆矩形或圆形(填充)
* @since 1.0.0
* @param {context} ctx
* @param {Number} x x坐标
* @param {Number} y y坐标
* @param {Number} width 宽度
* @param {Number} height 高度
* @param {Number} radius 弧度
* @param {String} color 填充色 默认为黑色
* @param {String} border 边框大小 默认为0
* @param {String} borderColor 边框色 默认为黑色(需先设置边框大小)
*/
drawRoundRect(ctx,0,100,200,200,100) // 大小200px的黑色圆形
drawRoundRect(ctx,0,100,200,200,30) // 大小200px弧度30px的黑色圆矩
Format (格式化)
toDecimal 保留小数点几位 (四舍五入)
import {toDecimal} from 'utilo'
/**
* toDecimal 保留小数点${x}位 (会四舍五入)
* @since 1.0.0
* @param {Number} x
* @param {Number} val
* @return {Number}
*/
toDecimal(1.0088,3) // -> 1.009
toFloat 保留小数点几位 (截断)
import {toFloat} from 'utilo'
/**
* toFloat 保留小数点${x}位 (截断)
* @since 1.0.0
* @param {Number} x
* @param {Number | String} val
* @return {Number}
*/
toFloat(1.0088,3) // -> 1.008
filterZero 抹零
import {filterZero} from 'utilo'
/**
* filterZero 抹零
* @since 1.0.0
* @param {Number | String} val
* @return {Number}
*/
filterZero(1.200) // -> 1.2
money 千分位
import {money} from 'utilo'
/**
* money 千分位
* @since 1.0.0
* @param {Number | String} val 值
* @param {Number | String} x 保留小数点位数
* @return {String}
*/
money(13400) // -> 13,400
percent 百分比
import {percent} from "utilo";
/**
* percent 百分比
* @since 1.0.0
* @param {Number | String} val 值
* @return {String}
*/
percent(0.66) // -> 66%
hidden 隐藏字符
import {hidden} from "utilo";
/**
* hidden 隐藏字段
* @since 1.0.0
* @param {String} str
* @return {String}
*/
hidden(100) // -> *****
bankcard 格式化银行卡
import {bankcard} from 'utilo'
/**
* bankcard 格式化银行卡
* @since 1.0.0
* @param {String | Number} val
* @return {String}
*/
bankcard(6221882600114166800) // -> '6221 8826 0011 4166 800'
plusStr 在字段中间加特殊字符
import {plusStr} from 'utilo'
/**
* plusStr 在字段中间加特殊字符
* @since 1.0.0
* @param {String} str
* @param {Number} frontLen 起始不被遮盖的长度
* @param {Number} endLen 结尾不被遮盖的长度
* @param {String} hideStr 遮盖字符
* @return {String}
*/
plusStr('18812340000',3,4) //-> 188****0000
Function (函数)
throttle 函数节流
debounce 函数防抖
Keycode (按键值)
getKeyName 根据keycode获得键名
Number (数字)
accAdd 高精度加法
accSub 高精度减法
accMul 高精度乘法
accDiv 高精度除法
Password (密码)
pwdLevel 获取密码强度
Regexp (正则)
Random (随机) v1.0.3
import {rand} from 'utilo'
/*
* rand 随机数
* @since 1.0.0
* 1.0.3 move:Random module from Number
* add:decimalNum 新增小数随机
* @param {Number} minNum 最小值
* @param {Number} maxNum 最大值
* @param {Number} decimalNum 如需小数随机 需设置小数点后位数
* @return {Number}
*/
rand(1,10) // 随机1~10的整数
rand(0.05,1,2) // 随机0.05~1的保留两位的小数