这是一个前端常用工具类和样式快速开发包，从comp-wrap项目中提取出工具类（StoragePlus、CookiePlus、Tools）和样式文件（基于4/8倍数的样式库），适合任何前端项目......

安装组件

• npm install comp-wrap-kit

引入组件

- 全局注册样式文件
import 'comp-wrap-kit/lib/base.css'
- 引入常用开发工具类
import tools from "comp-wrap-kit/lib/index";
- 引入增强型存储工具类
import { localStoragePlus, sessionStoragePlus, cookiePlus  } from "comp-wrap-kit/lib/storage";


- 因为不仅仅支持vue2还支持node等其他方式使用，不提供全局install方式；希望全局使用，可以挂载原型链或者window对象
Vue.prototype.$tools = tools; 或 window.tools = tools;

/**
* CommonJS (Node.js 环境)
* const tools = require('comp-wrap-kit/lib/index');
* console.log(tools.isNull(null)); // true
*/

/**
* AMD (异步模块定义)
* define(['comp-wrap-kit/lib/index'], function(tools) {
*   console.log(tools.isNull(undefined)); // true
});
*/

/**
* 浏览器全局变量————自执行函数已导出工具函数
* <script src="xxx/comp-wrap-kit/lib/index"></script>
* console.log(tools.isNull('')); // true
*/

/**
* ES6 模块 (通过构建工具)
* import tools from 'comp-wrap-kit/lib/index';
* console.log(tools.isNull({})); // false
*/

方法说明

• Vue.prototype.$localStoragePlus 增强型本地存储工具，支持命名空间隔离。

• Vue.prototype.$sessionStoragePlus 增强型会话存储工具，支持命名空间隔离。

• Vue.prototype.$cookiePlus 增强型 Cookie 操作工具，支持命名空间隔离。

• 提供以下方法，并内部通过序列化的判断，兼容存储字符串和js对象（原生方法只支持字符串）。

• setItem

• getItem

• removeItem

• clear

• length

• Vue.prototype.$tools 提供通用工具方法集合，如日期格式化、字符串处理等。

 return {
    // 判断类
    isNull, // 判空
    isArray,
    isObject,
    isFunction,
    isString,
    isNumber,
    isUrl,
    isWeixin, // 微信内置浏览器(无参)

    // 验证类--Reg
    validCreditCode,
    validPassWord,
    validEmail,
    validPhone, // 验证联系方式（座机+手机）
    validMobile,
    validCardNo(cardType = '01', cardNo), // 验证证件号码 01默认身份证
    validDate, // 判断是否为有效日期

    // 通用方法
    uniqueArray, // 数组去重
    deepClone, // 深度克隆
    copyText, // 复制文本到剪贴板
    sleep, // 休眠（Promise） (ms)
    maskedStr, // 掩码字符串（脱敏） (str, type = null, options = {})  type [mobile, idCard, name, email, bankCard, address]

    // 随机数
    getRandom, // 获取随机数(0,100)
    getUuid, // 获取uuid  无参，36位

    // 日期/时间处理
    getYearCurr, // 获取当前年份  (plus = 0)  偏移量
    getYearRange, // 获取指定时间范围  (length, plus = 0, step = 1)
    getDatePicker, // 日期格式处理 (timestamp, format = 'yyyy/MM/dd', defaultValue = '--')
    getIdCardInfo, // 身份证获取性别生日  (idCard, type)  1-生日，2-性别，3-年龄
    birthDateToYear, // 获取至今的年龄月龄  (birth, type = 'yy', appointDate = '')  appointDate为相对传入时刻

    // 金额处理
    formatMoney, // 金额格式化(千位加逗号)   (num, currency = '¥')  支持负数
    toChinesNum, // 数字转大写汉字  (num)

    // 系列化-反序列化
    parseQueryParams, // 获取url参数（不传获取当前url, 支持完整URL、相对路径、查询字符串）
    serializeParams, // 参数序列化(同parseQueryParams相反)

    // 设备信息
    getDeviceType,// 获取设备类型 tablet/mobile/desktop
    getBrowserInfo, // 获取浏览器信息(Chrome/Firefox/Safari/Edge/Internet Explorer)

    // 节流防抖
    throttle, // 节流函数（点击防重）————节流会先执行一次, 防抖不会
    debounce, // 防抖函数（窗口滚动）

    // 深层次对象操作
    deepMerge, // 深度合并对象（返回合并后对象，不修改原对象）
    deepEqual, // 深度比较对象是否相等
    deepGet, // 获取对象深层次属性值

    // 树形结构处理
    tranListToTreeData,  (arr, id = 'id', pId = 'pId')
    getTreeLastLevel,
 } 

这些工具方法也挂载到了全局对象 window 上，可以直接通过 window.tools、window.localStoragePlus 等方式访问。

样式说明

• 设计风格：0/4/8/12/16/(20)/24/(32) 4/8倍数非线性

• [p, t/r/b/l], [m, t/r/b/l], gap, 枚举[4/8倍数——0/4/8/12/16/20/24/32]

• radius枚举[radius-25/50-p, 4/8倍数——0/4/8/12/16/20/24/32]

• text(font-size)[10, 12, 14, 16, 18, 20, 22, 24]

• lh-x-x(line-height)枚举[0.8, 1, 1.2, 1.5, 1.8, 2]

• z(z-index)枚举[0, 10...50]

• flex枚举[none——定尺寸不伸缩, auto——内容自适应, full——占满, 1——纯比例分配, 2, 3]

• order枚举[first(-1), 1, 2, 3, last(999)] *-

• border, border-t/r/b/l

• border-x(border-width)枚举(2, 3, 4)————覆盖border宽度

• border-gray-x(border-color)枚举(1-9)————覆盖border颜色

联系方式

• 邮箱：[email protected]
• 微信：tcheng8866