Vue全局Filter体验

定义全局Filter

src/common/global.js

import Vue from 'vue'

Vue.filter('formatOrderStatus', function (orderStatus) {
  switch (orderStatus) {
    case 'INIT':
      return '订单创建'
    case 'WAITPAY':
      return '等待支付'
    case 'PAYSUCCESS':
      return '支付成功'
    case 'PAYFAILURE':
      return '支付失败'
    default:
      return ''
  }
})

配置webpack

build/webpack.base.conf.js

module.exports = {
  ...
  resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': resolve('src'),
      'Global': path.resolve(__dirname, '../src/common/global.js'),
    }
  },
  ...
  plugins: [
    new webpack.optimize.CommonsChunkPlugin('common.js'),
    new webpack.ProvidePlugin({
      jQuery: "jquery",
      $: "jquery",
      Global: "Global",
    })
  ]
}

使用全局Filter

<template>
  <span>{{ order.orderStatus | formatOrderStatus }}</span>
</template>

<script>
import Global from 'Global' // eslint-disable-line no-unused-vars

export default {
  data () {
    return {
      order: {}
    }
  }
}