Currency Input

Поле ввода валюты с форматированием на лету. Форматирует по мере набора с настраиваемыми десятичным разделителем, разделителем тысяч, префиксом, суффиксом и точностью.

v-model:

<script setup>
const amount = ref(null)
</script>

<template>
  <VxCurrencyInput
    v-model="amount"
    :options="{ prefix: '$ ', thousands: ',', decimal: '.', precision: 2 }"
  />
  <!-- Type: 1234567 → displays: $ 1,234,567.00 -->
  <!-- v-model: 1234567 (number) -->
</template>

Dollar Format

1234567.89

<template>
  <!-- $ 1,234,567.89 -->
  <VxCurrencyInput :options="{ prefix: '$ ', thousands: ',', decimal: '.', precision: 2 }" />
</template>

Euro Format

50000

<template>
  <!-- 50.000,00 € -->
  <VxCurrencyInput :options="{ suffix: ' €', thousands: '.', decimal: ',', precision: 2 }" />
</template>

Space as Thousands Separator

9999.99

<template>
  <!-- 9 999.99 -->
  <VxCurrencyInput :options="{ thousands: ' ', decimal: '.', precision: 2 }" />
</template>

UZS (no decimals, space separator)

1500

<template>
  <!-- 1 500 sum -->
  <VxCurrencyInput :options="{ suffix: ' sum', thousands: ' ', precision: 0 }" />
</template>

RUB Format

42000

<template>
  <!-- 42 000,00 ₽ -->
  <VxCurrencyInput :options="{ suffix: ' ₽', thousands: ' ', decimal: ',', precision: 2 }" />
</template>

Prefix + Suffix

250.5

<template>
  <!-- USD 250 .00 -->
  <VxCurrencyInput :options="{ prefix: 'USD ', suffix: ' .00', thousands: ',', precision: 0 }" />
</template>

Clearable

<template>
  <VxCurrencyInput v-model="amount" :options="{ prefix: '$ ' }" clearable />
</template>

Sizes

<template>
  <VxCurrencyInput size="sm" />
  <VxCurrencyInput />
  <VxCurrencyInput size="lg" />
</template>

Allow Negative

<template>
  <VxCurrencyInput allow-negative />
</template>

Options Reference

Key	Type	Default	Description
decimal	string	'.'	Символ десятичного разделителя
thousands	string	','	Разделитель тысяч (используйте ' ' для пробела)
prefix	string	''	Текст префикса (например, '$ ', '€ ')
suffix	string	''	Текст суффикса (например, ' USD', ' sum', ' ₽')
precision	number	2	Количество знаков после запятой
masked	boolean	false	Если true, v-model возвращает форматированную строку

Props

Prop	Type	Default	Description
modelValue	number | string | null	null	Значение (v-model)
options	CurrencyOptions	{}	Опции форматирования (см. выше)
placeholder	string	'0.00'	Placeholder
disabled	boolean	false	Отключить
readonly	boolean	false	Только для чтения
clearable	boolean	false	Кнопка очистки
size	'sm' | 'default' | 'lg'	'default'	Размер
allowNegative	boolean	false	Разрешить отрицательные значения

Events

Event	Type	Description
update:modelValue	(v: number | string | null)	Значение изменено
change	(v: number | null)	Значение изменено при потере фокуса
focus	(e: FocusEvent)	Получен фокус
blur	(e: FocusEvent)	Потерян фокус