Skip to content

Input 输入框

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

基本使用

基本使用。

三种大小

我们为<Input />输入框定义了三种尺寸(大、默认、小),高度分别为40px32px24px

前置/后置内容

使用prefix插槽自定义前置内容,suffix插槽自定义后置内容。

前置/后置标签

使用addonBefore插槽自定义前置标签,addonAfter插槽自定义后置标签。

搜素框

带有搜索按钮的输入框。

密码框

密码框。

文本域

用于多行输入。

自定义状态

使用statusInput添加状态,可选error或者warning

Input Props 属性

属性说明类型默认值版本
allowClear可以点击清除图标删除内容booleanfalse
bordered是否有边框booleantrue
defaultValue输入框默认内容string-
disabled设置按是否禁用状态booleanfalse
id输入框的idstring-
maxLength最大长度number-
showCount是否展示字数booleanfalse
status设置校验状态error | warning-
size控件大小。large | middle | smallmiddle
type声明input类型,同原生input标签的type属性,见:MDN(请直接使用Input.TextArea代替type="textarea")stringtext
value输入框内容string-

Events 事件

事件说明类型
input输入事件(value: CustomEvent<string>) => void
change输入改变事件ChangeEventHandler<HTMLInputElement> | undefined | null
blur失去焦点事件FocusEventHandler<T> | undefined | null
focus获取焦点事件FocusEventHandler<T> | undefined | null
keyup键盘抬起事件KeyboardEventHandler<T> | undefined | null
keydown键盘按下事件KeyboardEventHandler<T> | undefined | null
keypress键盘按下并松开事件KeyboardEventHandler<T> | undefined | null
mouseenter鼠标移入事件MouseEventHandler<T> | undefined | null
mouseleave鼠标移出事件MouseEventHandler<T> | undefined | null
mousemove鼠标移动事件MouseEventHandler<T> | undefined | null

Slots 插槽

插槽名说明
addonBefore带标签的input,设置前置标签
addonAfter带标签的input,设置后置标签
prefix带有前缀图标的input
suffix带有后缀图标的input

Input.Search Props 属性

属性说明类型默认值版本
enterButton是否有确认按钮,可设为按钮文字。booleanfalse
loading搜索 loadingbooleanfalse

其余属性和Input一致。

Events 事件

事件说明类型
search点击搜索图标或按下回车键时的回调(value: CustomEvent<string>) => void

其余事件和Input一致。

Slots 插槽

除了没有addonAfter插槽,其他的和Input一致。

Input.Password Props 属性

属性说明类型默认值版本
visible是否显示密码booleanfalse

其余属性和Input一致。

Events 事件

事件说明类型
visibleChange显隐密码的回调(value: CustomEvent<boolean>) => void

其余事件和Input一致。

Slots 插槽

除了没有suffix插槽,其他的和Input一致。

Input.TextArea Props 属性

属性说明类型默认值版本
allowClear可以点击清除图标删除内容booleanfalse
bordered是否有边框booleantrue
defaultValue输入框默认内容string-
disabled设置按是否禁用状态booleanfalse
maxLength最大长度number-
showCount是否展示字数booleanfalse
status设置校验状态error | warning-
value输入框内容string-

Events 事件

事件和Input一致。