Input 输入框

使用

通过鼠标或键盘输入内容，是最基础的表单域的包装。

基础用法

禁用状态

一键清空

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

格式化

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

密码框

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

带图标的输入框

带有图标标记输入类型

要在输入框中添加图标，你可以简单地使用 prefix-icon 和 suffix-icon 属性。 另外， prefix 和 suffix 命名的插槽也能正常工作。

文本域

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

文本域高度可通过 rows 属性控制

自适应文本域

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

下拉选择

设置selectable属性可以开启下拉选择功能， 并通过 options 属性传入选项列表。

前后插槽

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

可通过 slot 来指定在 Input 中分发的前置或者后置的内容。

尺寸

使用 size 属性改变输入框大小。 除了默认大小外，还有另外两个选项： large, small。

输入长度限制

使用 maxlength 和 minlength 属性, 来控制输入内容的最大字数和最小字数。 "字符数"使用JavaScript字符串长度来衡量。 为文本或文本输入类型设置 maxlength prop可以限制输入值的长度。 允许你通过设置 show-word-limit 到 true 来显示剩余字数。

API

Input Props

参数名	描述	类型	默认值
model-value/v-model	绑定值	string | number	-
type	类型	string	text
placeholder	输入框占位文本	string	-
clearable	是否显示清除按钮，type不为textarea时生效	boolean	false
size	输入框大小	enum	base
prefix-icon	自定义前缀图标	string | Component	-
suffix-icon	自定义后缀图标	string | Component	-
disabled	是否禁用	boolean	false
show-password	是否显示密码，type为password时生效	boolean	false
formatter	格式化输入值, type为text时生效	Function	-
selectable	是否开启下拉选择功能	boolean	-
options	下拉选择的选项列表	Array<string | number>	-
teleported	是否将 popover 的下拉列表插入至 body 元素	boolean	-
popper-class	为 popper 添加类名	string	-
popper-style	为 popper 自定义样式	object	-
filterable	用于selectable为true时，是否开启输入过程中过滤下拉选项功能	boolean	-

Input Events

事件名	描述	类型
blur	输入框失去焦点时触发	Function
focus	输入框获得焦点时触发	Function
change	仅当 modelValue 改变时，当输入框失去焦点或用户按Enter时触发	Function
input	输入框内容变化时触发	Function
clear	在点击由 clearable 属性生成的清空按钮时触发	Function
popper-show	下拉列表显示时触发	Function
popper-hide	下拉列表隐藏时触发	Function

Input Methods

方法名	描述	类型
blur	使输入框失去焦点	Function
focus	使输入框获得焦点	Function
clear	清空输入框内容	Function
select	选中输入框内容	Function
resizeTextarea	改变textarea的大小	Function

Input Slots

插槽名	描述	参数
default	下拉框无数据时显示的内容	-
prefix	输入框头部内容，只对非type='textarea' 有效	-
suffix	输入框尾部内容，只对非type='textarea' 有效	-
prepend	自定义前置内容, 只对非type='textarea' 有效	-
append	自定义后置内容, 只对非type='textarea' 有效	-