VueJs Пользовательская маска валюты

Question

У моей маски валюты есть некоторые проблемы.

Когда я набираю слово "1003" в поле, оно форматирует его, как и ожидалось 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)(?=(\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, ''));
      }
    }
  }
})

Помогает превратить эти входы в отдельные (многократно используемые) компоненты, если у вас более одного или двух.

Вот пример, который я сделал некоторое время назад, в котором используются компоненты, которые могут обрабатывать другие типы, такие как процент, форматирование только после размытия (так что ваша запятая не прыгает) и позволяет использовать клавиши вверх и вниз для увеличения / уменьшения

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