Stepper 步进器请使用手机扫码体验

通过点击按钮控制数字增减。

默认用法

  1. html
    <nut-stepper 
  2.     :value.sync="val1"
  3. ></nut-stepper>

设置最大最小值

  1. html
    <nut-stepper 
  2.     :value.sync="val2" 
  3.     :min="5" 
  4.     :max="100"
  5. ></nut-stepper>

设置加减的步长

  1. html
    <nut-stepper 
  2.     :value.sync="val3" 
  3.     :step="5"
  4. ></nut-stepper>

设置只读

  1. html
    <nut-stepper 
  2.     :readonly="true"
  3. ></nut-stepper>

显示边框

  1. html
    <nut-stepper 
  2.     :simple="false"
  3. ></nut-stepper>

关闭动画效果

  1. html
    <nut-stepper 
  2.     :transition="false" 
  3.     :simple="false"
  4. ></nut-stepper>

Prop

字段说明类型默认值
value初始值Number, String1
min最小值Number, String0
max最大值Number, StringInfinity
step步长Number, String1
readonly是否只读Booleanfalse
transition是否需要过渡效果Booleantrue
simple是否显示简单版Booleantrue

Event

字段说明回调参数
add点击加时触发事件 ｜ value
reduce点击减时触发事件 ｜ value
change值改变时触发事件 ｜ value
blur输入框失去焦点时触发事件value
focus输入框获取焦点时触发事件value