vue中经常用到的过滤器

1. 首先在vue项目中创建与views同级utils文件夹，主要放一些过滤器，接口等文件
2. 在utils中创建一个filters.js文件，用于写公共的过滤器
3. 在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');
});

持续更新中…