巧用 Vue 过滤器

2020-07-09

前言

在项目中经常会遇到时间戳转换，手机号、身份证号脱敏，状态的转换等，如果不复用会存在很多问题：
一、维护困难
二、开发重复性工作比较多
三、代码量比较多，不雅观那么，如何解决这些问题呢？

方案

我们可以使用 Vue 的过滤器 Filter 定义工具类 globalFilter.js，然后全局注册到 Vue 中，以供各个模块使用。

1
2
3

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

当然，前提是要先在 utils 文件夹中创建对应的文件 globalFilter.js 那么 globalFilter.js 文件中要怎么写过滤器呢？

我们以时间戳转换为例：

一般情况下，我们会写个时间戳转换的 function，粗糙一点的写法是在 function 最后 return 需要的格式(如：xxxx/xx/xx)，但是假如想要换成其他格式，或者想要把时分秒也加上（如：xxxx-xx-xx xx:xx），就需要在写一个方法，或者高级一点的写法是，把需要的格式当成参数，这样一个 function 就够了，但是有日期处理类库 moment ，为什么要那么麻烦写那么多代码呢？

moment 使用

1. npm 安装

1	npm install moment --save

2. 在 globalFilter 中引入，并使用

// vue 的时间格式化插件
import moment from 'moment'
// 时间格式化函数，默认格式为 YYYY-MM-DD HH:mm:ss ，若需要其他格式，只需使用的时候将想要的格式作为参数传入即可
// 使用方法 {{时间戳 | dateFormat}} 或 {{时间戳 | dateFormat('YYYY-MM-DD HH:mm:ss')}}
const dateFormat = (dataStr, pattern = 'YYYY/MM/DD') => {
    return moment(dataStr).format(pattern)
}

使用的时候，也很方便，直接在html代码处，用过滤器的形式使用就行了

1	{{data \| dateFormat('YYYY-MM-DD HH:mm:ss')}}

这样是不是比自己写个方法要简化的多呢？

手机号、身份证号脱敏

// 手机号脱敏
const telHide = phone => {
    if (phone === undefined || phone === null) {
        return ''
    }
    return phone.toString().replace(/(\d{3})\d{4}(\d*)/, '$1****$2')
}
// 身份证号脱
const IDCardHide = IDCard => {
    if (IDCard === undefined || IDCard === null) {
        return ''
    }
    return IDCard.toString().replace(/(\d{8})\d{8}(\d*)/, '$1********$2')
}

使用方法和时间戳一样，也是过滤器的形式

1	{{ phone \| phone }}

状态值的转换

比如，交易类型，一般情况，后台会返回给1，2，3这种状态值，需要前端去对应，优雅的写法是在这个文件的js中去做处理，页面直接渲染就好了，但是很多时候，可能这个状态不止在一个页面中使用，所以提取成公用的还是很有必要的，这样即使后期修改状态值，前端也可以很快的改好，不必一个文件一个文件去找

// 充值类型
const SubTradeType = type => {
    const status = {
        // 1 在线充值、2 线下充值
        '1': '在线充值',
        '2': '线下充值'
    }
    return status[type]
}

使用的时候，还是过滤器的写法

1	{{subTradeType \| SubTradeType}}

当然了，上述这些，都需要在globalFilter.js最后export

export default {
    dateFormat,
    telHide,
    IDCardHide,
    SubTradeType
}

展开全文 >>