InputNumber 数字输入框
通过鼠标或键盘,输入范围内的数值。
基本使用
基本使用。
三种大小
我们为<Input />输入框定义了三种尺寸(大、默认、小),高度分别为40px、32px 和 24px。
前置/后置标签
使用addonBefore插槽自定义前置标签,addonAfter插槽自定义后置标签。
不可用
禁用的输入框。
精度限制
使用precision属性指定精度,为0表示只能输入整数。
格式化展示
通过formatter格式化数字,以展示具有具体含义的数据。此属性只控制展示效果,如果使用了bind:value的话,value永远为数字。
需要获取格式化数字,可通过input或change事件获取。默认如果存在formatter则input或change事件返回的值是数字,如果需要格式化数字则可以使用isParse=false。
再次说明:
isParse属性只控制input或change事件中的值,不控制value,value永远为数字。
键盘行为
使用keyboard属性可以控制键盘行为。
无边框
没有边框。
前置内容
使用prefix插槽自定义前置内容。
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一致。