InputAmount
Uso
El componente SInputAmount renderiza un input numerico formateado para montos de moneda. Formatea automaticamente el valor basado en la precision decimal y el locale de la moneda seleccionada. Usa v-model para enlazar el valor numerico y currency para establecer la moneda activa.
Simbolo de Moneda
Establece symbol en true para mostrar el simbolo de la moneda como prefijo (ej., $ para USD, € para EUR).
Sufijo de Moneda
Establece suffixCurrency en true para mostrar el codigo de moneda (ej., USD) como sufijo despues del input.
Multiples Monedas
Pasa un array currencies para habilitar un selector desplegable de monedas en el lado derecho. Enlaza la moneda seleccionada con v-model:currency.
Modo Unidad Menor
Establece minorUnitMode en true para trabajar con unidades menores (ej., centavos). El modelValue se emitira como el monto multiplicado por 10^decimales. Por ejemplo, $22.99 USD se convierte en 2299.
Error
Establece error en true para mostrar el input con estilo de error.
Deshabilitado
Establece disabled en true para prevenir la interaccion del usuario.
Props
| Prop | Tipo | Default | Descripcion |
|---|---|---|---|
modelValue | number | null | - | El valor numerico del monto (v-model) |
currency | string | - | El codigo de moneda ISO 4217 activo (ej., 'USD', 'EUR', 'COP') |
currencies | string[] | - | Array de codigos de moneda para mostrar un selector desplegable |
symbol | boolean | false | Muestra el simbolo de la moneda como prefijo |
suffixCurrency | boolean | false | Muestra el codigo de moneda como sufijo |
locale | string | - | Cadena de locale BCP 47 para el formato numerico (ej., 'en-US', 'es-CO') |
minorUnitMode | boolean | false | Emite y acepta valores en unidades menores (centavos) |
placeholder | string | - | Texto placeholder |
disabled | boolean | false | Deshabilita el input |
error | boolean | false | Muestra estilo de error |
rounded | 'both' | 'left' | 'right' | 'none' | 'full' | 'both' | Estilo de borde redondeado |
borderless | boolean | false | Elimina el borde |
class | string | - | Clases CSS adicionales para el contenedor |
inputClass | string | - | Clases CSS adicionales para el elemento input |
Eventos
| Evento | Payload | Descripcion |
|---|---|---|
update:modelValue | number | null | Emitido cuando el valor del monto cambia |
update:currency | string | undefined | Emitido cuando la moneda seleccionada cambia |
info | AmountInfo | Emitido con informacion detallada del monto incluyendo moneda, decimales, codigo, simbolo y unidad menor |
change | number | null | Emitido al cambiar el valor (requerido por vue-currency-input) |
Slots
| Nombre | Descripcion |
|---|---|
left | Contenido personalizado en el lado izquierdo del input |
right | Contenido personalizado en el lado derecho del input |