Stepper 步进器

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

默认用法

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

设置最大最小值

  1. <nut-stepper
  2. :value.sync="val2"
  3. :min="5"
  4. :max="100"
  5. @add-no-allow="addNoAllow"
  6. @reduce-no-allow="reduceNoAllow"
  7. ></nut-stepper>
  1. export default {
  2. methods: {
  3. addNoAllow(){
  4. alert('超出最大限制')
  5. },
  6. reduceNoAllow(){
  7. alert('超出最小限制')
  8. }
  9. }
  10. }

设置加减的步长

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

设置只读

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

设置禁用

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

显示边框

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

关闭动画效果

  1. <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
disabled禁用所有功能Booleanfalse
transition是否需要过渡效果Booleantrue
simple是否显示简单版Booleantrue
decimalPlaces设置保留的小数位Number0

Event

字段说明回调参数
add点击加时触发事件 | value
reduce点击减时触发事件 | value
change值改变时触发事件 | value
blur输入框失去焦点时触发事件value
focus输入框获取焦点时触发事件value
add-no-allow超出最大回调事件-
reduce-no-allow超出最小回调事件-

Stepper 步进器 - 图1