开发 七月 23, 2019

Vue-l10n 货币本地化Vue插件

文章字数 4k 阅读约需 4 mins. 阅读次数 0

前言

前段时间看到项目里面的货币符号和金额转换的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

安装

npm install vue-l10n -D

使用

在Vue项目的main.js中

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项目的模板中

  <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中切换货币

  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

对象属性:

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”) 美元字符串转当地货币字符串(保留整数,四舍五入)
0%