vue封装常用过滤器

1:在static/plugins/新建filter.js

2:main.js

// 全局导入过滤器
import filter from './static/plugins/filter'
Object.keys(filter).forEach(key => Vue.filter(key, filter[key]))

3:filter.js

// 封装过滤器

// 根据身份证号码判断男女
let sexFilter = value => {
    if (!value) {
        return ''
    } else {
        let data = value.substr(16, 1) % 2 === 1 ? '男' : '女'
        return data
    }
};
// 身份证号脱敏 第8位开始替换8个
let IDFilter = num => {
    let data = num.replace(/(\d{8})\d{8}(\d*)/, '$1********$2')
    return data
};
// 手机号脱敏 第3位开始替换4个
let phoneFilter = num => {
    let data = num.replace(/(\d{3})\d{4}(\d*)/, '$1****$2')
    return data
};
// 姓名脱敏(小明 转换成 *明   李小明 转换成 李*明   欧阳小明 转换成 欧**明)
let nameFilter = name => {
    if (name.length === 2) {
        return new Array(name.length).join('*') + name.substr(-1)
    } else {
        return (
            name.substr(0, 1) + new Array(name.length - 1).join('*') + name.substr(-1)
        )
    }
};
// 字符串大小写转换{type:  1:首字母大写  2：首页母小写  3：大小写转换  4：全部大写  5：全部小写}
let stringFilter = (str, type) => {
    type = type || 4
    switch (type) {
        case 1:
            return str.replace(/\b\w+\b/g, function (word) {
                return word.substring(0, 1).toUpperCase() + word.substring(1).toLowerCase()
            })
        case 2:
            return str.replace(/\b\w+\b/g, function (word) {
                return word.substring(0, 1).toLowerCase() + word.substring(1).toUpperCase()
            })
        case 3:
            return str.split('').map(function (word) {
                if (/[a-z]/.test(word)) {
                    return word.toUpperCase()
                } else {
                    return word.toLowerCase()
                }
            }).join('')
        case 4:
            return str.toUpperCase()
        case 5:
            return str.toLowerCase()
        default:
            return str
    }
};
// 首尾去空格
let trimFilter = str => {
    return str.replace(/(^\s*)|(\s*$)/g, '')
}
// 阿拉伯数字转中文数字
let numChFilter = num => {
    let AA = new Array('零', '一', '二', '三', '四', '五', '六', '七', '八', '九', '十')
    let BB = new Array('', '十', '百', '仟', '萬', '億', '点', '')
    let a = ('' + num).replace(/(^0*)/g, '').split('.')
    let k = 0
    let re = ''
    for (let i = a[0].length - 1; i >= 0; i--) {
        switch (k) {
            case 0:
                re = BB[7] + re
                break
            case 4:
                if (!new RegExp('0{4}//d{' + (a[0].length - i - 1) + '}$').test(a[0])) {
                    re = BB[4] + re
                }
                break
            case 8:
                re = BB[5] + re
                BB[7] = BB[5]
                k = 0
                break
        }
        if (k % 4 === 2 && a[0].charAt(i + 2) !== 0 && a[0].charAt(i + 1) === 0) {
            re = AA[0] + re
        }
        if (a[0].charAt(i) !== 0) {
            re = AA[a[0].charAt(i)] + BB[k % 4] + re
        }
        k++
    }
    if (a.length > 1) { // 加上小数部分(如果有小数部分)
        re += BB[6]
        for (let i = 0; i < a[1].length; i++) {
            re += AA[a[1].charAt(i)]
        }
    }
    if (re === '一十') {
        re = '十'
    }
    if (re.match(/^一/) && re.length === 3) {
        re = re.replace('一', '')
    }
    return re
};
// 生日转年龄
let birsdayFilter = birsday => {
    let aDate = new Date();
    let thisYear = aDate.getFullYear();
    let bDate = new Date(birsday);
    let brith = bDate.getFullYear();
    let age = thisYear - brith;
    if (aDate.getMonth() == bDate.getMonth()) {
        if (aDate.getDate() < bDate.getDate()) {
            age = age - 1;
        }
    } else {
        if (aDate.getMonth() < bDate.getMonth()) {
            age = age - 1;
        }
    }
    return age;
}
// 日期过滤（Y-M-D：2021-01-03；Y-M-D-W：2021-01-03—星期日;2021-01-03  15:02:00）
let timeFilter = (time, fmt) => {
    time = time.length == 10 ? Number(time) * 1000 : Number(time);
    const dt = new Date(time);
    const Y = dt.getFullYear();
    const M = (dt.getMonth() + 1 < 10 ? '0' + (dt.getMonth() + 1) : dt.getMonth() + 1);
    const D = dt.getDate() < 10 ? '0' + dt.getDate() : dt.getDate();
    let W = dt.getDay();
    switch (W) {
        case 1:
            W = '星期一';
            break;
        case 2:
            W = '星期二';
            break;
        case 3:
            W = '星期三';
            break;
        case 4:
            W = '星期四';
            break;
        case 5:
            W = '星期五';
            break;
        case 6:
            W = '星期六';
            break;
        case 0:
            W = '星期日';
            break;
    }
    const h = dt.getHours() < 10 ? '0' + dt.getHours() : dt.getHours();
    const m = dt.getMinutes() < 10 ? '0' + dt.getMinutes() : dt.getMinutes();
    const s = dt.getSeconds() < 10 ? '0' + dt.getSeconds() : dt.getSeconds();

    if (fmt === 'Y-M-D') return `${Y}-${M}-${D}`;
    if (fmt === 'Y-M-D-W') return `${Y}-${M}-${D}—${W}`;
    return `${Y}-${M}-${D}  ${h}:${m}:${s}`;
};
// 保留两位小数
let toFixedFilter = num => {
    let f = Number(parseFloat(num));
    if (isNaN(f)) return false;
    let z = Math.round(num * 100) / 100;
    let s = z.toString();
    let rs = s.indexOf('.');
    if (rs < 0) {
        rs = s.length;
        s += '.';
    }
    while (s.length <= rs + 2) {
        s += '0';
    }
    return s
};
// 是与否
let whatFilter = num => {
    let what = num == 0 ? '否' : '是';
    return what
};
// 等级
let gradeFilter = num => {
    let grade = num == '1' ? 'Ⅰ' : num == '2' ? 'Ⅱ' : num == '3' ? 'Ⅲ' : num == '4' ? 'Ⅳ' : num == '5' ? 'Ⅴ' : num == '6' ? 'Ⅵ' : num == '7' ? 'Ⅶ' : num == '8' ? 'Ⅷ' : num == '9' ? 'Ⅸ' : num == '10' ? 'Ⅹ' : num == '11' ? 'Ⅺ' : num == '12' ? 'Ⅻ' : num == '13' ? 'XIII' : num == '14' ? 'XIV' : 'XV'
    return grade
};
// 四舍五入
let roundFilter = (num, decimal) => {
    num = Number(num);
    if (isNaN(num)) return false;
    if ((/^[0-9]*[1-9][0-9]*$/).test(num)) return Number(num).toFixed(0)
    return Number(num).toFixed(decimal)
}
// 向下取整
let floorFilter = num => {
    num = Number(num);
    if (isNaN(num)) return false;
    return Math.floor(num)
};
// 向上取整
let ceilFilter = num => {
    num = Number(num);
    if (isNaN(num)) return false;
    return Math.ceil(num)
}
export default {
    sexFilter,
    IDFilter,
    phoneFilter,
    nameFilter,
    stringFilter,
    trimFilter,
    numChFilter,
    birsdayFilter,
    timeFilter,
    toFixedFilter,
    whatFilter,
    gradeFilter,
    roundFilter,
    floorFilter,
    ceilFilter
}
/*
**  sexFilter:身份证号判断男女
    IDFilter：身份证号脱敏
    phoneFilter：手机号脱敏
    nameFilter：姓名脱敏
    stringFilter：字符串转换
    trimFilter：首尾空格
    numChFilter：阿拉伯数字转中文数字
    birsdayFilter：生日转年龄
    timeFilter：日期过滤
    toFixedFilter：保留两位小数
    whatFilter：是或否
    gradeFilter：等级
    roundFilter：四舍五入
    floorFilter：向下取整
    ceilFilter：向上取整
*/

4:页面调用

// birsday: "1996.1.18",time: "1609657320"（10/13位时间戳都可以）
<div class="word">
	{{ filter.birsday | birsdayFilter }}：
	<span class="example">生日转年龄</span>
</div>
<div class="word">
    {{ filter.time | timeFilter('Y-M-D') }}：
    <span class="example">日期过滤</span>
</div>