在vue+ts中自定义过滤器（毫秒转换成标准格式）

如果在许多地方都需要对数据格式进行转换，那么滤器绝对是一劳永逸的好方法。

1.就以时间为例，后台返回的多是毫秒数，所以就需要在前台将毫秒数转换成标准时间格式

第一步，建立一个timeUtil.ts文件，方便复用

/** 以毫秒1554780164000 转换成 2019-04-09 11:22:44为例 */

// fmt: 'yyyy-MM-dd hh:mm:ss'    time: new Date(1554780164000)
export function formatDate(fmt: string, time: Date) {
    const o: any = {
        'M+': time.getMonth() + 1, // 月份 4
        'd+': time.getDate(), // 日  9
        'h+': time.getHours(), // 小时 11
        'm+': time.getMinutes(), // 分 22
        's+': time.getSeconds(), // 秒 44
        'q+': Math.floor((time.getMonth() + 3) / 3), // 季度
        'S': time.getMilliseconds() // 毫秒
    };
    if (/(y+)/.test(fmt)) { 
    // RegExp.$1是RegExp的一个属性,指的是与正则表达式匹配的第一个子匹配
        fmt = fmt.replace(RegExp.$1, (time.getFullYear() + '').substr(4 - RegExp.$1.length));  // 这是转换年
    }
    for (const k in o) {
        if (new RegExp('(' + k + ')').test(fmt)) { 
            fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ? 
                    (o[k]) : (('00' + o[k]).substr(('' + o[k]).length))); 
                // o[k] 4 9 11 22 44
                // '00'+o[k] 004 009 0011 0022 0044
                // ..substr(('' + o[k]).length从o[k].length开始截取
        }
    }
    return fmt; // 2019-04-09 11:22:44
};

第二步，在需要用的地方引用timeUtil.ts中的formatDate方法

第三步，写过滤器

第四步，使用

2.以数量的多少调整单位为例

第一步，建立一个单独unitUtil.ts文件

export function formatUnit(count: number) { 
    const result = {
        value:0,
        unit:''
    }
    
    if (count > 10000 && count < 100000000) {
        const comData = Number((count / 10000).toFixed(2));
        result.value = comData
        result.unit = '万'
      } else if (count > 100000000) {
        const comData = Number((count / 100000000).toFixed(2));
        result.value = comData
        result.unit = '亿'
      } else {
        result.unit = '条'
        result.value = count
      }
    return result
};

第二部，引用

第三部，过滤器

第四步，使用