Vue通过全局过滤器处理时间戳

前言

以前我们写全局过滤器一般都是直接写在Vue实例上面
比如这个样子的

Vue.filter('过滤器名称'，function(data){
      return data + '123'
})

但是如果我们在项目中需要大量使用的话，最好还是要做一个抽离，方便大家都能使用

下面说一下步骤

1. 创建一个文件夹filters，在它下面创建一个文件index.js
   
2. 在index.js里面定义你的过滤器，然后导出

const formatDate = function (value) {
  let date = new Date(value)
  let y = date.getFullYear()
  let MM = date.getMonth() + 1
  MM = MM < 10 ? ('0' + MM) : MM
  let d = date.getDate()
  d = d < 10 ? ('0' + d) : d
  return y + '-' + MM + '-' + d
}

export {
  formatDate
}
// 我这里只处理了年月日，如果需要加上时分秒，就是这个样子的
const formatDate = function (value) {
  let date = new Date(value)
  let y = date.getFullYear()
  let MM = date.getMonth() + 1
  MM = MM < 10 ? ('0' + MM) : MM
  let d = date.getDate()
  d = d < 10 ? ('0' + d) : d
  let h = date.getHours()
  h = h < 10 ? ('0' + h) : h
  let m = date.getMinutes()
  m = m < 10 ? ('0' + m) : m
  let s = date.getSeconds()
  s = s < 10 ? ('0' + s) : s
  return y + '-' + MM + '-' + d + ' ' + h + ':' + m + ':' + s
}

export {
  formatDate
}

3. 然后在main.js里面导入并注册为全局过滤器
   注意，必须使用这种方法注册，不能导入之后直接通过Vue.filter来注册

// 时间戳格式化
import * as formatDate from '@/filters/index'

Object.keys(formatDate).forEach(key => {
  Vue.filter(key, formatDate[key])
})

4. 完成之后，就可以在你的html中进行使用啦

</span>{{item.createTime | formatDate(item.createTime)}}</span>