主题
InputNumber 数字输入框
提供输入框和加减按钮，用于按步长调整数字。
支持平台
以下为官网文档所列的平台支持情况，具体功能及版本限制请参见本页的平台说明。
| App-vue | App-nvue | 微信小程序 | 支付宝小程序 | 百度小程序 | 字节小程序 | QQ小程序 | H5 | PC | 快手小程序 | 钉钉小程序 |
|---|---|---|---|---|---|---|---|---|---|---|
| ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ |
基础用法
vue
<!-- 通过 v-model 同步数量 -->
<fui-input-number v-model="quantity" :min="1" :max="99" />在页面数据中声明数字 quantity，Vue 2 对应 value / input，Vue 3 对应 modelValue / update:modelValue。
属性
尺寸和间距的单位为 rpx。
| 属性 | 类型 | 说明 | 官网默认值 |
|---|---|---|---|
| value | Number / String | Vue 2 输入值 | 1 |
| modelValue | Number / String | Vue 3 输入值 | 1 |
| valueEmit | Boolean | 初始化或外部更新数值时是否触发变化事件 | true |
| type | String | 输入类型，可选 number、text；输入负号或小数点时可用 text | number |
| min | Number | 最小值，支持负数 | 1 |
| max | Number | 最大值 | 99 |
| step | Number | 点击加减时的步长 | 1 |
| disabled | Boolean | 是否禁用 | false |
| signWidth | Number / String | 加减图标宽度 | 24 |
| height | Number / String | 输入框高度 | 40 |
| width | Number / String | 输入框宽度 | 80 |
| radius | Number / String | 输入框圆角 | 8 |
| size | Number / String | 输入框文字大小 | 28 |
| backgroundColor | String | 输入框背景色 | #EEEEEE |
| color | String | 输入框文字颜色 | #181818 |
| margin | Number / String | 输入框左右外边距 | 16 |
| custom | Boolean | 是否通过插槽自定义加减按钮 | false |
| index | Number / String | 列表索引，随事件返回 | 0 |
| params | Number / String | 自定义参数，随事件返回 | 0 |
本地源码未声明官网 V2.5 的 valueEmit 属性，该属性需要对应版本组件支持。
本地源码还提供 signColor 属性，类型为 String，默认 #181818，用于设置加减号颜色；官网当前参数表未列出该属性。
事件
| 事件 | 说明 | 回调参数 |
|---|---|---|
| change | 数值变化时触发 | { value, index, params } |
| input | Vue 2 双向绑定事件 | 当前值 |
| update:modelValue | Vue 3 双向绑定事件 | 当前值 |
| blur | 输入框失焦时触发 | 原始输入事件，可通过 event.detail.value 获取值 |
插槽
| 插槽 | 说明 |
|---|---|
| default | custom 为 true 时自定义减号 |
| plus | custom 为 true 时自定义加号 |