Vue全局Filter体验

定义全局Filter

src/common/global.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<template>
<span>{{ order.orderStatus | formatOrderStatus }}</span>
</template>

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

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

Powered by AppBlog.CN     浙ICP备14037229号

Copyright © 2012 - 2020 APP开发技术博客 All Rights Reserved.

访客数 : | 访问量 :