跳到主要内容

步进器

步进器由增加按钮、减少按钮和输入框组成，用于在限定范围内输入或调整数值。

一、何时使用​

步进器适用于需要精确控制数值输入的场景，例如：

  • 设置字体大小、宽高、边距等样式参数
  • SKU 面板中设置商品数量
  • 购物车调整购买商品的数量
  • 金额、积分的步进输入（如每次增加 50 或减少 100）

二、属性配置​

1. 数据配置​

数据配置

1.1 数据绑定​

可绑定父组件数据源，详见：数据绑定。

1.2 初始值设置​

步进器的默认值可通过手动赋值或视图参数进行设置：

初始值设置

2. 功能配置​

2.1 最小值​

设置步进器允许的最小值：

最小值设置

2.2 最大值​

设置步进器允许的最大值：

最大值设置

2.3 增加按钮​

是否显示增加按钮。开启时显示，关闭时隐藏：

增加按钮设置

2.4 减少按钮​

是否显示减少按钮。开启时显示，关闭时隐藏：

减少按钮设置

2.5 单步长​

设置每次点击按钮增减的数值，默认值为 1。

2.6 整数模式​

开启后，输入值只保留整数部分，自动舍弃小数：

整数模式
效果示意

2.7 小数位数​

设置保留的小数位数。例如，设置为 2 时，输入将保留两位小数：

小数位设置

3. 外观设置​

3.1 按钮样式​

按钮支持“圆形”和“方角”两种样式：

按钮样式

3.2 输入框宽度​

设置输入框的宽度：

输入框宽度设置

4. 状态配置​

4.1 禁用状态​

禁用所有交互（包括按钮和输入框）：

禁用状态

4.2 禁用减少按钮​

禁止减少按钮点击：

禁用减少按钮

4.3 禁用输入框​

禁止用户手动输入，仅可通过按钮调整：

禁用输入框

4.4 禁用增加按钮​

禁止增加按钮点击：

禁用增加按钮

4.5 隐藏状态​

如需隐藏组件，请参考：通用状态。

三、样式​

步进器暂无特有样式设置，详见：通用样式。

四、常见使用场景​

  1. 商品属性选择
    购物车中选择商品数量，每次加/减 1 件。

  2. 配置参数调节
    例如字体大小、边框宽度、组件圆角、透明度等。

  3. 库存或限购设置
    设置商品最大购买量或调整库存数量。