Vue2 全局過濾器（vue-cli）

先看官方簡介：

當前組件注冊：

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

但是我們做項目來說，大部分的過濾器是要全局使用的，不會每每用到就在組件里面去寫，嗯，還是抽成全局的會更好些。

全局注冊：（官網https://cn.vuejs.org/v2/api/#filters）

// 注冊
Vue.filter('my-filter', function (value) {
// 返回處理后的值
})
 
// getter，返回已注冊的過濾器
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示例請點擊這里查看。

https://github.com/xiterjia/vue-global-filters