Common-toolbox

专注服务于Vue项目的可复用工具库

目前仅支持前端项目，不支持纯Node.js项目【后续会修复这个问题】

Axios相关API

Usage

import { createAxios } from 'common-toolbox'
import { getToken } from './token.js'
import router from '../router/index.js'
import { ElMessage } from 'element-plus'

// messageTip可以自己进行封装
// 例如
const messageTip = ({type, message}) => {
  alert(message)
  console.log('type: ', type)
}

// example
const axios = createAxios({
  baseURL: '',
  timeout: 50000,
  tokenName: 'token',
  getToken: getToken,
  router,
  messageTip: ElMessage
})

export default axios

// use axios
import axios form './utils/axios.js'

export const getList = (params) => {
  return axios.post(url, params, config)
}
// config可选可配置

API

API	USAGE	REMARK
createAxios	const axios = createAxios(options)	生成axios实例
...	...	...

DOM处理相关API

Usage

import { domHandler } from 'common-box'

// vue main.js
domHandler.setFontSize()

// some page need setting fullscreen
const play = () => {
  domHandler.settingFullscreen()
}

// more ...

API

API	USAGE	REMARK
setFontSize	setFontSize()	以1920*1080为基准设置自适应
settingFullscreen	settingFullscreen()	开启与关闭全屏
on	on(window, 'resize', resize)	用于Echart图表随窗口大小自适应
off	off(window, 'resize', resize)	用于Echart图表随窗口大小自适应
...	...	...

Form表单校验相关API

Usage

import { validator } from 'common-toolbox'

//example
const trueOrFalseOfMobile = validator.isMobile(userPhone)

const trueOrFalseOfIdCard = validator.isIdCard(userIdCard)

// more ...

说明

• 邮箱、手机号、身份证号、中文姓名、密码复杂度等的校验函数返回均为Boolean类型，并没有专门去适配Element-ui、Element-plus、Vant等UI框架，使用时应根据个人需求通过包装下面这些函数实现适配UI框架的校验函数

API

API	USAGE	REMARK
isMobile	isMobile(value): boolean	用于校验手机号
isEmail	isEmail(value): boolean	用于校验邮箱号
isName	isName(value): boolean	用于校验中文姓名
isIdCard	isIdCard(value): boolean	用于校验身份证号
passwordComplexityValidate	passwordComplexityValidate(value, messageTool): boolean	用于校验密码的复杂程度是否符合，messageTool参数是个消息提示弹窗实例或者函数
isDate	isDate(value): boolean	用于校验日期
isNumeric	isNumeric(value): boolean	判断值是否为数字
isNaN	isNaN(value): boolean	判断值是否为NaN
inBrowser	inBrowser(): boolean	判断是否为浏览器
isAndroid	isAndroid(): boolean	判断是否为安卓
isIOS	isIOS(): boolean	判断是否为IOS
...	...	...

File处理相关API

fileHandler

Usage

import { fileHandler } from 'common-toolbox'

// example
const downloadWord = async () => {
  const res = await axios.get('/api/download/file?id')
  if (res.success) {
    fileHandler.blobFile(res, 'example.docx', 'application/vnd.openxmlformats-officedocument.wordprocessingml.document' )
  }
}

API

API	USAGE	REMARK
dataURLtoFile	const file = dataURLtoFile(url, filename)	将URL转为file
blobFile	blob(url, name, type)	下载文件，name: 下载存储的文件名；type: 下载的文件类型
...	...	...

nodeFileHandler

Usage

import { nodeFileHandler } from 'common-toolbox'

// example
nodeFileHandler.isFileExist('/path')

nodeFileHandler.getFolderExcludeSome('parentPath', /^example/)

API

API	USAGE	REMARK
isFileExist	isFileExist(path): boolean	判断文件是否存在
getFolderExcludeSome	getFolderExcludeSome(parentPath, excludeRegex): Promise<string[]>	获取parentPath下的除了excludeRegex正则表达式包含的目录
hasFolder	hasFolder(parentPath, excludeRegex, name): boolean	判断参数name的目录是否存在
...	...	...

Cookie与LocalStorage相关API

Usage

import { cookieAndStorage } from 'common'

// example
const cs = cookieAndStorage

cs.getLocalStorage('userInfo')
cs.setLocalStorage('userInfo', info)
cs.clearAllLocalStorage()

cs.getCookie('token')
cs.setCookie('token', token)
cs.clearAllCookies()

cs.clearAllStorage()

API

API	USAGE	REMARK
getLocalStorage	getLocalStorage(key)
setLocalStorage	setLocalStorage(key, data)
removeLocalStorage	removeLocalStorage(key)
clearAllLocalStorage	clearAllLocalStorage()
getCookie	getCookie(key)
setCookie	setCookie(key, value, expires)
removeCookie	removeCookie(key)
clearAllCookies	clearAllCookies()
clearAllStorage	clearAllStorage()
...	...	...

Browser处理相关API

Usage

import { browserHandler } from 'common-toolbox'
import { ElMessage } from 'element-plus'

// example
browserHandler.getPositionByGeolocation(ElMessage)

API

API	USAGE	REMARK
getPositionByGeolocation	getPositionByGeolocation(messageTool): {Promise<Object>	获取定位坐标；messageTool参数应传入一个消息弹窗实例或函数
...	...	...

Date相关接口

Usage

import { dateHandler } from 'common-toolbox'

// example
const date = dateHandler.getDateAndWeek()
console.log(date)
/**
 * date: '2023年5月1日'
 * week: '周一'
 * time: '12:45'
 */

API

API	USAGE	REMARK
getDateAndWeek	const date = getDateAndWeek()	返回当前日期与周几
...	...	...

Encrypt加密相关API

Usage

import { createEncrypter, encryptHandler } from 'common-toolbox'

// example
const PUBLIC_KEY = 'PUBLIC_KEY'

export const setRas = createEncrypter(PUBLIC_KEY)

// 通过*加密文本，例如手机号、邮箱
const encodeMobile = encryptHandler.encryptText('13356789900', 'mobile', '请绑定手机号')

const encodeEmail = encryptHandler.encryptEmail('[e-mail]', '请绑定邮箱')

API

API	USAGE	REMARK
createEncrypter	const setRAS = createEncrypter(publicKey)	目前使用JSEncrypt进行加密
encryptText	encodeText = encryptText(text, flag, tipText)	通过*对指定文本进行加密
encryptName	encodeName = encryptName(name, tipText)	通过*对指定中文姓名进行加密
encryptMobile	encodeMobile = encryptMobile(mobile, tipText)	通过*对指定手机号进行加密
encryptEmail	encodeEmail = encryptEmail(email, tipText)	通过*对指定邮箱进行加密
...	...	...

其他API

Usage

import { getPdf, sleep } from 'common-toolbox'

// example
// type: file: 表示下载pdf
// type: base64: 表示生成base64码
const pdfBase64 = getPdf('#container', 'base64', 'example-pdf')

const sleepPromise = sleep(50000)

// more ...

API

API	USAGE	REMARK
getPdf	getPdf(ref, type, title)	将指定div元素转为pdf
sleep	sleep(timeout)	设置休眠时间，返回promise
getType	getType(value)	返回value的类型
...	...	...

打包方式

• 目前打包成两种格式：
  • ESM
  • CJS

Examples

- examples/vue3-example

# dev
pnpm dev

补充

进行中...