Lion Vue

一个功能丰富的前端工具库，提供常用的字符串、数组、对象、日期、验证、存储、格式化等工具函数。

安装

npm 安装

npm install lion-vue

yarn 安装

yarn add lion-vue

CDN 引入

<!-- unpkg CDN -->
<script src="https://unpkg.com/lion-vue@latest/dist/lion-vue.umd.js"></script>

<!-- 或指定版本 -->
<script src="https://unpkg.com/[email protected]/dist/lion-vue.umd.js"></script>

使用方式

ES6 模块

import { capitalize, formatDate, isEmail } from 'lion-vue'

// 字符串工具
console.log(capitalize('hello world')) // "Hello world"

// 日期工具
console.log(formatDate(new Date())) // "2024-01-01 12:00:00"

// 验证工具
console.log(isEmail('[email protected]')) // true

CommonJS

const LionVue = require('lion-vue')

console.log(LionVue.capitalize('hello world'))
console.log(LionVue.formatDate(new Date()))
console.log(LionVue.isEmail('[email protected]'))

浏览器全局变量

<script src="https://unpkg.com/lion-vue@latest/dist/lion-vue.umd.js"></script>
<script>
  // 全局变量 LionVue
  console.log(LionVue.capitalize('hello world'))
  console.log(LionVue.formatDate(new Date()))
  console.log(LionVue.isEmail('[email protected]'))
</script>

API 文档

字符串工具

• capitalize(str) - 首字母大写
• camelCase(str) - 驼峰命名转换
• kebabCase(str) - 短横线命名转换
• randomString(length) - 生成随机字符串
• maskString(str, start, end, mask) - 字符串脱敏处理
• trim(str) - 去除字符串两端空白字符
• trimAll(str) - 去除字符串中所有空白字符

数组工具

• unique(arr) - 数组去重
• uniqueBy(arr, key) - 根据指定字段去重
• chunk(arr, size) - 数组分块
• flatten(arr, depth) - 数组扁平化
• intersection(arr1, arr2) - 数组交集
• difference(arr1, arr2) - 数组差集
• union(arr1, arr2) - 数组并集
• groupBy(arr, key) - 数组分组
• sortBy(arr, key, order) - 数组排序

对象工具

• deepClone(obj) - 深拷贝对象
• merge(target, ...sources) - 对象合并
• deepMerge(target, source) - 深度合并对象
• get(obj, path) - 获取对象指定路径的值
• set(obj, path, value) - 设置对象指定路径的值
• pick(obj, keys) - 对象属性选择
• omit(obj, keys) - 对象属性排除
• isEmpty(obj) - 判断对象是否为空
• invert(obj) - 对象键值对反转

日期工具

• formatDate(date, format) - 格式化日期
• getRelativeTime(date) - 获取相对时间
• isToday(date) - 判断是否为今天
• isYesterday(date) - 判断是否为昨天
• getDateRange(start, end) - 获取日期范围
• addDate(date, amount, unit) - 日期加减
• getFirstDayOfMonth(date) - 获取月份第一天
• getLastDayOfMonth(date) - 获取月份最后一天
• isLeapYear(year) - 判断是否为闰年
• getDaysDiff(start, end) - 获取两个日期之间的天数差

验证工具

• isEmail(email) - 验证邮箱
• isPhone(phone) - 验证手机号
• isIdCard(idCard) - 验证身份证号
• isUrl(url) - 验证URL
• isIP(ip) - 验证IP地址
• isNumber(num) - 验证数字
• isInteger(num) - 验证整数
• isPositiveInteger(num) - 验证正整数
• getPasswordStrength(password, minLength) - 验证密码强度
• isBankCard(cardNumber) - 验证银行卡号
• isChineseName(name) - 验证中文姓名
• isPostalCode(postalCode) - 验证邮政编码

存储工具

• setLocalStorage(key, value) - 设置localStorage
• getLocalStorage(key, defaultValue) - 获取localStorage
• removeLocalStorage(key) - 移除localStorage
• clearLocalStorage() - 清空localStorage
• setSessionStorage(key, value) - 设置sessionStorage
• getSessionStorage(key, defaultValue) - 获取sessionStorage
• removeSessionStorage(key) - 移除sessionStorage
• clearSessionStorage() - 清空sessionStorage
• setCookie(name, value, days) - 设置Cookie
• getCookie(name) - 获取Cookie
• deleteCookie(name) - 删除Cookie
• isStorageAvailable(type) - 检查存储是否可用
• StorageManager - 存储管理器类

格式化工具

• formatNumber(num, decimals) - 格式化数字（千分位分隔）
• formatCurrency(amount, currency, decimals) - 格式化货币
• formatFileSize(bytes, decimals) - 格式化文件大小
• formatPercent(value, decimals) - 格式化百分比
• formatPhone(phone) - 格式化手机号
• formatBankCard(cardNumber) - 格式化银行卡号
• formatIdCard(idCard) - 格式化身份证号
• formatName(name) - 格式化姓名（脱敏）
• formatAddress(address, keepStart, keepEnd) - 格式化地址（脱敏）
• formatTimeDiff(startTime, endTime) - 格式化时间差
• formatJSON(obj, space) - 格式化JSON
• formatUrlParams(params) - 格式化URL参数
• formatColor(color) - 格式化颜色值

示例

查看 examples/ 目录下的示例文件：

• unpkg.html - unpkg CDN 使用示例
• npm-usage.js - npm 包使用示例

开发

# 安装依赖
npm install

# 开发模式
npm run dev

# 构建
npm run build

# 预览构建结果
npm run preview

# 代码检查
npm run lint

# 代码检查并修复
npm run lint:fix

许可证

MIT

版本

当前版本：1.0.0