Vue-l10n 货币本地化Vue插件
Madman 后端工程师

前言

前段时间看到项目里面的货币符号和金额转换的Vue 全局过滤器,感觉这样实现一点都不优雅,而且存在不完善,不统一的问题。比如每次都需要实时算,每次切换货币要强刷页面重新加载。然后就想到了vue-i18n这个vue官方插件,多语言国际化,他是怎么做到不刷新页面切换语言的?于是就去观摩vue-i18n的源码,然后我就参考vue-i18n写了一个vue-l10n的货币转换本地化的Vue插件。

vue-l10n 一个货币显示本地化的Vue插件

介绍

vue-l10n-currency 是参照vue-i18n 的vue插件方式实现的一个 货币本地化转换Vue插件。
Dmoe预览和文档 vue-l10n example

安装

1
npm install vue-l10n -D

使用

在Vue项目的main.js中

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
import VueL10nCurrency from 'vue-l10n'
Vue.use(VueL10nCurrency)
const l10nCurrency = new VueL10nCurrency({
isoCode: 'USD',
stuExchangeRate: 1,
utsExchangeRate: 1,
symbolDisplay: '$'
})

new Vue({
l10nCurrency,
router,
render: h => h(App)
}).$mount('#app')

在Vue项目的模板中

1
2
3
4
5
6
<p>{{$uts(34.62)}}</p> // 按照汇率从USD(美元)转换为Self(本地货币),保留两位小数四舍五入
<p>{{$utsc(34.62)}}</p> // 按照汇率从USD(美元)转换为Self(本地货币),保留两位小数,两位小数后值大于0就进位
<p>{{$utst(34.62)}}</p> // 按照汇率从USD(美元)转换为Self(本地货币),保留两位小数,舍去两位小数后的值不进位
<p>{{$stu(237.41)}}</p> // 按照汇率从Self(本地货币)转换为USD(美元)保留两位小数四舍五入
<p>{{$textUts("这个金额是$23.5,那个金额是$18.99")}}</p> // 将一段字符串中的$符号的金额,按照汇率从USD(美元)转换为Self(本地货币),保留两位小数四舍五入
<p>{{$textUtsi("这个金额是$23.5,那个金额是$18.99")}}</p> // 将一段字符串中的$符号的金额,按照汇率从USD(美元)转换为Self(本地货币),保留整数四舍五入

在js中切换货币

1
2
3
4
5
6
7
8
9
10
const isoCode = 'CNY'
const utsExchangeRate = 6.85765
const stuExchangeRate = 0.14582
const symbolDisplay = '¥'
this.$l10nCurrency.currency = {
isoCode,
stuExchangeRate,
utsExchangeRate,
symbolDisplay
}

API文档

Vue全局对象

l10nCurrency

this.$l10nCurrency

对象属性:

1
2
3
4
5
6
7
8
9
10
11
12
13
currency: {
  isoCode:'USD',
  stuExchangeRate: 1,
  utsExchangeRate: 1,
  symbolDisplay: ‘$’
}
_computeTypeEnum: {
ROUNDING: 'rounding', // 保留两位小数,四舍五入
CARRY: 'carry', // 保留两位小数,后面有值就进位
TRUNCATION: 'truncation', // 保留两位小数,直接舍去后面的小数
INT: 'int', // 保留整数,四舍五入
ORIGINAL: 'original' // 保留原始计算结果
}
Vue全局函数 使用 描述
uts $uts(34.62) 美元转当地货币金额(保留两位小数,四舍五入)
utsc $utsc(34.62) 美元转当地货币金额(保留两位小数,后面有值就进位)
utst $utst(34.62) 美元转当地货币金额(保留两位小数,直接舍去后面的小数)
stu $stu(237.41) 当地货币美元金额(保留两位小数,四舍五入)
stuo $stuo(237.41) 当地货币美元金额(保留原始计算结果)
textUts $textUts(“这个金额是$23.5,那个金额是$18.99”) 美元字符串转当地货币字符串(保留两位小数,四舍五入)
textUtsi $textUtsi(“这个金额是$23.5,那个金额是$18.99”) 美元字符串转当地货币字符串(保留整数,四舍五入)
  • 本文标题:Vue-l10n 货币本地化Vue插件
  • 本文作者:Madman
  • 创建时间:2019-07-23 11:03:53
  • 本文链接:https://www.patpat.site/开发/Vue-l10n-货币本地化Vue插件.html
  • 版权声明:本博客所有文章除特别声明外,均采用 BY-NC-SA 许可协议。转载请注明出处!
 评论