Stepper 步进器

Scan me!

增加，减少或修改当前数值

引入

  1. import { Stepper } from 'mand-mobile'
  3. Vue.component(Stepper.name, Stepper)

代码演示

禁用

  1. <template>
  2.   <div class="md-example-child md-example-child-stepper md-example-child-stepper-0">
  3.     <md-field>
  4.       <md-field-item
  5.         name="arrow1"
  6.         title="禁用"
  7.         customized
  8.         align="right">
  9.         <div class="normal-tip">
  10.           <md-stepper
  11.             disabled
  12.           ></md-stepper>
  13.         </div>
  14.       </md-field-item>
  15.     </md-field>
  16.   </div>
  17. </template>
  19. <script>
  20. import {Stepper, Field, FieldItem} from 'mand-mobile'
  22. export default {
  23.   name: 'stepper-demo',
  24.   components: {
  25.     [Field.name]: Field,
  26.     [FieldItem.name]: FieldItem,
  27.     [Stepper.name]: Stepper,
  28.   },
  29. }
  31. </script>
  32.

最小值-12，最大值18

  1. <template>
  2.   <div class="md-example-child md-example-child-stepper md-example-child-stepper-2">
  3.     <md-field>
  4.       <md-field-item
  5.         name="arrow3"
  6.         title="最小值-12，最大值18"
  7.         customized
  8.         align="right">
  9.         <div class="normal-tip">
  10.           <md-stepper
  11.             v-model="value"
  12.             min="-12"
  13.             max="18"
  14.           ></md-stepper>
  15.         </div>
  16.       </md-field-item>
  17.     </md-field>
  18.   </div>
  19. </template>
  21. <script>
  22. import {Stepper, Field, FieldItem} from 'mand-mobile'
  24. export default {
  25.   name: 'stepper-demo',
  26.   components: {
  27.     [Field.name]: Field,
  28.     [FieldItem.name]: FieldItem,
  29.     [Stepper.name]: Stepper,
  30.   },
  31.   data() {
  32.     return {
  33.       value: 0,
  34.     }
  35.   },
  36. }
  38. </script>
  39.

最小值4大于默认值

  1. <template>
  2.   <div class="md-example-child md-example-child-stepper md-example-child-stepper-4">
  3.     <md-field>
  4.       <md-field-item
  5.         name="arrow4"
  6.         title="最小值4大于默认值"
  7.         customized
  8.         align="right">
  9.         <div class="normal-tip">
  10.           <md-stepper
  11.             :min="4"
  12.           ></md-stepper>
  13.         </div>
  14.       </md-field-item>
  15.     </md-field>
  16.   </div>
  17. </template>
  19. <script>
  20. import {Stepper, Field, FieldItem} from 'mand-mobile'
  22. export default {
  23.   name: 'stepper-demo',
  24.   components: {
  25.     [Field.name]: Field,
  26.     [FieldItem.name]: FieldItem,
  27.     [Stepper.name]: Stepper,
  28.   },
  29. }
  31. </script>
  32.

只读

  1. <template>
  2.   <div class="md-example-child md-example-child-stepper md-example-child-stepper-1">
  3.     <md-field>
  4.       <md-field-item
  5.         name="arrow2"
  6.         title="只读"
  7.         customized
  8.         align="right">
  9.         <div class="normal-tip">
  10.           <md-stepper
  11.             read-only
  12.           ></md-stepper>
  13.         </div>
  14.       </md-field-item>
  15.     </md-field>
  16.   </div>
  17. </template>
  19. <script>
  20. import {Stepper, Field, FieldItem} from 'mand-mobile'
  22. export default {
  23.   name: 'stepper-demo',
  24.   components: {
  25.     [Field.name]: Field,
  26.     [FieldItem.name]: FieldItem,
  27.     [Stepper.name]: Stepper,
  28.   },
  29. }
  31. </script>
  32.

步进2

  1. <template>
  2.   <div class="md-example-child md-example-child-stepper md-example-child-stepper-3">
  3.     <md-field>
  4.       <md-field-item
  5.         name="arrow4"
  6.         title="步进2, 只允许输入整数"
  7.         customized
  8.         align="right">
  9.         <div class="normal-tip">
  10.           <md-stepper
  11.             v-model="value"
  12.             :step="2"
  13.             :min="2"
  14.             is-integer
  15.           ></md-stepper>
  16.         </div>
  17.       </md-field-item>
  18.     </md-field>
  19.   </div>
  20. </template>
  22. <script>
  23. import {Stepper, Field, FieldItem} from 'mand-mobile'
  25. export default {
  26.   name: 'stepper-demo',
  27.   components: {
  28.     [Field.name]: Field,
  29.     [FieldItem.name]: FieldItem,
  30.     [Stepper.name]: Stepper,
  31.   },
  32.   data() {
  33.     return {
  34.       value: 3,
  35.     }
  36.   },
  37. }
  39. </script>
  40.

step为小数1.3

  1. <template>
  2.   <div class="md-example-child md-example-child-stepper md-example-child-stepper-5">
  3.     <md-field>
  4.       <md-field-item
  5.         name="arrow5"
  6.         title="step为小数1.3"
  7.         customized
  8.         align="right">
  9.         <div class="normal-tip">
  10.           <md-stepper
  11.             :step="1.3"
  12.           ></md-stepper>
  13.         </div>
  14.       </md-field-item>
  15.     </md-field>
  16.   </div>
  17. </template>
  19. <script>
  20. import {Stepper, Field, FieldItem} from 'mand-mobile'
  22. export default {
  23.   name: 'stepper-demo',
  24.   components: {
  25.     [Field.name]: Field,
  26.     [FieldItem.name]: FieldItem,
  27.     [Stepper.name]: Stepper,
  28.   },
  29. }
  31. </script>
  32.

API

Stepper Props

属性说明类型默认值
v-model1.5.3+当前值Number/String-
default-value默认值Number/String-
step每次改变步数，可以为小数Number/String1
min最小值Number/String-Infinity
max最大值Number/StringInfinity
disabled禁用Booleanfalse
read-only只读Booleanfalse
is-integer1.5.3+只能输入整数Booleanfalse

Stepper Events

@change(currentValue)

值发生变化事件