步进器 Stepper

基本

  1. <za-cell title="默认">
  2. <za-stepper slot="description" v-model="stepper6"></za-stepper>
  3. </za-cell>
  4. <za-cell title="小号">
  5. <za-stepper slot="description" v-model="stepper1" size="sm"></za-stepper>
  6. </za-cell>
  7. <za-cell title="设置默认值">
  8. <za-stepper slot="description" v-model="stepper2" size="sm"></za-stepper>
  9. </za-cell>
  10. <za-cell title="设置上下限">
  11. <za-stepper slot="description" v-model="stepper3" :min="-3" :max="3" size="sm"></za-stepper>
  12. </za-cell>
  13. <za-cell title="设置步长">
  14. <za-stepper slot="description" v-model="stepper4" :step="0.5" size="sm"></za-stepper>
  15. </za-cell>
  16. <za-cell title="禁用状态">
  17. <za-stepper slot="description" v-model="stepper5" disabled size="sm"></za-stepper>
  18. </za-cell>

多形状

  1. <za-cell title="圆角">
  2. <za-stepper slot="description" v-model="stepper7" shape="radius" size="sm"></za-stepper>
  3. </za-cell>
  4. <za-cell title="圆型">
  5. <za-stepper slot="description" v-model="stepper8" shape="circle" size="sm"></za-stepper>
  6. </za-cell>

Vue Script

  1. <script name="vue">
  2. export default {
  3. data() {
  4. return {
  5. stepper1: 0,
  6. stepper2: 2,
  7. stepper3: 0,
  8. stepper4: 0,
  9. stepper5: 0,
  10. stepper6: 0,
  11. stepper7: 0,
  12. stepper8: 0,
  13. stepper9: 0,
  14. stepper10: 0,
  15. }
  16. },
  17. methods: {
  18. handleChange(event) {
  19. console.log(event);
  20. },
  21. handleInputChange(v) {
  22. console.log(v);
  23. }
  24. },
  25. };
  26. </script>

API

Stepper Attributes

属性类型默认值可选值/参数说明
sizestring'md''md', 'sm'主题
shapestring'radius', 'circle'形状
v-modelnumber绑定值
disabledbooleanfalse是否禁用
minnumber最小值
maxnumber最大值
stepnumber1步长

Stepper Events

事件名称说明回调参数
change点击加减后触发的事件event 事件对象
input-change点击加减后返回变化的值number

Stepper 步进器 - 图1