Vue如何实现filter全局过滤器的使用？

最近在做项目的过程中，发现vue的filter过滤器很有用。例如：我们在做时间显示时，如果后台返回给我们的是时间戳，那么我们就需要对时间做一下处理，这个时候使用过滤器是最为行之有效的方法。

---

首先，有几个问题值得我们思考：

(1) 在Vue中，我们该如何使用filter来对时间进行时间格式的处理呢？

(2) 我们写的过滤器是否可以写成全局的呢，以更高效的便于使用？

(3) 如何封装一个方法，可以有很强的拓展性，方便于灵活的适用于不同的场景呢？

带着这三个问题，我们开始进行学习filter的相关知识。

---

（1）我们首要的事情肯定是进入官网文档查看filter相关的知识，至少对其有一个认识和了解。

官方文档地址：https://cn.vuejs.org/v2/guide/filters.html

（2）首先我们需要在static目录下新建一个utils目录，在utils目录下创建一个util.js文件；

 一般static里面放一些类库的文件，所以我们将文件放在此目录下。

(3) 接下来我们需要在入口文件中引入这个util.js文件

(4)  在组件中进行引入

例如：{{date|timeFormat('yyyy-mm-dd')}}

---

第二问题：

接下来我们看看utils.js文件中的内容

/**
 * 过滤器时间
 * 格式：{{date|timeFormat('yyyy-mm-dd')}}
 */
const timeFormat = (value, format) => {
  let date = new Date(value)
  let y = date.getFullYear()
  let m = date.getMonth() + 1
  let d = date.getDate()
  let h = date.getHours()
  let min = date.getMinutes()
  let s = date.getSeconds()
  let result = ''
  if (format === undefined) {
    result = `${y}-${m < 10 ? '0' + m : m}-${d < 10 ? '0' + d : d} ${
      h < 10 ? '0' + h : h
    }:${min < 10 ? '0' + min : min}:${s < 10 ? '0' + s : s}`
  }
  if (format === 'yyyy-mm-dd') {
    result = `${y}-${m < 10 ? '0' + m : m}-${d < 10 ? '0' + d : d}`
  }
  if (format === 'yyyy-mm') {
    result = `${y}-${m < 10 ? '0' + m : m}`
  }
  if (format === 'mm-dd') {
    result = ` ${m < 10 ? '0' + m : m}:${d < 10 ? '0' + d : d}`
  }
  if (format === 'hh:mm') {
    result = ` ${h < 10 ? '0' + h : h}:${min < 10 ? '0' + min : min}`
  }
  if (format === 'yyyy') {
    result = `${y}`
  }
  if (format === 'yyyy-mm-dd h:min:s') {
    result = `${y}-${m < 10 ? '0' + m : m}-${d < 10 ? '0' + d : d} ${h < 10 ? '0' + h : h}:${min < 10 ? '0' + min : min}:${s < 10 ? '0' + s : s}`
  }
  if (format === 'yyyy.mm.dd') {
    result = `${y}.${m < 10 ? '0' + m : m}.${d < 10 ? '0' + d : d}`
  }
  return result
}



export default {
  timeFormat
}