Currency Input

Jonli formatlovchi valyuta kiritish. Sozlanadigan o'nli, minglar ajratuvchisi, prefiks, suffiks va aniqlik bilan siz yozayotganingizda formatlaydi.

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	'.'	O'nli ajratuvchi belgisi
thousands	string	','	Minglar ajratuvchisi (bo'sh joy uchun ' ' dan foydalaning)
prefix	string	''	Prefiks matni (masalan, '$ ', '€ ')
suffix	string	''	Suffiks matni (masalan, ' USD', ' sum', ' ₽')
precision	number	2	O'nli xonalar soni
masked	boolean	false	Rost bo'lsa, v-model formatlangan satrni qaytaradi

Props

Prop	Type	Default	Description
modelValue	number | string | null	null	Qiymat (v-model)
options	CurrencyOptions	{}	Formatlash variantlari (yuqoriga qarang)
placeholder	string	'0.00'	Placeholder
disabled	boolean	false	O'chirish
readonly	boolean	false	Faqat o'qish
clearable	boolean	false	Tozalash tugmasi
size	'sm' | 'default' | 'lg'	'default'	O'lcham
allowNegative	boolean	false	Salbiy qiymatlarga ruxsat berish

Events

Event	Type	Description
update:modelValue	(v: number | string | null)	Qiymat o'zgardi
change	(v: number | null)	Blurda qiymat o'zgardi
focus	(e: FocusEvent)	Fokuslandi
blur	(e: FocusEvent)	Fokus yo'qoldi