comp-wrap-kit

这是一个前端常用工具类和样式快速开发包，从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 环境
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>
<script>
  console.log(tools.isNull('')); // true
</script>

ES6 模块 (通过构建工具)

import tools from 'comp-wrap-kit/lib/index';
console.log(tools.isNull({})); // false

方法说明

存储相关方法

• localStoragePlus：增强型本地存储工具，支持命名空间隔离。
• sessionStoragePlus：增强型会话存储工具，支持命名空间隔离。
• cookiePlus：增强型 Cookie 操作工具，支持命名空间隔离。

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

• setItem：设置存储项
• getItem：获取存储项
• removeItem：移除存储项
• clear：清空存储
• length：获取存储长度

通用工具方法

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]：padding 相关类
• [m, t/r/b/l]：margin 相关类
• 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：字体大小类
• 枚举值：[10, 12, 14, 16, 18, 20, 22, 24]

行高类

• lh-x-x：行高类
• 枚举值：[0.8, 1, 1.2, 1.5, 1.8, 2]

层级类

• z：z-index 类
• 枚举值：[0, 10...50]

Flex 布局类

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

顺序类

• order：顺序类
• 枚举值：[first(-1), 1, 2, 3, last(999)]

边框类

• border：边框类
• border-t/r/b/l：方向边框类
• border-x：边框宽度类（枚举值：2, 3, 4）
• border-gray-x：边框颜色类（枚举值：1-9）

联系方式

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