Skip to content
iuiDesign
100%
02:32
本页目录

用于数量的增减。

基本使用

步进器的基本用法。

html
<iui-stepper></iui-stepper>
<iui-stepper></iui-stepper>

设置最大/最小值

可以通过 minmax 属性设置最小值和最大值。

html
<iui-stepper :min="0" :max="7"></iui-stepper>
<iui-stepper :min="0" :max="7"></iui-stepper>

设置步长

可以通过 step 属性设置步长。默认值为 1

html
<iui-stepper :step="5"></iui-stepper>
<iui-stepper :step="5"></iui-stepper>

小数点

可以通过 decimalstep 属性以达到小数点的效果。

html
<iui-stepper :decimal="1" :step="0.1"></iui-stepper>
<iui-stepper :decimal="1" :step="0.1"></iui-stepper>

样式风格

边框风格

html
<iui-stepper type="outline"></iui-stepper>
<iui-stepper type="outline"></iui-stepper>

圆形风格

html
<iui-stepper type="round"></iui-stepper>
<iui-stepper type="round"></iui-stepper>

API

<Stepper>props
参数描述类型默认值
modelValue当前值Number1
min最小值Number-
max最大值Number-
step步长Number1
disabled是否禁用Booleanfalse
input允许通过输入框修改数值Booleanfalse
type样式风格default | outline | rounddefault
decimal小数点位数Number0
<Stepper>events
事件名描述参数
change数值改变时触发value: Number