0.1.0 • Published 2 years ago
vet-function v0.1.0
vet-function
常用工具函数封装。
安装
npm install vet-function --save
npm install lodash --save
使用
import {*} from 'vet-function'
typeOf
判断数据类型
typeOf(1); //number
typeOf(NaN); //number
typeOf(Number.MIN_VALUE); //number
typeOf(Infinity); //number
typeOf("123"); //string
typeOf(true); //boolean
typeOf([1, 2, 3]); //array
typeOf({ a: "123" }); //object
typeOf(null); //null
typeOf(() => {}); //function
typeOf(new Date()); //date
typeOf(/[1-9]\d*/); //regExp
typeOf(undefined); //undefined
uuid
生成唯一标识符
/**
* @param {number} len 生成字符串长度 默认生成 xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx
* @param {number} radix 基数最长62
* @returns {string}
*/
uuid(); //6DF4310F-0FEC-4118-AC0A-C6A62AD0A87C
uuid(10); //yK0JhYuaom
uuid(10, 20); //914HJ3DBGJ
random
生成范围随机数
/**
* @param {number} [min=0] 上限
* @param {number} [max=100] 下限
* @param {boolean} [float=false] 指定是否返回浮点数
* @returns {number}
*/
random(); //23
random(1111, 9999); //6754
random(1111, 9999, true); //6754.755438921718
zeroFill
数字补零
/**
* 数字补零
* @param {number} num 数字
* @param {number} len 几位数
* @returns {string}
*/
zeroFill(5, 2) // '05'
zeroFill(5, 3) // '005'
money
格式化金额
/**
* 格式化金额
* @param {number} number 要格式化的数字
* @param {number} decimals 保留几位小数
* @param {string} dec_point 小数点符号
* @param {string} thousands_sep 千分位符号
* @returns {string}
*/
money.format(13453.5); //'13,453.50'
/**
* 还原金额格式
* @param {string} str=',' 需要还原的字符串
* @returns {number}
*/
money.former("13,453.50"); //13453.5
dom
/**
* 检查样式是否存在 hasClass
* @param {Object} el 目标dom
* @param {String} cls 样式名
* @returns {Boolean}
*/
dom.hasClass(el, "class");
/**
* 添加样式 addClass
* @param {Object} el 目标dom
* @param {String} cls 样式名
* @returns
*/
dom.addClass(el, "class");
/**
* 删除样式 removeClass
* @param {Object} el 目标dom
* @param {String} cls 样式名
* @returns
*/
dom.removeClass(el, "class");
/**
* 获取所有样式属性和值 getStyle
* @param {Object} el 目标dom
* @param {String} name 样式属性名
* @returns {CSSStyleDeclaration,Strine}
*/
dom.getStyle(el, "width"); // 100px
dom.getStyle(el); // [CSSStyleDeclaration] 如果没有传入样式属性名,返回所有样式的集合
/**
* 给 dom 设置样式 第二个参数可以传入一个对象,这时 value 忽略
* @param {Object} el 目标dom
* @param {String,Object} name 样式
* @param {String} value 样式值
* @returns
*/
dom.setStyle(el, "width", "100px");
//第二个参数可以传入一个对象,这时value忽略
dom.setStyle(el, {
width: "100px",
height: "100px",
});
cookie
/**
* @method set
* @param {String} key 键名
* @param {String,Object,Array} value 需要保存的值
* @param {Number} seconds 到期时间(秒),默认为24小时
*/
cookie.set("name", "xiaoyi");
cookie.set("user", { name: "xiao yi" });
cookie.set("arr", [1, 2, 3]);
cookie.set("age", 18, 60 * 60 * 24);
/**
* @method get
* @param {String} key 键名
* @param {Boolen} isJson 是否是JSON数据
*/
cookie.get("name"); // 'xiaoyi'
cookie.getJSON("user"); // { name: "xiao yi" }
cookie.getJSON("arr"); // [1, 2, 3]
/**
* @method remove
* @param {String} key 键名
*/
cookie.remove("name"); //删除name
/**
* @method clear
*/
cookie.clear(); //清除所有数据
toTree
数据转换为树形(递归)
/**
* 数据转换为树形(递归)
* @param {Array} list 基础数组
* @param {String} id 子级id名,默认'id'
* @param {String} parentId 父级id名,默认'parentId'
* @param {String} children 树形数据子数据的属性名,默认'children'
* @returns {Array}
*/
let list = [
{
id: 1,
name: "一级",
parentId: 0,
},
{
id: 2,
name: "二级",
parentId: 1,
},
];
toTree(list, "id", "parentId", "children");
// =>
// {
// id: 1,
// name: "一级",
// parentId: 0,
// children: [
// {
// id: 2,
// name: "二级",
// parentId: 1,
// children:[]
// }
// ]
// }
flatTree
树形数据结构的扁平化
/**
*
* @param {Array} arrs 树形数据
* @param {string} childs 树形数据子数据的属性名,常用'children'
* @param {Array} attrArr 需要提取的公共属性数组(默认是除了childs的全部属性)
* @returns {Array}
*/
var list = [
{
a: 1,
b: 2,
c: 1,
children: [
{
a: 1,
b: 2,
c: 1,
children: [{ a: 11, b: 21, c: 21 }],
},
],
},
];
flatTree(list, "children", ["a", "b"]);
// =>
// [
// {
// "a": 1,
// "b": 2
// },
// {
// "a": 1,
// "b": 2
// },
// {
// "a": 11,
// "b": 21
// }
// ]
comp
该工具只适用 vue2 的项目
/**
* 向上找到最近的指定组件 findParent
* @param {Object} context 指定组件
* @param {String} componentName 组件名
* @returns
*/
comp.findParent(context, componentName);
/**
* 向上找到所有的指定组件 findParents
* @param {Object} context 指定组件
* @param {String} componentName 组件名
* @returns
*/
comp.findParents(context, componentName);
/**
* 向下找到最近的指定组件 findChild
* @param {Object} context 指定组件
* @param {String} componentName 组件名
* @returns
*/
comp.findChild(context, componentName);
/**
* 向下找到所有指定的组件 findChilds
* @param {Object} context 指定组件
* @param {String} componentName 组件名
* @returns
*/
comp.findChilds(context, componentName);
/**
* 找到指定组件的兄弟组件 findBrothers
* @param {Object} context 指定组件
* @param {String} componentName 组件名
* @returns
*/
comp.findBrothers(context, componentName);
官方使用文档
0.1.0
2 years ago