VueJs 自定义货币掩码

Question

我的货币掩码遇到了一些问题。

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

您可以检查代码盘的问题，任何人都可以帮助我解决这个问题吗？

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) {
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);
},

Answer 1

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

模板：

<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>

脚本：

function formatAsCurrency (value, dec) {
dec = dec || 0
if (value === null) {
return 0
}
return '' + value.toFixed(dec).replace(/(d)(?=(ddd)+(?!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, ''));
}
}
}
})

如果您有多个或两个输入，则有助于将这些输入转换为单独的(可重用的)组件。

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

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