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);

官方使用文档

http://vue.xhuiteng.com/vet-function