@micl/util

一个轻量、实用的前端工具函数集合，提供 类型判断、数学计算、文件处理、全屏控制、本地存储 等常用能力，全部使用 TypeScript 声明，开箱即用。

📦 安装

npm install @micl/util
# or
pnpm add @micl/util
# or
yarn add @micl/util

📚 模块目录

• Util 工具函数
• Color 颜色工具
• Svg 矢量图工具
• Math 数学工具
• Is 类型判断
• FileHandler 文件处理
• Fullscreen 全屏工具
• Storage 本地存储

Util 工具函数

import { 
	clone,
	deepClone,
	loadScript,
	loadStyle,
	getQuery,
	getCookie,
	getTransId,
	formatTimeStamp
} from '@micl/util'

Color 颜色工具

import { 
	hexToRgb,
	rgbToHex,
	darken,
	lighten
} from '@micl/util'

hexToRgb / rgbToHex

判断是否为十六进制颜色值

hexToRgb('#ffffff')

rgbToHex('rgb(255,0,0)')

darken / lighten

颜色值加深/变浅

darken('#090909', 0.9)

lighten('#090909', 0.1)

Svg 矢量图工具

import { getSvgInfo } from '@micl/util'

interface SvgInfo {
	/** SVG的宽度，基于`viewBox`属性的第三个值 */
	width: number;
	/** SVG的高度，基于`viewBox`属性的第四个值 */
	height: number;
	/** SVG中所有`<path>`元素的`outerHTML`连接而成的字符串 */
	body: string;
}

Math 数学工具

import { max, min, sum, average } from '@micl/util'

max / min

max([1, 2, 3]) // 3
min([1, 2, 3]) // 1

sum / average

sum([1, 2, 3]) // 6
average([1, 2, 3]) // 2

numberToChinese

numberToChinese(1024) // 一千零二十四

addition / subtraction / multiplication / divisionOperation

解决 JS 浮点数精度问题

addition(0.1, 0.2) // 0.3

formatBytes

formatBytes(1024) // 1 KB

Is 类型判断

import { isString, isNumber, isArray, isEmpty } from '@micl/util'

基础类型

• isString
• isNumber
• isBoolean
• isFunction
• isArray
• isObject
• isPlainObject
• isDate
• isRegExp
• isPromise

空值判断

• isDef
• isUnDef
• isNull
• isNullAndUnDef
• isNullOrUnDef
• isEmpty
• isAllEmpty

环境判断

• isServer
• isClient
• isBrowser
• isWindow
• isElement

格式校验

• isUrl
• isEmail
• isPhone
• isPostCode
• isQQ
• isJSON
• isHtml
• hasCNChars
• isLowerCase / isUpperCase / isAlphabets
• isExistSpace
• isBase64
• isHex / isRgb / isRgba

FileHandler 文件处理

import { downloadFile, downloadZip } from '@micl/util'

downloadFile

downloadFile(url, { name: 'demo.jpg', type: 'image/jpeg' })

downloadByUrl

downloadByUrl(url, 'test.png')

downloadZip

批量下载并打包 zip

downloadZip([{ url, name }], 'files.zip')

工具方法

• file2blob
• getFileType
• formatFileType
• getFileNameWithoutExtension

Fullscreen 全屏工具

import { openFullscreen, exitFullScreen } from '@micl/util'

openFullscreen

openFullscreen(document.documentElement)

exitFullScreen

exitFullScreen()

滚动相关

• getScrollTop
• getScrollHeight
• getWindowHeight

Storage 本地存储

vueStorage

支持命名空间、Vue2 / Vue3，挂载到全局变量$storage

import { Storage } from '@micl/util';

const memory = {
	locales: {
		locales: 'zh'
    },
    theme: {
		theme: 'dark'
    }
}

app.use(Storage, {
	nameSpace: 'micl-',
	memory: memory
})

console.log($storage.locales.locales)
// zh

$storage.locales =  {
	locales: 'en'
}
console.log($storage.locales.locales)
// en

// 全静态方法，挂载后也可以通过获取或赋值
Storage.getData('locales')

LocalStorageUtil

支持命名空间，通用的localStorage二次封装

import { LocalStorageUtil, storage } from '@micl/util'

const storage = new LocalStorageUtil('micl-')

storage.set('token', 'xxx')
storage.get('token')
storage.remove('token')
storage.clear()

📄 License

ISC