Input 输入框

通过鼠标或键盘输入字符

基础用法

Input 输入框 - 图1

禁用状态

Input 输入框 - 图2

带 icon 的输入框

带有图标标记输入类型

Input 输入框 - 图3

文本域

可调整大小,用于输入多行文本信息

Input 输入框 - 图4

可自适应文本高度的文本域

通过设置 autosize 属性可以使得文本域的高度能够根据文本内容自动进行调整,并且 autosize 还可以设定为一个对象,指定最小行数和最大行数。

Input 输入框 - 图5

复合型输入框

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

Input 输入框 - 图6

尺寸

Input 输入框 - 图7

带输入建议

根据输入内容提供对应的输入建议, 依赖autoComplete

Input 输入框 - 图8

自定义模板

可自定义输入建议的显示,依赖AutoComplete

Input 输入框 - 图9

远程搜索

从服务端搜索数据,依赖AutoComplete

Input 输入框 - 图10

Input Attributes

参数说明类型可选值默认值
type类型stringtext/textareatext
value绑定值string, number
maxLength最大输入长度number
minLength最小输入长度number
placeholder输入框占位文本string
disabled禁用booleanfalse
size输入框尺寸,只在 type!="textarea" 时有效stringlarge, small, mini
icon输入框尾部图标string
rows输入框行数,只对 type="textarea" 有效number2
autosize自适应内容高度,只对 type="textarea" 有效,可传入对象,如,{ minRows: 2, maxRows: 6 }boolean/objectfalse
autoComplete原生属性,自动补全stringon, offoff
name原生属性string
readOnly原生属性,是否只读booleanfalse
max原生属性,设置最大值
min原生属性,设置最小值
step原生属性,设置输入字段的合法数字间隔
resize控制是否能被用户缩放stringnone, both, horizontal, vertical
autoFocus原生属性,自动获取焦点booleantrue, falsefalse
onIconClick点击 Input 内的图标的钩子函数function
trim对input内容进行trimbooleanfalse

Autocomplete Attributes

参数说明类型可选值默认值
placeholder输入框占位文本string
disabled禁用booleanfalse
value必填值输入绑定值string
customItem通过该参数指定自定义的输入建议列表项的组件名Element
fetchSuggestions返回输入建议的方法,仅当你的输入建议数据 resolve 时,通过调用 callback(data:[]) 来返回它Function(queryString, callback)
popperClassAutocomplete 下拉列表的类名string
triggerOnFocus是否在输入框 focus 时显示建议列表booleantrue
onIconClick点击图标的回调函数function
icon输入框尾部图标string

Autocomplete Events

事件名称说明回调参数
onSelect点击选中建议项时触发选中建议项