vue 货币过滤器_基于accounting.js的轻量级vue货币过滤器

vue 货币过滤器

Vue货币过滤器 (Vue Currency Filter)

Lightweight vue currency filter based on accounting.js.

基于accounting.js的轻量级vue货币过滤器。

View demo 查看演示 View Github 查看Github

下载 (Download)

# NPM
npm install vue-currency-filter

# Yarn
yarn add vue-currency-filter

样品用量 (Sample Usage)

Step by step to using vue-currency-filter:

逐步使用vue-currency-filter ：

导入main.js (Import in main.js)

import VueCurrencyFilter from 'vue-currency-filter'

使用插件 (Use Plugins)

Vue.use(VueCurrencyFilter)

添加全局配置 (Add Global Configuration)

Vue.use(VueCurrencyFilter,
{
  symbol : '$',
  thousandsSeparator: '.',
  fractionCount: 2,
  fractionSeparator: ',',
  symbolPosition: 'front',
  symbolSpacing: true
})

在视图中使用 (Use in View)

<span>{{ 20000 | currency}}</span>

Nuxt.js中的用法 (Usage in Nuxt.js)

Add vue-currency-filter/nuxt to modules section of nuxt.config.js

添加vue-currency-filter/nuxt到的模块部nuxt.config.js

{
  modules: [
    'vue-currency-filter/nuxt',

    // Or if you have custom options...
    ['vue-currency-filter/nuxt', {
      symbol: '$',
      thousandsSeparator: ',',
      fractionCount: 2,
      fractionSeparator: '.',
      symbolPosition: 'front',
      symbolSpacing: true
    }],
  ]
}

不使用NPM的用法 (Usage without NPM)

Add script dependencies

添加脚本依赖项

<!-- Vue Dependency -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

<!-- Vue Currency Filter Dependency -->
<script src="https://unpkg.com/[email protected]/dist/vue-currency-filter.iife.js"></script>
<!-- Change 3.2.3 with latest version -->

Use filters in global

在全局中使用过滤器

if (VueCurrencyFilter) {
  Vue.use(VueCurrencyFilter, {
    symbol: "£",
    thousandsSeparator: ",",
    fractionCount: 0,
    fractionSeparator: ".",
    symbolPosition: "front",
    symbolSpacing: false
  })
}

var app = new Vue({
  el: '#app',
  data: {
    curr: 1000
  }
});

See https://codepen.io/mazipan/pen/YdmNMy for code sample.

有关代码示例，请参见https://codepen.io/mazipan/pen/YdmNMy 。

在特定位置添加配置 (Add Configuration In Specific Place)

<span>
{{ textInput | currency(configSymbol, configSeparator, configFractionCount,
configFractionSeparator, configSymbolPosition, configSymbolSpacing)}}
</span>

Now configurations is also available as Object, thanks to sunhengzhe in PR #25:

现在 ，由于PR＃25中的 sunhengzhe ， 配置也可以作为Object使用 ：

<span>
{{ textInput | currency({
  symbol: '',
  thousandsSeparator: '',
  fractionCount: '',
  fractionSeparator: '',
  symbolPosition: '',
  symbolSpacing: ''
})}}
</span>

可用选项 (Available Options)

{
  name: 'string (default: currency)', // using for multiple instance filters
  symbol: 'string (default : empty string)',
  thousandsSeparator: 'string (default : .)',
  fractionCount: 'number (default : 0)',
  fractionSeparator: 'string (default: ",")',
  symbolPosition: 'string (default: front)',
  symbolSpacing: 'boolean (default: true)'
}

更新全局配置 (Update Global Configs)

Since global config only can be setted from Vue.use(VueCurrencyFilter, configs), but sometimes we need to update this global configs on runtime process.

由于只能从Vue.use(VueCurrencyFilter, configs)设置全局配置，但有时我们需要在运行时过程中更新此全局配置。

from v3.1.0 we intoduce prototype method that can be update this global configs. You can use anywhere in your components like this code below:

从v3.1.0开始，我们引入了可以更新此全局配置的原型方法。 您可以在组件的任何地方使用，例如以下代码：

this.$CurrencyFilter.setConfig(newConfigs)

But please be aware, this method is only update global configs without trigger to re-run filter function. So maybe you will face not sync data from your configs and your view. You need to update some value to trigger this new configs applied.

但是请注意，此方法仅更新全局配置，而无需触发即可重新运行过滤器功能。 因此，也许您将面对不同步配置和视图中的数据的问题。 您需要更新一些值以触发应用此新配置。

如何在单元测试中进行测试 (How to test in Unit Test)

Using @vue/test-utils we can create test for any Vue Plugins, like:

使用@vue/test-utils我们可以为任何Vue插件创建测试，例如：

/* eslint-env jest */
import { shallowMount, createLocalVue } from "@vue/test-utils";
import VueCurrencyFilter from "vue-currency-filter";

import Component from "../pages/myComponent.vue";

describe("test myComponent", () => {
  it("vue-currency-filter should working correctly", () => {
    let localVue = createLocalVue();
    localVue.use(VueCurrencyFilter, {
      symbol: "$",
      thousandsSeparator: ",",
      fractionCount: 2,
      fractionSeparator: ".",
      symbolPosition: "front",
      symbolSpacing: true
    });

    let wrapper = shallowMount(Component, {
      localVue
    });

    let result = wrapper.find(".curr");
    expect(result.text()).toEqual("$ 1,000.00");
  });
});

See sample test here: https://codesandbox.io/s/6xk1mv694n

在此处查看示例测试： https ： //codesandbox.io/s/6xk1mv694n

翻译自: https://vuejsexamples.com/lightweight-vue-currency-filter-based-on-accounting-js/

vue 货币过滤器