vue中经常用到的过滤器
- 首先在vue项目中创建与views同级utils文件夹,主要放一些过滤器,接口等文件
- 在utils中创建一个filters.js文件,用于写公共的过滤器
- 在main.js中引入filters.js注册为全局过滤器
// 手机号格式化 156 **** 5644
Vue.filter('hideTelphone', (tel) => {
if (!tel) return '';
return tel.replace(/(\d{3})\d*(\d{4})/, '$1 **** $2');
})
// 手机号格式化 186****5644
Vue.filter('hideTelphone2', (tel) => {
if (!tel) return '';
return tel.replace(/(\d{3})\d*(\d{4})/, '$1****$2');
})
// 手机号格式化 186 **** ****
Vue.filter('hideTelphone3', (tel) => {
if (!tel) return '';
return tel.replace(/(\d{3})(\d{4})(\d{4})/, '$1 **** ****');
});
// 手机号格式化 176 1132 0588
Vue.filter('hideTelphone1', (tel) => {
if (!tel) return '';
return tel.replace(/(\d{3})(\d{4})(\d{4})/, '$1 $2 $3');
});
// 判断性别
Vue.filter('sexs', function(val) {
let endSex = ''
switch (val) {
case '**':
endSex = '女'
break;
case '**':
endSex = '男'
break;
default:
endSex = '不男不女'
break;
}
return endSex
})
// 千分符 例如100,200,223,456.00
Vue.filter('moneyFormatter', (value) => {
if (!value) return '';
if (value === '暂无数据') return '暂无数据';
let key;
key = value.indexOf('万元');
if (key !== -1) {
return value;
} else {
const arr = value.split('.');
const floatNum = arr[1] || '00';
value = value.replace(/\.\d+/, '');
const reg = /(\d+)(\d{3})/;
while (reg.test(value)) {
value = value.replace(reg, '$1,$2');
}
return `${value}.${floatNum.length === 1 ? floatNum + '0' : floatNum}`;
}
});
// 姓名
Vue.filter('hideName', (value) => {
if (!value) {
return '';
}
const str = value.toString();
if (str.length <= 3) {
// *哈哈
return '* ' + str.substring(1, str.length);
} else if (str.length > 3 && str.length <= 6) {
// **哈哈
return '* * ' + str.substring(2, str.length);
} else if (str.length > 6) {
// 好好****好好啊
return str.substring(0, 2) + ' * * * * ' + str.substring(6, str.length);
}
});
// 银行卡格式化6217 3456 4789 2453 678
Vue.filter('formatIdCard', (value) => {
if (!value) {
return '';
}
value = value.replace(/(\d{4})(?=\d)/g, '$1 ');
return value;
});
// 银行卡格式化6217 **** **** **** 678
Vue.filter('hideAccountNo', (value) => {
if (!value) {
return '';
}
return value.replace(/^(.{4})(?:\w+)(.{3})$/, '$1 **** **** **** $2');
});
持续更新中…