Input 输入框

通过鼠标或键盘输入字符

WARNING

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

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

不支持 v-model 修饰符。

基础用法

禁用状态

一键清空

格式化

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

密码框

带图标的输入框

带有图标标记输入类型

文本域

用于输入多行文本信息可缩放的输入框。 Resizable for entering multiple lines of text information. Add attribute type="textarea" to change input into native textarea.

自适应文本域

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

复合型输入框

可以在输入框中前置或后置一个元素,通常是标签或按钮。

尺寸

输入长度限制

Input 属性

属性说明类型可选值默认值
type类型stringtext,textarea 和其他原生 input 的 type 值text
modelValue / v-model绑定值string / number
maxlength最大输入长度string / number
minlength原生属性,最小输入长度number
show-word-limit是否显示输入字数统计,只在 type = "text"type = "textarea" 时有效booleanfalse
placeholder输入框占位文本string
clearable是否可清空booleanfalse
formatter指定输入值的格式。(只有当 type 是"text"时才能工作)function(value: string / number): string
parser指定从格式化器输入中提取的值。(仅当 type 是"text"时才起作用)function(string): string
show-password是否显示切换密码图标booleanfalse
disabled是否禁用booleanfalse
size输入框尺寸,只在 type 不为 'textarea' 时有效stringlarge / default / small
prefix-icon自定义前缀图标string / Component
suffix-icon自定义后缀图标string / Component
rows输入框行数,仅 type 为 'textarea' 时有效number2
autosizetextarea 高度是否自适应,仅 type 为 'textarea' 时生效。 可以接受一个对象,比如: { minRows: 2, maxRows: 6 }boolean / objectfalse
autocomplete原生 autocomplete 属性stringoff
name等价于原生 input name 属性string
readonly原生 readonly 属性,是否只读booleanfalse
max原生 max 属性,设置最大值
min原生属性,设置最小值
step原生属性,设置输入字段的合法数字间隔
resize控制是否能被用户缩放stringnone / both / horizontal / vertical
autofocus原生属性,自动获取焦点booleanfalse
form原生属性string
label标签文本string
tabindex输入框的 tabindexstring / number--
validate-event输入时是否触发表单的校验boolean-true
input-styleinput 元素或 textarea 元素的 styleobject-{}

Input 插槽

名称说明
prefix输入框头部内容,只对非 type="textarea" 有效
suffix输入框尾部内容,只对非 type="textarea" 有效
prepend输入框前置内容,只对非 type="textarea" 有效
append输入框后置内容,只对非 type="textarea" 有效

Input 事件

事件名说明参数
blur在 Input 失去焦点时触发(event: Event)
focus在 Input 获得焦点时触发(event: Event)
change仅当 modelValue 改变时,当输入框失去焦点或用户按Enter时触发(value: string | number)
input在 Input 值改变时触发(value: string | number)
clear在点击由 clearable 属性生成的清空按钮时触发

Input 方法

方法说明参数
focus使 input 获取焦点
blur使 input 失去焦点
select选中 input 中的文字

源代码

组件文档

贡献者