VUE全局定义filter

1 一般情况

官方注册过滤器的方式：

export default {

    data () { return {} },

    filters:{

        orderBy (){

            // doSomething

    },

    uppercase () {

        // doSomething

        }

    }

}

但是我们做项目来说，大部分的过滤器是要全局使用的，不会每每用到就在组件里面去写，抽成全局的会

更好些。

官方注册全局的方式：

// 注册

Vue.filter( 'my-filter' , function (value) {

    // 返回处理后的值

})

// getter，返回已注册的过滤器

var myFilter  = Vue.filter( 'my-filter' )

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

2 优化

我们可以抽出到独立文件，然后使用 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 文件中就可愉快地使用这些我们定义好的全局过滤器了