@byd-modules/utils

碧有单通用工具方法库

项目介绍

@byd-modules/utils 是一个基于 TypeScript 编写的通用工具方法库，提供了多种常用功能模块，包括字典处理、表单验证和文件操作等，用于简化前端开发中的常见任务。

安装

# 使用 npm
npm install @byd-modules/utils

# 使用 yarn
yarn add @byd-modules/utils

# 使用 pnpm
pnpm add @byd-modules/utils

发布

# 更新版本
更新packages.json中的版本号

# 构建项目
npm run build

# 发布到 npm
npm publish

导入方式

ES Module 导入

import { getOptionsByDict, downloadBlobAsFile, validatorReg } from '@byd-modules/utils';

CommonJS 导入

const { getOptionsByDict, downloadBlobAsFile, validatorReg } = require('@byd-modules/utils');

工具方法说明

1. 字典处理工具 (dictHandler)

getOptionsByDict

将字典对象转换为选项数组，适用于表单下拉框等场景。

参数：

• dict: 字典对象，格式为 { [key: string]: { value: string, label: string, [key: string]: string | number } }

返回值：

• 选项数组，格式为 { value: string, label: string, [key: string]: string | number }[]

示例：

import { getOptionsByDict } from 'byd-common-utils';

const statusDict = {
  active: { value: '1', label: '激活', color: 'green' },
  inactive: { value: '0', label: '禁用', color: 'gray' },
};

const options = getOptionsByDict(statusDict);
// 结果: [{ value: '1', label: '激活', color: 'green' }, { value: '0', label: '禁用', color: 'gray' }]

getDictValueLabelMap

创建值到标签的映射对象，支持自定义标签名。

参数：

• dict: 字典对象，格式同上
• labelName: 可选，自定义标签字段名，默认为 'label'

返回值：

• 映射对象，格式为 { [key: string]: string | number }

示例：

import { getDictValueLabelMap } from 'byd-common-utils';

const statusDict = {
  active: { value: '1', label: '激活' },
  inactive: { value: '0', label: '禁用' },
};

const labelMap = getDictValueLabelMap(statusDict);
// 结果: { '1': '激活', '0': '禁用' }

// 使用自定义标签名
const customDict = {
  active: { value: '1', name: '激活状态' },
  inactive: { value: '0', name: '禁用状态' },
};

const customLabelMap = getDictValueLabelMap(customDict, 'name');
// 结果: { '1': '激活状态', '0': '禁用状态' }

2. 文件操作工具 (fileHandler)

downloadBlobAsFile

将 Blob 对象下载为文件。

参数：

• result: Blob 对象
• exportName: 导出的文件名

示例：

import { downloadBlobAsFile } from 'byd-common-utils';

// 创建一个文本 Blob
const textBlob = new Blob(['这是文件内容'], { type: 'text/plain' });

// 下载文件
downloadBlobAsFile(textBlob, 'example.txt');

base64ToFile

将 base64 编码的数据转换为 File 对象。

参数：

• base64Data: base64 编码的字符串，格式为 'data:MIME_TYPE;base64,DATA'
• filename: 文件名

返回值：

• File 对象

示例：

import { base64ToFile } from 'byd-common-utils';

// 简单的 base64 编码文本 "test"
const base64Data = 'data:text/plain;base64,dGVzdA==';

const file = base64ToFile(base64Data, 'test-file.txt');
// file.name === 'test-file.txt'
// file.type === 'text/plain'

base64ToBlob

将 base64 编码的数据转换为 Blob 对象。

参数：

• base64Data: base64 编码的字符串，格式同上

返回值：

• Blob 对象

示例：

import { base64ToBlob } from 'byd-common-utils';

const base64Data = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=';

const blob = base64ToBlob(base64Data);
// blob.type === 'image/png'

3. 表单验证工具 (formValidator)

validatorReg

常用的验证正则表达式集合：

| 正则名称 | 描述 | 正则表达式 | |---------|------|-----------| | positiveNumberWithoutZero | 不超过两位小数的正数（不含0） | /^(([1-9][0-9]*)|(([0]\.\d{1,2}\|[1-9][0-9]*\.\d{1,2})))$/ | | positiveNumberWithZero | 不超过两位小数的正数（含0） | /^((0{1})\|([1-9][0-9]*)\|(([0]\.\d{1,2}\|[1-9][0-9]*\.\d{1,2})))$/ | | positiveIntegerWithZero | 正整数及0 | /^((0{1})\|([1-9][0-9]*))$/ | | positiveIntegerWithoutZero | 正整数 | /^([1-9][0-9]*)$/ | | negativeInteger | 负整数 | /^-([1-9][0-9]*)$/ | | phoneLength | 11位手机号码 | /^([0-9]{11})$/ | | decimalTwo | 不超过两位小数的数字（含0和负数） | /^([-]{0,1})((0{1})\|([1-9][0-9]*)\|(([0]\.\d{1,2}\|[1-9][0-9]*\.\d{1,2})))$/ | | letterNumber | 数字或字母 | /^([0-9a-zA-Z]{1,})$/ | | fractionReg | 分数 | /^([1-9][0-9]*\/[1-9][0-9]*)$/ |

示例：

import { validatorReg } from 'byd-common-utils';

// 验证手机号码
const phone = '13800138000';
const isValidPhone = validatorReg.phoneLength.test(phone);
// isValidPhone === true

// 验证正整数
const number = '123';
const isValidPositiveInt = validatorReg.positiveIntegerWithoutZero.test(number);
// isValidPositiveInt === true

elementRuleValidator

适用于 Element UI 表单验证的规则函数集合：

| 验证函数 | 描述 | |---------|------| | validatePosNumNoZero | 验证不超过两位小数的正数（不含0） | | validatePosNumAndZero | 验证不超过两位小数的正数（含0） | | validatePosIntAndZero | 验证正整数及0 | | validatePosIntNoZero | 验证正整数 | | validateNegInt | 验证负整数 | | validatePhoneLength | 验证11位手机号码 | | validateDecimalTwo | 验证不超过两位小数的数字（含0和负数） | | validateLetterNumber | 验证数字或字母 | | validateFraction | 验证分数 |

示例：

import { elementRuleValidator } from 'byd-common-utils';

// Element UI 表单验证规则
const rules = {
  phone: [
    { required: true, message: '请输入手机号码', trigger: 'blur' },
    { validator: elementRuleValidator.validatePhoneLength, trigger: 'blur' },
  ],
  amount: [
    { required: true, message: '请输入金额', trigger: 'blur' },
    { validator: elementRuleValidator.validatePosNumAndZero, trigger: 'blur' },
  ],
};