@qisexin/utils-tool NPM

个人自用前端工具库

将工作中常用的一些方法封装成一个个小函数，持续丰富中

npm地址：https://www.npmjs.com/package/@qisexin/utils-tool

github 地址：https://github.com/2218675712/qisexin-utils

安装

// 安装
npm install '@qisexin/utils-tool

// 引入
import { toThousands } from '@qisexin/utils-tool';

项目特点

使用typescript编写，提供完整的类型定义文件
使用rollup打包，提供esm、cjs两种格式的文件
支持多入口打包，减轻体积

方法说明

toThousands 数字转换为千位分隔符形式
getActualWidthOfChars 通过canvas获取字符的实际宽度
generateRandomColor 生成随机颜色
getQueryString 获取url参数
copyToClipboard 复制文字到剪贴板
encodeValue 编码字符串
decodeValue 编码字符串
encodeObject 转义对象中的特殊字符
decodeObject 解码对象中的特殊字符
escapeRegExpObject 转义对象中含有正则中的特殊字符
checkAndCompleteDate 检查日期格式，没有时分秒补充 23:59:59
formatUUID 转换为带连字符的uuid字符串
scrollToAnchor 跳转锚点
mixedSort 中英文数字混合排序
convertSpecialNumbers 特殊数字转换(NaN/Infinity => 0)
convertEmptyNumber 空数字转换 0显示0 null undefined显示--
replaceKeys 修改对象/数组的键和值
bytesConverter 字节转其他单位
getRandomKey 生成一个随机的key
urlParamsToObject 将 URL 参数转换为对象
objectToUrlParams 将对象转换为 URL 参数
largeDataTooltipOptimization Echarts Tooltip的大量数据下formatter格式化

toThousands 数字转换为千位分隔符形式

/**
 * 数字转换为千位分隔符形式
 * @param x 传入的数字
 * @param digits 小数点位数
 * @return 千位分隔符形式的字符串
 * @example toThousands(1234567.89) => "1,234,567.89"
 */

getActualWidthOfChars 通过canvas获取字符的实际宽度

/**
 * 通过canvas获取字符的实际宽度
 * @param text 传入的字符串
 * @param options 可以传入字体大小，字体
 * @return 字符串实际像素
 * @example getActualWidthOfChars('性能数据') => 48
 */

generateRandomColor 生成随机颜色

/**
 * @description 生成随机颜色
 * @returns array<string> 随机color数组
 * @example generateRandomColor() => ['rgb(48, 62, 6)',...]
 */

getQueryString 获取url参数

/**
 * 获取url参数
 * @param name 参数名
 * @example getQueryString('p_from') => 'xxx'
 */

copyToClipboard 复制文字到剪贴板

/**
 * 复制到剪贴板 支持http请求
 * @param text
 * @example copyToClipboard('http://www.baidu.com')
 */

encodeValue 编码字符串

/**
 * 编码字符串
 * @param val 编码字符串
 * @example encodeValue('test?') => 'test%3F'
 */

decodeValue 解码字符串

/**
 * 解码字符串
 * @param val 解码字符串
 * @example decodeValue('test%3F') => 'test?'
 */

encodeObject 转义对象中的特殊字符

/**
 * 转义对象中的特殊字符 例: / => %2F
 * @param obj
 * @example encodeObject({cpu: 'intel i7',gpu:'rtx 4090'}) => {cpu: 'intel%20i7',gpu:'rtx%204090'}
 */

decodeObject 解码对象中的特殊字符

/**
 * 解码对象中的特殊字符
 * @param obj
 * @example decodeObject({cpu: 'intel%20i7',gpu:'rtx%204090'}) => {cpu: 'intel i7',gpu:'rtx 4090'}
 */

escapeRegExpObject 转义对象中含有正则中的特殊字符

/**
 * 转义对象中含有正则中的特殊字符
 * @param obj
 * @example escapeRegExpObject({a:'[lodash]'}) => {a:'\[lodash\]'}
 */

checkAndCompleteDate 检查日期格式，没有时分秒补充 23:59:59

/**
 * 检查日期格式，没有时分秒补充 23:59:59
 * @param dateString
 * @example checkAndCompleteDate('2020-01-01') => '2020-01-01 23:59:59'
 */

formatUUID 转换为带连字符的uuid字符串

/**
 * 转换为带连字符的uuid字符串
 * @param uuidStr uuid字符串
 * @returns {*|string}
 * @example formatUUID('e4b9e0e0e0e0e0e0e0e0e0e0e0e0e0e0') => 'e4b9e0e0-e0e0-e0e0-e0e0-e0e0e0e0e0e0'
 */

scrollToAnchor 跳转锚点

/**
 * 跳转锚点
 * @param anchorName id名称
 * @example scrollToAnchor('anchorName')
 */

mixedSort 中英文数字混合排序

/**
 * 中英文数字混合排序
 * @param _a
 * @param _b
 * 排序顺序 数字>字母>中文拼音
 * @example mixedSort('1','2') => -1
 */

convertSpecialNumbers 特殊数字转换(NaN/Infinity => 0)

/**
 * 特殊数字转换(NaN/Infinity => 0)
 * @param num
 * @example convertSpecialNumbers(NaN) => 0
 */

convertEmptyNumber 空数字转换 0显示0 null undefined显示--

/**
 * 空数字转换 0显示0 null undefined显示--
 * @param num
 * @example convertEmptyNumber(null) => '--'
 */

replaceKeys 修改对象/数组的键和值

/**
 * 修改对象/数组的 键和值
 * @param obj 对象或数组
 * @param keysMap 格式{ gender: 'sex' }
 * @returns {{}|*}
 * @example replaceKeys({'a':123},{a:'b'}) => {b:123}
 */

bytesConverter 字节转其他单位

/**
 * 字节转其他单位
 * @param bytes 字节数
 * @param unit 'B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'
 * @example bytesConverter(4*1024*1024,'MB') => 4
 */

urlParamsToObject 将 URL 参数转换为对象

/**
 * 将 URL 参数转换为对象
 * @param url URL 字符串
 * @returns 包含 URL 参数的对象
 * @example urlParamsToObject('https://www.baidu.com?a=1&b=2') => {a: '1', b: '2'}
 */

objectToUrlParams 将对象转换为 URL 参数

/**
 * 将对象转换为 URL 参数
 * @param params 包含参数的对象
 * @returns URL 参数字符串
 * @example objectToUrlParams({a: '1', b: '2'}) => 'a=1&b=2'
 */

largeDataTooltipOptimization Echarts Tooltip的大量数据下formatter格式化

/**
 * Echarts Tooltip的大量数据下formatter格式化
 * @param params params
 * @param labelField label字段
 * @param rowsPerColumn 每列显示的行数
 * @param defaultColumnWidth 默认列宽
 * @return html标签字符串
 * @example formatter: (params) => largeDataTooltipOptimization(params, 'device', 10, 200)
 */

antd相关工具使用方法

⚠️注意: 使用antd-utils时，需要在项目中安装 'react', 'react-dom', 'antd'并从@qisexin/utils-tool/antd-utils内引入方法

CopyToClipboard 复制到剪贴板
downloadXlsxPro 前端下载xlsx
getColumnSearchProps antd table 加入本地搜索

CopyToClipboard 复制到剪贴板

import { CopyToClipboard } from "'@qisexin/utils-tool/antd-utils";
<CopyToClipboard copyText={'复制内容'}>点我复制</CopyToClipboard>

downloadXlsxPro 前端下载xlsx 参考地址

getColumnSearchProps antd table 加入本地搜索

import { getColumnSearchProps } from '@qisexin/utils-tool/antd-utils';
//antd table columns配置
[{
    title: 'Name',
    dataIndex: 'name',
    key: 'name',
    width: '30%',
    ...getColumnSearchProps('name'),
}]

antd dayjs lodash-es react xlsx-js-style

@everything-registry/sub-chunk-748

12 months ago

1 year ago

1 year ago

1 year ago

1 year ago