跳到主要内容

Stepper 步进器

介绍

步进器

用法

基础

<OsStepper
value={current}
max={5}
onAdd={(value) => onAdd(value)}
onSubtract={(value) => onSubtract(value)}
onChange={(value) => onChange(value, setCurrent)}
onBlur={(event) => onBlur(event)}
onDisabledAdd={(value) => console.log(value)}
onDisabledSubtract={(value) => console.log(value)}
></OsStepper>

数量不可编辑

<OsStepper
readonly
value={current1}
onChange={(value) => onChange1(value, setCurrent1)}
></OsStepper>

不可点击

<OsStepper
disabled
value={current2}
onChange={(value) => onChange2(value, setCurrent2)}
></OsStepper>

API

属性

参数说明类型默认值
value当前值,开发者需要通过 onChange 事件来更新 value 值,必选number1
max最大值,可选number99
min最小值,可选number1
step单步增加/减少的值,可选number1
isReadonly数量不可编辑,可选,isReadonly属性在未来版本中将被删除,请使用readonly代替booleanfalse
readonly数量不可编辑,可选booleanfalse
isDisabled不可点击,可选,isDisabled属性在未来版本中将被删除,请使用disabled代替booleanfalse
disabled不可点击,可选booleanfalse
customStyle自定义样式,可选object-
className自定义类名,可选string-

方法

函数名说明参数
onAdd点击加时触发当前数值
onSubtract点击减时触发当前数值
onChange输入框值改变时触发的事件,开发者需要通过 onChange 事件来更新 current 值变化,onChange 函数必选当前数值
onBlur输入框失去焦点时触发event对象
onErrorInput错误输入时触发错误数值
onDisabledAdd到达最大值之后点击增加触发当前数值
onDisabledSubtract到达最小值之后点击增加触发当前数值