Vue2 全局过滤器(vue-cli)

先看官方简介:

当前组件注册:

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

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

全局注册:(官网https://cn.vuejs.org/v2/api/#filters

1 // 注册
2 Vue.filter('my-filter', function (value) {
3 // 返回处理后的值
4 })
5  
6 // getter,返回已注册的过滤器
7 var myFilter = Vue.filter('my-filter')

当项目所用到的过滤器比较多时,就想试着把所有的方法定义在一个文件里面导出,嗯,毕竟还是有分点层次的。

/src/common/filters/custom.js

let dateServer = value => {
  return 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>

 

——————分割线:2017年7月18日
Demo示例请点击这里查看。
 
posted @ 2017-04-12 20:56 xiter 阅读(...) 评论(...) 编辑 收藏