VueJs 自定义货币掩码 [英] VueJs Custom currency mask

问题描述

我的货币掩码有问题.

当我在字段中输入 10000 时，它按预期格式化 10,000 但当我将焦点转移到另一个字段或按 Tab 键时.掩码将逗号位置向左移动 1.即 10,000 变为 1,0000

您可以检查 codepan 是否有问题，有人可以帮我解决这个问题吗?

https://codepen.io/veer3383/pen/BxqzLb?editors=1010#

模板:

<v-text-field @keyup="formatCurrency(initialBalance, $event)" :prefix="currency" v-model="initialBalance" label="Balance" :disabled="disabled"></v-text-field>

方法:

formatCurrency (num: any, e: any) {数量 = 数量 + '';var number = num.replace(/[^\d.-]/g, '');var splitArray = number.split('.');var 整数 = splitArray[0];var 尾数 = splitArray.length >1 ?'.'+ splitArray[1] : '';var rgx =/(\d+)(\d{3})/;而(rgx.test(整数)){integer = integer.replace(rgx, '$1' + ',' + '$2');}e.currentTarget.value = integer + mantissa.substring(0, 3);},

解决方案

你不需要 keyup 和 v-model，它们最终可能会造成冲突.我发现使用计算值(或带有格式化版本的手表)更容易.

模板:

<v-app id="inspire"><v-form ref="form" v-model="valid" 惰性验证><v-flex lg3=""><v-text-field :prefix="currency" v-model="initialBalanceFormatted" label="Balance" :disabled="disabled"></v-text-field></v-flex></v-form></v-app>

脚本:

function formatAsCurrency (value, dec) {dec = dec ||0如果(值 === 空){返回 0}return '' + value.toFixed(dec).replace(/(\d)(?=(\d\d\d)+(?!\d))/g, "$1,")}新的 Vue({el: '#app',数据:() =>({有效:真实，禁用:假，货币:£"，初始余额:空，}),计算:{初始余额格式:{得到:函数(){返回 formatAsCurrency(this.initialBalance, 0)},设置:函数(新值){this.initialBalance = Number(newValue.replace(/[^0-9\.]/g, ''));}}}})

如果您有一个或两个以上的组件，那么将这些输入转换为单独的(可重复使用的)组件会很有帮助.

这是我不久前制作的一个示例，它使用可以处理其他类型(如百分比)的组件，仅在模糊后进行格式化(因此您的逗号不会跳跃)并允许使用向上和向下键进行递增/递减

https://codepen.io/scorch/pen/oZLLbv?editors=1010

My Currency mask has got some issues.

When I am typing say 10000 in the field, it formats it as expected 10,000 but the moment i shift focus to another field or press tab. The mask shifts the comma position to the left by 1. i.e. 10,000 becomes 1,0000

You can check codepan for the issue, can anyone help me with this?

https://codepen.io/veer3383/pen/BxqzLb?editors=1010#

The template:

<v-text-field @keyup="formatCurrency(initialBalance, $event)" :prefix="currency" v-model="initialBalance" label="Balance" :disabled="disabled"></v-text-field>

The method:

formatCurrency (num: any, e: any) {
    num = num + '';
    var number = num.replace(/[^\d.-]/g, '');
    var splitArray = number.split('.');
    var integer = splitArray[0];
    var mantissa = splitArray.length > 1 ? '.' + splitArray[1] : '';
    var rgx = /(\d+)(\d{3})/;
    while (rgx.test(integer)){
        integer = integer.replace(rgx, '$1' + ',' + '$2');
    }
    e.currentTarget.value = integer + mantissa.substring(0, 3);
},

解决方案

You don't need a keyup AND v-model, they may end up creating a conflict. I find it's easier to use a computed value (or a watch with a formatted version).

template:

<div id="app">
  <v-app id="inspire">
    <v-form ref="form" v-model="valid" lazy-validation>
    <v-flex lg3="">
      <v-text-field :prefix="currency" v-model="initialBalanceFormatted" label="Balance" :disabled="disabled"></v-text-field>
      </v-flex>
    </v-form>
  </v-app>
</div>

script:

function formatAsCurrency (value, dec) {
  dec = dec || 0
  if (value === null) {
    return 0
  }
  return '' + value.toFixed(dec).replace(/(\d)(?=(\d\d\d)+(?!\d))/g, "$1,")
}

new Vue({
  el: '#app',
  data: () => ({
    valid: true,
    disabled: false,
    currency: "£",
    initialBalance: null,
  }),

  computed: {
    initialBalanceFormatted: {
      get: function() {
        return formatAsCurrency(this.initialBalance, 0)
      },
      set: function(newValue) {
        this.initialBalance =  Number(newValue.replace(/[^0-9\.]/g, ''));
      }
    }
  }
})

It helps to turn these inputs into separate (reusable) components if you have more than one or two.

Here's an example I made a while back that uses components that can handle other types like percentage, does formatting only after blured (so your comma is not jumping) and allows to use up and down key for increment/decrement

https://codepen.io/scorch/pen/oZLLbv?editors=1010

这篇关于VueJs 自定义货币掩码的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！