ARTICLE DETAIL

建站实战干货

来自一线的建站与推广经验沉淀,每一条都经过真实交付验证。

Vue3项目filter.js组件封装

2026/8/4 1:40:34 拓冰建站 浏览量
Vue3项目filter.js组件封装

1、element-plus(el-table)修改table的行样式

export function elTableRowClassName({ row, rowIndex }) {if (rowIndex % 2 != 0) {return 'default-row'}
}

2、时间戳转换格式

export function parseTimeFilter(dateTime, dateType) {if (dateTime == '' || dateTime == undefined || dateTime == 0) {return '';}let date = new Date(parseInt(dateTime) * 1000);let Year = date.getFullYear();let Moth = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1);let Day = (date.getDate() < 10 ? '0' + date.getDate() : date.getDate());let Hour = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours());let Minute = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes());let Sechond = (date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds());if (dateType === 'YYYY/MM/DD') {return Year + '/' + Moth + '/' + Day} else if (dateType === 'YYYY-MM-DD') {return Year + '-' + Moth + '-' + Day} else if (dateType === 'YYYY/MM/DD HH:MM:SS') {return Year + '/' + Moth + '/' + Day + '   ' + Hour + ':' + Minute + ':' + Sechond;} else if (dateType === 'YYYYMMDDHHMMSS') {return Year + '' + Moth + '' + Day + '' + Hour + '' + Minute + '' + Sechond;}return Year + '-' + Moth + '-' + Day + '   ' + Hour + ':' + Minute + ':' + Sechond;
}

3、对象中过滤掉空的对象或没用到的对象

export function filtrationObject(options, optionsArr) {for (let key in options) {if (optionsArr.indexOf(key) === -1 || options[key] === '') {delete options[key];}}return options;
}export function filtrationObjectNull(options) {for (let key in options) {if (options[key] === '' || options[key] === null) {delete options[key];}}return options;
}

4、金额正则校验

export function amountRegularCheck(val) {let money = val.toString(); // 数值转成字符串money = money.replace(/[^\d.]+/, ''); // 禁止非数字和点money = money.replace(/^\./g, ''); // 禁止以点开头money = money.replace(/\.{2,}/g, '.'); // 禁止连两次输入点money = money.replace(/(\.)(\d*)(\1*)/g, "$1$2"); // 一个点后面禁止输入点money = money.replace(/^(-)*(\d+)\.(\d\d).*$/, '$1$2.$3'); // 禁止小数超过两位money = money.replace(/^0+/, '0'); // 禁止开头连续输入两个0if (Number(money) >= 1) {money = money.replace(/^0+/, ''); // 输入字符大于等于 1 时剔除开头的 0 }return money;
}

5、随机生成字符串

const NUMS = '0123456789';
const NUMSANDLETTERS = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
export function randomStr(n, isPureNum = false) {let possible = isPureNum ? NUMS : NUMSANDLETTERS;let ret = '';for (let i = 0; i < n; i++) {ret += possible.charAt(Math.floor(Math.random() * possible.length));}return ret;
}

6、获取路由中的path

export function getUrlPath() {let href = location.href;let start = href.indexOf('/#') + 2;let end = href.indexOf('?');if (end === -1) {end = href.length;}return href.slice(start, end);
}

7、下载文件通用函数

// 示例:then(dowloadFile(filename))
export function downloadFile(filename, content) {const blob = new Blob([content]);const file = filename;if ('download' in document.createElement('a')) { // 非IE下载const elink = document.createElement('a');elink.download = filename;elink.style.display = 'none';elink.href = URL.createObjectURL(blob);document.body.appendChild(elink);elink.click();URL.revokeObjectURL(elink.href); // 释放URL 对象document.body.removeChild(elink);} else { // IE10+下载navigator.msSaveBlob(blob, file);}
}

8、判断小数是几位

// 获取类型
export function getType(obj) {return Object.prototype.toString.call(obj).slice(8, -1).toLowerCase();
}// 判断类型
export function isType(obj, type) {if (this.getType(type) !== 'string') {throw new Error('type param must be string in util.js');}return this.getType(obj) === type;
}// 是否是number
export function isNumber(val) {return this.isType(val, 'number');
}export function countDecimals(n) {if (!this.isNumber(n)) {n = parseFloat(n);}if (Math.floor(n) === n.valueOf()) {return 0;}return n.toString().split('.')[1].length;
}