Input 输入框
通过鼠标或键盘输入内容,是最基础的表单域的包装。
基本使用
基本使用。
三种大小
我们为<Input />输入框定义了三种尺寸(大、默认、小),高度分别为40px、32px 和 24px。
前置/后置内容
使用prefix插槽自定义前置内容,suffix插槽自定义后置内容。
前置/后置标签
使用addonBefore插槽自定义前置标签,addonAfter插槽自定义后置标签。
搜素框
带有搜索按钮的输入框。
密码框
密码框。
文本域
用于多行输入。
自定义状态
使用status为Input添加状态,可选error或者warning。
Input Props 属性
| 属性 | 说明 | 类型 | 默认值 | 版本 |
|---|---|---|---|---|
| allowClear | 可以点击清除图标删除内容 | boolean | false | |
| bordered | 是否有边框 | boolean | true | |
| defaultValue | 输入框默认内容 | string | - | |
| disabled | 设置按是否禁用状态 | boolean | false | |
| id | 输入框的id | string | - | |
| maxLength | 最大长度 | number | - | |
| showCount | 是否展示字数 | boolean | false | |
| status | 设置校验状态 | error | warning | - | |
| size | 控件大小。 | large | middle | small | middle | |
| type | 声明input类型,同原生input标签的type属性,见:MDN(请直接使用Input.TextArea代替type="textarea") | string | text | |
| 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 | 是否有确认按钮,可设为按钮文字。 | boolean | false | |
| loading | 搜索 loading | boolean | false |
其余属性和Input一致。
Events 事件
| 事件 | 说明 | 类型 |
|---|---|---|
| search | 点击搜索图标或按下回车键时的回调 | (value: CustomEvent<string>) => void |
其余事件和Input一致。
Slots 插槽
除了没有addonAfter插槽,其他的和Input一致。
Input.Password Props 属性
| 属性 | 说明 | 类型 | 默认值 | 版本 |
|---|---|---|---|---|
| visible | 是否显示密码 | boolean | false |
其余属性和Input一致。
Events 事件
| 事件 | 说明 | 类型 |
|---|---|---|
| visibleChange | 显隐密码的回调 | (value: CustomEvent<boolean>) => void |
其余事件和Input一致。
Slots 插槽
除了没有suffix插槽,其他的和Input一致。
Input.TextArea Props 属性
| 属性 | 说明 | 类型 | 默认值 | 版本 |
|---|---|---|---|---|
| allowClear | 可以点击清除图标删除内容 | boolean | false | |
| bordered | 是否有边框 | boolean | true | |
| defaultValue | 输入框默认内容 | string | - | |
| disabled | 设置按是否禁用状态 | boolean | false | |
| maxLength | 最大长度 | number | - | |
| showCount | 是否展示字数 | boolean | false | |
| status | 设置校验状态 | error | warning | - | |
| value | 输入框内容 | string | - |
Events 事件
事件和Input一致。