一、表单篇
1、限制输入字符只能是整型字符串
vue
复制代码
<template>
<t-input
v-model="params.substringStart"
placeholder="输入数字"
@change="filterNumber('substringStart')"
/>
</template>
<script setup lang="ts">
const filterNumber = (key: string) => {
let value = params.value[key].replace(/[^\d]/g, '');
// 移除前导零，但保留单个零
value = value.replace(/^0+/, '') || '0';
params.value[key] = value;
};
</script>
2、限制输入字符串可以有小数点
vue
复制代码
<template>
<t-input
v-model="params.substringStart"
placeholder="输入数值"
@change="filterNumber('substringStart')"
/>
</template>
<script setup lang="ts">
const filterNumber = (key: any) => {
formData.value[key] = formData.value[key].replace(/[^\d.]/g, '');
// 确保只有一个小数点
const parts = formData.value[key].split('.');
if (parts.length > 2) {
formData.value[field] = `${parts[0]}.${parts.slice(1).join('')}`;
}
};
</script>
二、数据篇
1、下划线转驼峰
typescript
复制代码
/**
* @param {T} data 数据（可以是数组或对象）
* @returns {T} 返回驼峰命名的数组或对象
*/
export const camelCase = <T>(data: T): T => {
let result: any;
let key: string;
if (typeof data === 'object') {
if (Array.isArray(data)) {
for (let i = 0; i < data.length; i++) {
data[i] = camelCase(data[i]);
}
} else {
result = {};
for (const k in data) {
key = k.replace(/(_[a-z])/g, (match) => match.substring(1).toUpperCase());
result[key] = camelCase(data[k]);
}
data = result;
}
}
return data;
};
2、驼峰转下划线
typescript
复制代码
/**
* @param {T} data 数据（可以是数组或对象）
* @returns {T} 返回下划线命名的数组或对象
*/
export const snakeCase = <T>(data: T): T => {
let result: any;
let key: string;
if (typeof data === 'object') {
if (Array.isArray(data)) {
for (let i = 0; i < data.length; i++) {
data[i] = snakeCase(data[i]);
}
} else {
result = {};
for (const k in data) {
key = k.replace(/([a-z0-9])([A-Z])/g, '$1_$2').toLowerCase();
result[key] = snakeCase(data[k]);
}
data = result;
}
}
return data;
};
3、拷贝
typescript
复制代码
/**
* @param {Array | Object} obj 待拷贝的数据
* @returns T
*/
const copyData = <T>(obj: T): T => {
let newObj = null
if (typeof (obj) === 'object' && obj !== null) {
newObj = obj instanceof Array ? [] : {}
// 进入下一层进行递归
for (let i in obj) newObj[i] = copyData(obj[i])
} else {
newObj = obj
}
return newObj
}
4、随机数
typescript
复制代码
/**
* @description 生成随机数
* @param {Number} min 最小值
* @param {Number} max 最大值
* @return number
*/
export function randomNum(min: number, max: number): number {
let num = Math.floor(Math.random() * (min - max) + max);
return num;
}
5、数值转化字符串
typescript
复制代码
/**
* @param {number} n 数值
* @returns {string} 返回字符串
*/
export const getAlphabetSequence = (n: number) => {
let letter = '';
while (n >= 0) {
letter = String.fromCharCode(97 + (n % 26)) + letter;
n = Math.floor(n / 26) - 1;
}
return letter;
};
6、数组转树结构
typescript
复制代码
/**
* @param {any} data 数据
* @param {string} id 当前节点 key
* @param {string} pid 父节点 key
* @returns {string} 返回字符串
*/
export function listToTree(data: any, id: string = 'id', pid: string = 'parentId') {
const result: any = [];
const temp: { [key: string]: any } = {};
for (let i = 0; i < data.length; i++) {
temp[data[i][id]] = data[i];
}
for (let k = 0; k < data.length; k++) {
if (temp[data[k][pid]] && data[k][id] !== data[k][pid]) {
if (!temp[data[k][pid]].children) {
temp[data[k][pid]].children = [];
}
if (!temp[data[k][pid]].level) {
temp[data[k][pid]].level = 1;
}
data[k].level = temp[data[k][pid]].level + 1;
temp[data[k][pid]].children.push(data[k]);
} else {
result.push(data[k]);
}
}
return result;
}
7、文件下载
typescript
复制代码
/**
* @param {Blob} blob Blob 流
* @param {string} fileName 文件名
*/
export const downloadFileByBlob = (blob: Blob, fileName: string) => {
const url = window.URL.createObjectURL(blob); // 创建下载链接
const aLink = document.createElement('a'); // 赋值给 a 标签的 href 属性
aLink.style.display = 'none';
aLink.href = url;
aLink.setAttribute('download', fileName);
document.body.appendChild(aLink); // 将 a 标签挂载上去
aLink.click(); // a 标签 click 事件
document.body.removeChild(aLink); // 移除 a 标签
window.URL.revokeObjectURL(url); // 销毁下载链接
};
8、时区转换
typescript
复制代码
/**
* @param {string} timezone (时区 +9:00；-10:00)
* @returns {Date} date 时间
*/
export const convertByTimezone = (timezone: string, date = new Date()) => {
// 验证时区格式
if (!/^[+-]\d{1,2}:\d{2}$/.test(timezone)) {
return '';
}
// 提取小时和分钟偏移量
const [sign, hours, minutes] = timezone.match(/^([+-])(\d{1,2}):(\d{2})$/).slice(1);
const offsetHours = parseInt(hours, 10);
const offsetMinutes = parseInt(minutes, 10);
// 计算总偏移毫秒数
const totalOffset = (offsetHours * 60 + offsetMinutes) * 60000;
const offsetMs = sign === '+' ? totalOffset : -totalOffset;
// 获取UTC时间并应用偏移
const utcTime = date.getTime() + date.getTimezoneOffset() * 60000;
const targetDate = new Date(utcTime + offsetMs);
// 格式化为yyyy-mm-dd hh:mm:ss
const pad = (num: number) => num.toString().padStart(2, '0');
return `${targetDate.getFullYear()}-${pad(targetDate.getMonth() + 1)}-${pad(targetDate.getDate())} ` +
`${pad(targetDate.getHours())}:${pad(targetDate.getMinutes())}:${pad(targetDate.getSeconds())}`;
}
三、浏览器篇
1、获取 URL Query 参数
typescript
复制代码
/**
* @param {string} url URL
* @returns {Object} 参数数组
*/
export function getQueryParams(url: string) {
// 返回当前 URL 的查询部分（问号 ? 之后的部分）。
let urlParameters = window.location.search;
if (url) {
urlParameters = url.substring(url.indexOf('?'));
}
// 声明并初始化接收请求参数的对象
const requestParameters: { [key: string]: string } = {};
// 如果该参数中有请求的参数，则获取请求的参数，否则打印提示此请求没有请求的参数
if (urlParameters.indexOf('?') !== -1) {
// 获取请求参数的字符串
const parameters = decodeURI(urlParameters.substr(1));
// 将请求的参数以&分割中字符串数组
const parameterArray = parameters.split('&');
// 循环遍历，将请求的参数封装到请求参数的对象之中
for (let i = 0; i < parameterArray.length; i++) {
const [key, value] = parameterArray[i].split('=');
requestParameters[key] = value;
}
}
return requestParameters;
}
2、获取浏览器默认语言
typescript
复制代码
/**
* @return string 语言
*/
export const getBrowserLang = () => {
let browserLang = navigator.language ? navigator.language : navigator.browserLanguage;
let defaultBrowserLang = "";
if (browserLang.toLowerCase() === "cn" || browserLang.toLowerCase() === "zh" || browserLang.toLowerCase() === "zh-cn") {
defaultBrowserLang = "zh";
} else {
defaultBrowserLang = "en";
}
return defaultBrowserLang;
};
三、颜色篇
1、hex 颜色转 rgb 颜色
typescript
复制代码
/**
* @param {String} str 颜色值字符串
* @returns {String} 返回处理后的颜色值
*/
export function hexToRgb(str: any) {
let hexs: any = "";
let reg = /^\#?[0-9A-Fa-f]{6}$/;
if (!reg.test(str)) return ElMessage.warning("输入错误的hex");
str = str.replace("#", "");
hexs = str.match(/../g);
for (let i = 0; i < 3; i++) hexs[i] = parseInt(hexs[i], 16);
return hexs;
}
2、rgb 颜色转 hex 颜色
typescript
复制代码
/**
* @param {*} r 代表红色
* @param {*} g 代表绿色
* @param {*} b 代表蓝色
* @returns {String} 返回处理后的颜色值
*/
export function rgbToHex(r: any, g: any, b: any) {
let reg = /^\d{1,3}$/;
if (!reg.test(r) || !reg.test(g) || !reg.test(b)) return ElMessage.warning("输入错误的rgb颜色值");
let hexs = [r.toString(16), g.toString(16), b.toString(16)];
for (let i = 0; i < 3; i++) if (hexs[i].length == 1) hexs[i] = `0${hexs[i]}`;
return `#${hexs.join("")}`;
}
3、加深颜色值
typescript
复制代码
/**
* @param {String} color 颜色值字符串
* @param {Number} level 加深的程度，限0-1之间
* @returns {String} 返回处理后的颜色值
*/
export function getDarkColor(color: string, level: number) {
let reg = /^\#?[0-9A-Fa-f]{6}$/;
if (!reg.test(color)) return ElMessage.warning("输入错误的hex颜色值");
let rgb = hexToRgb(color);
for (let i = 0; i < 3; i++) rgb[i] = Math.round(20.5 * level + rgb[i] * (1 - level));
return rgbToHex(rgb[0], rgb[1], rgb[2]);
}
4、变浅颜色值
typescript
复制代码
/**
* @param {String} color 颜色值字符串
* @param {Number} level 加深的程度，限0-1之间
* @returns {String} 返回处理后的颜色值
*/
export function getLightColor(color: string, level: number) {
let reg = /^\#?[0-9A-Fa-f]{6}$/;
if (!reg.test(color)) return ElMessage.warning("输入错误的hex颜色值");
let rgb = hexToRgb(color);
for (let i = 0; i < 3; i++) rgb[i] = Math.round(255 * level + rgb[i] * (1 - level));
return rgbToHex(rgb[0], rgb[1], rgb[2]);
}