Input

Ingresa datos usando el ratón o teclado.

WARNING

Input es un componente controlado, que siempre muestra el valor de enlace con Vue.

Bajo circunstancias normales, el evento input debe ser manejado. Su handler debe actualizar el valor de enlace del componente (o usar v-model). De lo contrario, el valor del input no cambiará.

No admite modificadores v-model.

Uso básico

Deshabilitar

Limpiable

Formato

Muestre el valor, según la situación, con formatter, y normalmente se usa parser al mismo tiempo.

Contraseña

Input con icono

Añada un icono para indicar el tipo de Input.

Textarea

Redimensionable para introducir múltiples líneas de información de texto. Agregue el atributo type="textarea" para cambiar el input al tipo nativo textarea.

Textarea de tamaño automático

El ajuste de la propiedad autosize en el tipo de Input textarea hace que la altura se ajuste automáticamente en función del contenido. Se pueden proporcionar opciones en un objeto para autosize y especificar el número mínimo y máximo de líneas que el textarea puede ajustar automáticamente.

Mezclando elementos con input

Añada un elemento antes o después del input, generalmente será una etiqueta o un botón.

Tamaños

Limitar el tamaño

API

Atributos

Nombre	Descripción	Tipo	Por defecto
type	tipo de input	`string` native input types	text
model-value / v-model	valor enlazado	`string` / `number`	—
maxlength	same as `maxlength` in native input	`string` / `number`	—
minlength	igual que `minlength` en el input nativo	`string` / `number`	—
show-word-limit	si se muestra el contador de palabras, solamente funciona cuando `type` es 'text' o 'textarea'	`boolean`	false
placeholder	placeholder del Input	`string`	—
clearable	si mostrar el botón limpiar, solo funciona cuando `type` no es 'textarea'	`boolean`	false
formatter	especifica el formato del valor presentado en el input.(solo funciona cuando `type` es 'text')	`Function`	—
parser	especifica el valor extraído del input formateado.(solo funciona cuando `type` es 'text')	`Function`	—
show-password	si debe mostrar la posibilidad de conmutación en el input de tipo password	`boolean`	false
disabled	si esta deshabilitado	`boolean`	false
size	tamaño del input, esto funciona cuando `type` no es 'textarea'	`enum`	—
prefix-icon	componente de icono prefijo	`string` / `Component`	—
suffix-icon	componente de icono sufijo	`string` / `Component`	—
rows	número de filas, solo funciona cuando `type` es 'textarea'	`number`	2
autosize	si textarea tiene una altura adaptativa, solo funciona cuando `type` es 'textarea'. Puede aceptar un objeto, por ejemplo, `{ minRows: 2, maxRows: 6 }`	`boolean` / `object`	false
autocomplete	igual que `autocomplete` en el input nativo	`string`	off
name	como `name` en el input nativo	`string`	—
readonly	igual que `readonly` en el input nativo	`boolean`	false
max	igual que `max` en el input nativo	—	—
min	igual que `min` en el input nativo	—	—
step	igual que `step` en el input nativo	—	—
resize	controlar la resizabilidad	`enum`	—
autofocus	igual que `autofocus` en el input nativo	`boolean`	false
form	igual que `form` en el input nativo	`string`	—
label a11y deprecated	igual que `aria-label` en el input nativo	`string`	—
aria-label a11y 2.7.2	same as `aria-label` in native input	`string`	—
tabindex	orden de tabulación para el Input	`string` / `number`	—
validate-event	si se debe lanzar la validación de formulario	`boolean`	true
input-style	el estilo del elemento input o elemento textarea	`string` / `object`	{}

Eventos

Nombre	Descripción	Tipo
blur	se dispara cuando el input pierde el foco	`Function`
focus	se lanza cuando el input se enfoca	`Function`
change	se dispara cuando el input pierde el foco o el usuario presiona Enter, solo si el modelValue ha cambiado	`Function`
input	se dispara cuando el valor del input cambia	`Function`
clear	se dispara cuando el input se borra haciendo clic en el botón de borrar	`Function`

Slots

Nombre	Descripción
prefix	contenido como prefijo del input, solo funciona cuando `type` no es 'textarea'
suffix	contenido como sufijo del input, solo funciona cuando `type` no es 'textarea'
prepend	contenido a añadir antes del input, solo funciona cuando `type` no es 'textarea'
append	contenido para añadir después del input solo funciona cuando `type` no es 'textarea'

Expuesto

Nombre	Descrición	Tipo
blur	quita el foco en el input	`Function`
clear	borra contenido del input	`Function`
focus	coloca el foco en el input	`Function`
input	Elemento HTML input	`object`
ref	Elemento HTML, input o textarea	`object`
resizeTextarea	redimensiona textarea	`Function`
select	selecciona el texto del input	`Function`
textarea	Elemento HTML textarea	`object`
textareaStyle	estilo de textarea	`object`

FAQ

Why is the width of the ElInput component expanded by clearable?

Typical issue: #7287

PS: Since the ElInput component does not have a default width, when the clearable icon is displayed, the width of the component will be expanded, which can be solved by setting width.

<el-input v-model="input" clearable style="width: 200px" />

Fuente

Componentes • Documentación

Contribuidores

Form

Input Number

Input #

Uso básico #

Deshabilitar #

Limpiable #

Formato #

Contraseña #

Input con icono #

Textarea #

Textarea de tamaño automático #

Mezclando elementos con input #

Tamaños #

Limitar el tamaño #

API #

Atributos #

Eventos #

Slots #

Expuesto #

FAQ #

Why is the width of the ElInput component expanded by clearable? #

Fuente #

Contribuidores #