全局过滤器
**在filters节点下定义的过滤器,称为私有过滤器**,因为它只能在当前vm实例所使用,**如果希望在多个vue实例之间共享过滤器**,可使用下面方法定义全局过滤器:
Vue.filter( )方法接受两个参数:
- 第一个参数:是全局变量的名字
- 第二个参数:是全局过滤器处理函数
Vue.filter('gai',(val)=>{
console.log(val);
return 'abc'
})
项目中使用
在src下新建filters.js文件写入所有的filters方法,例如:
const vfilter = {
// 金额小数点保留
// 小数点小于2位不处理,大于两位只保留两位
// digit不传默认为2
formatMoney: function (money, digit) {
if (!money && money !== 0) return "--";
let y = String(money).indexOf(".") + 1,//获取小数点的位置
count = String(money).length - y;//获取小数点后的个数
if (money) {
if (money <= 0) {
if (y > 0) {
if (count > 2) {
return digit ? Number(money).toFixed(digit) : Number(parseInt(money * 100) / 100).toFixed(2);
} else {
return Number(money);
}
} else {
return Number(money);
}
} else {
if (y > 0) {
if (count > 2) {
return digit ? Number(money).toFixed(digit) : Number(parseInt(money * 100) / 100).toFixed(2);
} else {
return Number(money);
}
} else {
return Number(money);
}
}
} else {
return 0;
}
},
// 时间戳转换为标准时间的过滤函数
formatDate: function (value, r) {
if (!value) return "--";
let date = new Date(value);
let y = date.getFullYear();
let MM = date.getMonth() + 1;
MM = MM < 10 ? ('0' + MM) : MM;
let d = date.getDate();
d = d < 10 ? ('0' + d) : d;
let h = date.getHours();
h = h < 10 ? ('0' + h) : h;
let m = date.getMinutes();
m = m < 10 ? ('0' + m) : m;
let s = date.getSeconds();
s = s < 10 ? ('0' + s) : s;
return y + '-' + MM + '-' + d + ' ' + h + ':' + m + ':' + s;
},
// 时间戳转换为标准时间的过滤函数
filterDate: function (value, r) {
if (!value) return "";
let date = new Date(value);
let y = date.getFullYear();
let MM = date.getMonth() + 1;
MM = MM < 10 ? ('0' + MM) : MM;
let d = date.getDate();
d = d < 10 ? ('0' + d) : d;
let h = date.getHours();
h = h < 10 ? ('0' + h) : h;
let m = date.getMinutes();
m = m < 10 ? ('0' + m) : m;
let s = date.getSeconds();
s = s < 10 ? ('0' + s) : s;
return y + '-' + MM + '-' + d;
},
//身份证脱敏
idCardDesen: function (card) {
const reg = /^(.{6})(?:\d+)(.{4})$/; // 匹配身份证号前6位和后4位的正则表达式
const maskedIdCard = card.replace(reg, '$1******$2'); //
return maskedIdCard;
}
}
export default vfilter;
在main.js引入全局注册
import filters from './src/filters'
//注册过滤器
for( let key in filters) {
Vue.filter(key,filters[key])
}
在页面中即可直接使用
<el-table-column prop="idcardnumber" align="center" label="身份证号" show-overflow-tooltip>
<template slot-scope="scope">
{{ scope.row.idcardnumber | idCardDesen }}
</template>
</el-table-column>