Componente Input

El componente Input te permite crear campos de entrada de texto personalizados con varias propiedades y opciones. Puedes utilizarlo para obtener entradas de texto en formularios u otras interacciones.

Uso en Componentes

Utilizando en un Componente

Puedes utilizar el componente Input en tus componentes de la siguiente manera:

<template>
  <Input
    :placeholder="'Nombre'"
    :type="'text'"
    :validations="validations"
    :listen-change="true"
    :listen-form="true"
    :listen-focus="true"
    v-model:model-value="inputValue"
    @on-change="handleInputChange(index, $event, input)"
    @on-focus="handleInputFocus(index, $event, input)"
    @on-blur="handleInputBlur(index, $event, input)"
    @set-error="handleInputError(index, $event, input)"
  />
</template>

<script setup lang="ts">
import { ref } from 'vue';

const inputValue = ref('');

const validations = ref({
    required: true,
    min: 5,
    max: 10
})
// Métodos para manejar eventos
const handleInputChange = (index, value, input) => {
  // Lógica para manejar el cambio en el campo de entrada
};

const handleInputFocus = (index, event, input) => {
  // Lógica para manejar el enfoque en el campo de entrada
};

const handleInputBlur = (index, event, input) => {
  // Lógica para manejar la pérdida de enfoque en el campo de entrada
};

const handleInputError = (index, value, input) => {
  // Lógica para manejar el error en el campo de entrada
};
</script>

Propiedades

El componente Input acepta las siguientes propiedades:

Propiedad	Tipo	Valor por defecto	Descripción
placeholder	String		Define el texto de marcador de posición para el campo de entrada.
value	Cualquier tipo		Define el valor del campo de entrada.
type	InputType ('text', 'password', etc.)	'text'	Establece el tipo de entrada (por ejemplo, "text", "password", etc.).
disabled	Boolean	false	Deshabilita el campo de entrada.
state	Boolean, null	null	Indica el estado del campo de entrada.
customClass	String		Agrega clases de estilo personalizadas al campo de entrada.
validations	Object		Define las validaciones para el campo de entrada.
errors	Array de strings	[]	Muestra los mensajes de error asociados al campo de entrada.
listenChange	Boolean		Indica si se debe escuchar el evento change del campo de entrada.
listenForm	Boolean		Indica si se debe escuchar los cambios en el formulario que contiene el campo de entrada.
listenFocus	Boolean		Indica si se debe escuchar los eventos de enfoque del campo de entrada.
preppendClass	String	''	Agrega clases de estilo personalizadas al elemento preppend del campo de entrada.
iconLeft	String		Define la ruta de la imagen del icono que se mostrará a la izquierda del campo de entrada.
formatValue	Function		Permite dar formato al valor antes de mostrarlo en el campo de entrada.

Eventos

El componente Input emite los siguientes eventos:

Evento	Parámetros	Descripción
update:model-value	value: string	Emitido cuando cambia el valor
onChange	value: string	Emitido al cambiar el contenido
setError	value: boolean o null	Emitido cuando cambia el estado de error
onFocus	value: string	Emitido al enfocar el campo
onBlur	event: Event	Emitido al perder el enfoque del campo