Stepper 步进器

介绍

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

引入

import { IBestStepper } from "@ibestservices/ibest-ui";

代码演示

基础用法

TIP

通过 defaultValue 设置默认输入值，可以通过 onChange 事件监听到输入值的变化。

点我查看代码

IBestStepper({
  onChange(val) {
    console.log("触发变化了", val);
  },
});

步长设置

TIP

通过 step 属性设置每次点击增加或减少按钮时变化的值，默认为 1。

点我查看代码

IBestStepper({
  step: 2,
});

限制输入范围

TIP

通过 min 和 max 属性限制输入值的范围，默认超出范围后会自动校正最大值或最小值，通过 autoFixed 可以关闭自动校正。

点我查看代码

IBestStepper({
  defaultValue: 5,
  min: 5,
  max: 8,
});

限制输入整数

TIP

设置 integer 属性后，输入框将限制只能输入整数。

点我查看代码

IBestStepper({
  integer: true,
});

禁用状态

TIP

通过设置 disabled 属性来禁用步进器，禁用状态下无法点击按钮或修改输入框。

点我查看代码

IBestStepper({
  disabled: true,
});

禁用输入框

TIP

通过设置 disableInput 属性来禁用输入框，此时按钮仍然可以点击。

点我查看代码

IBestStepper({
  disableInput: true,
});

固定小数位数

TIP

通过设置 decimalLength 属性可以保留固定的小数位数。

点我查看代码

IBestStepper({
  defaultValue: 14,
  step: 0.2,
  decimalLength: 1,
});

自定义大小

TIP

通过 input-width 属性设置输入框宽度，通过 button-size 属性设置按钮大小和输入框高度。

点我查看代码

IBestStepper({
  inputWidth: "80lpx",
  buttonSize: "64lpx",
});

API

@Props

参数	说明	类型	默认值
min	最小值	string | number	1
max	最大值	string | number	Infinity
autoFixed	是否自动校正超出限制范围的数值，设置为 false 后输入超过限制范围的数值将不会自动校正	boolean	true
defaultValue	展示的默认值	string | number	1
step	步长，每次点击时改变的值	number | string	1
inputWidth	输入框宽度，默认单位为 lpx	number | string	64lpx
buttonSize	按钮大小以及输入框高度，默认单位为 lpx	number | string	54lpx
decimalLength	固定显示的小数位数	number | string
integer	是否只允许输入整数	boolean	false
disabled	是否禁用步进器	boolean	false
disablePlus	是否禁用增加按钮	boolean	false
disableMinus	是否禁用减少按钮	boolean	false
disableInput	是否禁用输入框	boolean	false
showPlus	是否显示增加按钮	boolean	true
showMinus	是否显示减少按钮	boolean	true
showInput	是否显示输入框	boolean	true
longPress	是否开启长按手势，开启后可以长按增加和减少按钮	boolean	true
validateTime	多少毫秒触发自动校验修正，为 0 时不修正，因为输入框中的 blur 触发时机不随着点击失焦，只能采用自动修正方案，单位 ms	number	1000
iconSize	输入框中图标的宽度，默认单位为 lpx	string	40lpx
buttonRadius	按钮的圆角，默认单位为 lpx	string	4lpx

Events

事件名	说明	事件类型
onChange	当值变化时触发的事件	(val: string|number) => void
onPlus	点击增加按钮时触发	() => void
onMinus	点击较少按钮时触发	() => void

常见问题

为什么 value 有时候会变成 string 类型？

这是因为用户输入过程中可能出现小数点或空值，比如 1.，这种情况下组件会抛出字符串类型。 如果希望 value 保持 number 类型，可以在 onChange 回调中手动转换。