Vue-全局过滤器注册

官方注册过滤器的方式：

export default {
  data () { return {} },
  filters:{
    orderBy (){
      // doSomething
    },
    uppercase () {
      // doSomething
    }
  }
}

但是我们做项目来说，大部分的过滤器是要全局使用的，不会每每用到就在组件里面去写，抽成全局的会更好些。 官方注册全局的方式：

// 注册
Vue.filter('my-filter', function (value) {
  // 返回处理后的值
})
// getter，返回已注册的过滤器
var myFilter = Vue.filter('my-filter')

但是分散写的话不美观，因此可以抽出成单独文件。

优化

我们可以抽出到独立文件，然后使用Object.keys在main.js入口统一注册

/src/common/filters.js

let dateServer = value => value.replace(/(d{4})(d{2})(d{2})/g, '$1-$2-$3')
export { dateServer }

/src/main.js

import * as custom from './common/filters/custom'
Object.keys(custom).forEach(key => Vue.filter(key, custom[key]))

然后在其他的.vue 文件中就可愉快地使用这些我们定义好的全局过滤器了

<template>
  <section class="content">
    <p>{{ time | dateServer }}</p> <!-- 2016-01-01 -->
  </section>
</template>
<script>
  export default {
    data () {
      return {
        time: 20160101
      }
    }
  }
</script>

---

juejin.im/post/5ae02f39518825672f198ac2