Input 输入框

通过鼠标或键盘输入字符。

基础用法

基础的输入框用法。

禁用状态

通过 disabled 属性指定是否禁用 input 组件。

只读状态

通过 readonly 属性指定是否只读。

可清空

使用 clearable 属性即可得到一个可清空的输入框。

密码框

使用 show-password 属性即可得到一个可切换显示隐藏的密码框。

带图标的输入框

可以通过 prefix-icon 和 suffix-icon 属性在 input 组件首部和尾部增加显示图标，也可以通过 slot 来放置图标。

不同尺寸

Input 组件提供除了默认值以外的三种尺寸，可以在不同场景下选择合适的输入框尺寸。

复合型输入框

可前置或后置元素，一般为标签或按钮。

字数限制

使用 maxlength 和 show-word-limit 属性，来控制输入长度。

文本域（Textarea）

支持多行文本输入，通过设置 type="textarea" 使用文本域。可以配合 rows 控制行数、resize 控制缩放方向，以及 maxlength/show-word-limit 显示字数统计；并支持通过 textarea-count-placement 控制字数统计显示位置（inner 或 outer）。

Input Attributes

属性名	说明	类型	可选值	默认值
model-value	绑定值	string / number	—	—
type	类型	string	text / password / email / number / tel / url / search / textarea	text
size	输入框尺寸	string	large / default / small	default
placeholder	输入框占位文本	string	—	—
clearable	是否可清空（type≠textarea 生效）	boolean	—	false
show-password	是否显示切换密码图标	boolean	—	false
disabled	是否禁用	boolean	—	false
readonly	是否只读	boolean	—	false
maxlength	最大输入长度	string / number	—	—
minlength	最小输入长度	string / number	—	—
show-word-limit	是否显示输入字数统计	boolean	—	false
rows	文本域行数（type=textarea 生效）	string / number	—	3
resize	文本域缩放（type=textarea 生效）	string	none / vertical / horizontal / both	vertical
textarea-count-placement	文本域字数统计位置（type=textarea 生效）	string	inner / outer	inner
prefix-icon	输入框头部图标	string	—	—
suffix-icon	输入框尾部图标	string	—	—
name	原生属性	string	—	—
autocomplete	原生属性，自动补全	string	—	off
autofocus	原生属性，自动获取焦点	boolean	—	false

Input Events

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

Input Slots

插槽名	说明
prefix	输入框头部内容，只对 type="text" 有效
suffix	输入框尾部内容，只对 type="text" 有效
prepend	输入框前置内容，只对 type="text" 有效
append	输入框后置内容，只对 type="text" 有效

Input Exposes

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