InputNumber 输入框


带加减按钮的数字输入框,用户可以控制每次点击增加的数值,支持小数,同时支持自定义输入框宽度。

使用指南

在 Taro 文件中引入组件

:::demo

1. import { AtInputNumber } from 'taro-ui'

:::

一般用法

:::demo

1. <AtInputNumber
2. min={0}
3. max={10}
4. step={1}
5. value={this.state.number}
6. onChange={this.handleChange}
7. />

:::

每次点击改变 0.1

:::demo

1. <AtInputNumber
2. min={0}
3. max={10}
4. step={0.1}
5. value={this.state.number}
6. onChange={this.handleChange}
7. />

:::

禁止状态

:::demo

1. <AtInputNumber
2. disabled
3. min={0}
4. max={10}
5. step={1}
6. value={this.state.number}
7. onChange={this.handleChange}
8. />

:::

自定义宽度

:::demo

1. <AtInputNumber
2. min={0}
3. max={10}
4. step={1}
5. width={200}
6. value={this.state.number}
7. onChange={this.handleChange}
8. />

:::

参数

参数 说明 类型 可选值 默认值
value 输入框值 Number - 1
width input 宽度,不包括两侧按钮,单位根据环境转为 rpx 或 rem Number - 120
min 最小值 Number - 0
max 最大值 Number - 100
step 每次点击改变的间隔大小 Number - 1
disabled 是否禁止输入,禁止点击按钮 Boolean - false

事件

事件名称 说明 返回参数
onChange 输入框值改变时触发的事件 输入框当前值 value