Skip to content

Input 输入框

继承el-input所有属性

通过鼠标或键盘输入字符

WARNING

Input 为受控组件,它 总会显示 Vue 绑定值

在正常情况下,input 的输入事件应该被正常响应。 它的处理程序应该更新组件的绑定值 (或使用 v-model)。 否则,输入框的值将不会改变。

不支持 v-model 修饰符。

基础用法

禁用状态

一键清空

格式化

formatter的情况下显示值,我们通常同时使用 parser

密码框

带图标的输入框

带有图标标记输入类型

文本域

用于输入多行文本信息可缩放的输入框。 添加 type="textarea" 属性来将 input 元素转换为原生的 textarea 元素。

自适应文本域

设置文字输入类型的 autosize 属性使得根据内容自动调整的高度。 你可以给 autosize 提供一个包含有最大和最小高度的对象,让输入框自动调整。

尺寸

输入长度限制

API

Attributes

属性名说明类型默认值
type类型string 'text' | 'textarea' | 'password' | 'button' | 'checkbox' | 'file' | 'number' | 'radio' | ... 等原生 input 类型text
model-value / v-model绑定值string / number
maxlength同原生 maxlength 属性string / number
minlength原生属性,最小输入长度string / number
show-word-limit是否显示统计字数, 只在 type 为 'text' 或 'textarea' 的时候生效booleanfalse
placeholder输入框占位文本string
clearable是否显示清除按钮,只有当 type 不是 textarea时生效booleanfalse
formatter指定输入值的格式。(只有当 type 是"text"时才能工作)Function (value: string | number) => string
disabled是否禁用booleanfalse
size输入框尺寸,只在 type 不为 'textarea' 时有效enum 'large' | 'default' | 'small'
autosizetextarea 高度是否自适应,仅 type 为 'textarea' 时生效。 可以接受一个对象,比如: { minRows: 2, maxRows: 6 }boolean / object { minRows?: number, maxRows?: number }false
autocomplete原生 autocomplete 属性stringoff
name等价于原生 input name 属性string
readonly原生 readonly 属性,是否只读booleanfalse
max原生 max 属性,设置最大值
min原生属性,设置最小值

Events

事件名说明类型
blur当选择器的输入框失去焦点时触发Function (event: FocusEvent) => void
focus当选择器的输入框获得焦点时触发Function (event: FocusEvent) => void
clear在点击由 clearable 属性生成的清空按钮时触发Function () => void