数字输入 NumberInput
示例
基本形式
<numberInput />
<numberInput value=6 />
禁用组件
<numberInput disabled />
最大值和最小值
<numberInput min=5 max=8 />
数据绑定
<numberInput value={number} />
<numberInput value={number} min=5 max=12 />
事件
请打开浏览器的控制台查看结果。
<numberInput on-change={console.log('on-change:', '$event.value:', $event.value)} />
API
Class
NumberInput
继承自Input2。
Options
new NumberInput()
| 参数 | 类型 | 默认值 | 数据流向 | 描述 |
|---|---|---|---|---|
data | object | 绑定属性 | ||
data.value | string | 0 | outer <=> inner | 文本框的值 |
data.state | string | '' | outer <=> inner | 文本框的状态 |
data.min | number | outer => inner | 最小值 | |
data.max | number | outer => inner | 最大值 | |
data.autofocus | boolean | false | outer => inner | 是否自动获得焦点 |
data.readonly | boolean | false | outer => inner | 是否只读 |
data.disabled | boolean | false | outer => inner | 是否禁用 |
data.visible | boolean | true | outer => inner | 是否显示 |
data.class | string | '' | outer => inner | 补充class |
Methods
numberInput.add(value)
调整数值
| 参数 | 类型 | 默认值 | 描述 |
|---|---|---|---|
value | number | 0 | 加/减的值 |
| 返回值 | 类型 | 描述 | |
value | number | 计算后的值 | |
numberInput.isOutOfRange(value)
是否超出规定的数值范围
| 参数 | 类型 | 默认值 | 描述 |
|---|---|---|---|
value | number | 待测的值 | |
| 返回值 | 类型 | 描述 | |
number | boolean number | 如果没有超出数值范围，则返回false；如果超出数值范围，则返回范围边界的数值 | |
Inherited Methods
numberInput.validate()
根据`rules`验证组件的值是否正确
| 参数 | 类型 | 默认值 | 描述 |
|---|---|---|---|
| 无参数 | |||
| 返回值 | 类型 | 描述 | |
result | object | 结果 | |
Events
numberInput.$on('change')
数值改变时触发
| 属性 | 类型 | 描述 |
|---|---|---|
sender | object | 事件发送对象 |
value | number | 改变后的数值 |