Componente TextArea

El componente TextArea te permite crear campos de texto multi-línea personalizados con varias propiedades y opciones. Puedes utilizarlo para obtener entradas de texto más largas en formularios u otras interacciones.

Uso en Componentes

Utilizando en un Componente

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

<script setup lang="ts">

import { ref } from 'vue';
const text = ref('');

</script>

<template>
  <div>
    <TextArea
      v-model:model-value="text"
      :placeholder="'Escribe aquí'"
      :rows="3"
      :max-rows="6"
      :listen-change="true"
      :listen-form="false"
      :listen-focus="true"
      :validations="[
        { rule: 'required', message: 'Este campo es obligatorio' },
        { rule: 'minLength:10', message: 'La longitud mínima es 10 caracteres' }
      ]"
    />
  </div>
</template>

Propiedades

El componente TextArea acepta las siguientes propiedades:

Propiedad	Tipo	Valor por defecto	Descripción
v-model:model-value	string		Enlace bidireccional al valor del campo de texto.
placeholder	string		Define el texto de marcador de posición para el campo de texto.
rows	number	3	Número de filas visibles del campo de texto.
max-rows	number	6	Número máximo de filas antes de mostrar barras de desplazamiento.
listen-change	boolean	true	Indica si se debe escuchar el evento change del campo de texto.
listen-form	boolean	false	Indica si se debe escuchar cambios en el formulario.
listen-focus	boolean	true	Indica si se debe escuchar eventos de enfoque del campo de texto.
validations	Array		Define las validaciones para el campo de texto.
errors	Array	[]	Muestra mensajes de error asociados al campo de texto.

Eventos

El componente TextArea 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