巧用Vue过滤器

前言

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

方案

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

// 全局导入过滤器
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 安装

   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代码处，用过滤器的形式使用就行了

<div>{{data | dateFormat('YYYY-MM-DD HH:mm:ss')}}</div

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

手机号、身份证号脱敏

// 手机号脱敏
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')
}

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

<div> {{ phone | phone }} </div>

状态值的转换

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

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

使用的时候，还是过滤器的写法
当然了，上述这些，都需要在globalFilter.js最后export

{{subTradeType | SubTradeType}}

最后，附上globalFilter.js完整代码

// 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)
}

// 手机号脱
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')
}

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

export default {
  dateFormat,
  telHide,
  IDCardHide,
  SubTradeType
}

博客迁移至GitHub