Vue全局过滤器的使用
新建filters.js如下,内容过滤可以自己写函数,记得export 导出
import dayjs from "dayjs";
// 转小写
let lower = value => value.toLowerCase();
// 转大写
let upper = value => value.toUpperCase();
let currencyStyle = (value, style) => { // 货币格式
/**
* style:
* currency:货币
* number: 数字格式
*/
if (style == 'number') { // 数字格式
return parseFloat(value.replace(/[^\d\.-]/g, ""));
} else { // 货币格式, 并保留2位小数
var n = 2;
value = parseFloat((value + "").replace(/[^\d\.-]/g, "")).toFixed(n) + "";
var l = value.split(".")[0].split("").reverse(),
r = value.split(".")[1];
var t = "";
for (var i = 0; i < l.length; i++) {
t += l[i] + ((i + 1) % 3 == 0 && (i + 1) != l.length ? "," : "");
}
return t.split("").reverse().join("") + "." + r;
}
}
/**
* 时间过滤器
* @param {*} time 传入毫秒
* @returns 返回0′23″这样子
*/
let timeFilter = (time) => { // 货币格式
if (time == null || time == undefined || time == 0) {
return time;
}
const day = dayjs(0).millisecond(Number.parseInt(time));
let str = "";
if (day.minute() >= 0) {
str += day.minute() + "′";
}
if (day.second() >= 0) {
str += day.second() + "″";
}
return str;
}
export {
lower,
upper,
currencyStyle,
timeFilter
}
在main.js中 引入
//挂载全局过滤
import * as filters from '@/utils/filters.js'
Object.keys(filters).forEach(key => {
Vue.filter(key, filters[key])
})
使用场景在局部组件内直接用
eg:在三元中使用过滤
<span >{{item.qualified == null? "-": $options.filters.timeFilter(item.qualified)}}</span>
eg:在页面中直接使用过滤
<el-table-column label="(表现 | 分数)" align="center" min-width="200">
<template slot-scope="scope">
<div class="cur">
{{scope.row.cantileveredArm | timeFilter }}</span>
</div>
</template>
</el-table-column>