我要评论全局引入filter：把写了方法的js文件映入进main.js：import ‘./utils/filter’
1.将整数部分逢三一断
例如：12345600 过滤为 12，345，600
vue.filter('numberformat', function(value) {
if (!value) {
return '0'
}
const intpartformat = value.tostring().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,') // 将整数部分逢三一断
return intpartformat
})2.将数据格式化为金额
2.1有根据正则格式化
例如 123456 过滤为 123,456.00
vue.filter('moneyformat', function(number, decimals, symbol) {
if (!decimals) {
decimals = 2
}
if (!symbol) {
symbol = ''
}
const decpoint = '.'
const thousandssep = ','
number = (number + '').replace(/[^0-9+-ee.]/g, '')
const n = !isfinite(+number) ? 0 : +number
const prec = !isfinite(+decimals) ? 0 : math.abs(decimals)
const sep = (typeof thousandssep === 'undefined') ? ',' : thousandssep
const dec = (typeof decpoint === 'undefined') ? '.' : decpoint
let s = ''
const tofixedfix = function(n, prec) {
const k = math.pow(10, prec)
return '' + nummulti (n, k) / k
}
s = (prec ? tofixedfix(n, prec) : '' + math.round(n)).split('.')
const re = /(-?\d+)(\d{3})/
while (re.test(s[0])) {
s[0] = s[0].replace(re, '$1' + sep + '$2')
}
if ((s[1] || '').length < prec) {
s[1] = s[1] || ''
s[1] += new array(prec - s[1].length + 1).join('0')
}
return symbol + s.join(dec)
})上面过滤为金额的方法需要处理精度丢失问题，引入其它文件该nummulti方法如下：
/**
* 乘法运算，避免数据相乘小数点后产生多位数和计算精度损失。
*
* @param num1被乘数 | num2乘数
*/
export function nummulti (num1, num2) {
num1 = num1 || 0
num2 = num2 || 0
let basenum = 0
try {
basenum += num1.tostring().split('.')[1].length
} catch (e) {
}
try {
basenum += num2.tostring().split('.')[1].length
} catch (e) {
}
return number(num1.tostring().replace('.', '')) * number(num2.tostring().replace('.', '')) / math.pow(10, basenum)
}2.1.格式化货币
我经常需要格式化货币，它需要遵循以下规则：
123456789 => 123,456,789
123456789.123 => 123,456,789.123
const formatmoney = (money) => {
return money.replace(new regexp(`(?!^)(?=(\\d{3})+${money.includes('.') ? '\\.' : '$'})`, 'g'), ',')
}
formatmoney('123456789') // '123,456,789'
formatmoney('123456789.123') // '123,456,789.123'
formatmoney('123') // '123'3.展示时，字数超出10个字的后面省略
用…展示代替：
filters: {
itemdescfilter: function (value) {
if (!value) {
return ''
}
value = value.tostring()
if (value.length <= 10) {
return value
} else {
return value.substr(0, 10) + ' . . .'
}
}
},
效果如下：
4.格式化日期为yyyy-mm-dd
创建filters.js文件并安装、导入moment改文件，把filters导入到main.js中全局使用，
全局过滤器，格式化日期为yyyy-mm-dd / 格式化日期为yyyy-mm-dd hh:mm:ss
vue.filter('dayjs', function(datastr, pattern = 'yyyy-mm-dd') {
return moment(datastr).format(pattern)
})
如下，完成数据格式化，例如其中的text为2022-04-02 11:11:11，经过改过滤器后展示的数据为2022-04-02
5.格式化日期为yyyy-mm-dd hh:mm:ss
vue.filter('moment', function(datastr, pattern = 'yyyy-mm-dd hh:mm:ss') {
return moment(datastr).format(pattern)
})具体使用同第4点
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持代码网。
发表评论