Stepper 步进器

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

引入

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

代码演示

禁用

        <template>
  <div class="md-example-child md-example-child-stepper md-example-child-stepper-0">
    <md-field>
      <md-field-item title="禁用">
        <md-stepper slot="right" disabled />
      </md-field-item>
    </md-field>
  </div>
</template>
<script>
import {Stepper, Field, FieldItem} from 'mand-mobile'
export default {
  name: 'stepper-demo',
  components: {
    [Field.name]: Field,
    [FieldItem.name]: FieldItem,
    [Stepper.name]: Stepper,
  },
}
</script>
 
      

最小值-12，最大值18

        <template>
  <div class="md-example-child md-example-child-stepper md-example-child-stepper-2">
    <md-field>
      <md-field-item title="最小值-12，最大值18">
        <md-stepper slot="right" v-model="value" min="-12" max="18" />
      </md-field-item>
    </md-field>
  </div>
</template>

<script>
import {Stepper, Field, FieldItem} from 'mand-mobile'

export default {
  name: 'stepper-demo',
  components: {
    [Field.name]: Field,
    [FieldItem.name]: FieldItem,
    [Stepper.name]: Stepper,
  },
  data() {
    return {
      value: 0,
    }
  },
}

</script>

      

最小值4大于默认值

        <template>
  <div class="md-example-child md-example-child-stepper md-example-child-stepper-4">
    <md-field>
      <md-field-item title="最小值4大于默认值">
        <md-stepper slot="right" :min="4" />
      </md-field-item>
    </md-field>
  </div>
</template>

<script>
import {Stepper, Field, FieldItem} from 'mand-mobile'

export default {
  name: 'stepper-demo',
  components: {
    [Field.name]: Field,
    [FieldItem.name]: FieldItem,
    [Stepper.name]: Stepper,
  },
}

</script>

      

只读

        <template>
  <div class="md-example-child md-example-child-stepper md-example-child-stepper-1">
    <md-field>
      <md-field-item title="只读">
        <md-stepper slot="right" read-only />
      </md-field-item>
    </md-field>
  </div>
</template>

<script>
import {Stepper, Field, FieldItem} from 'mand-mobile'

export default {
  name: 'stepper-demo',
  components: {
    [Field.name]: Field,
    [FieldItem.name]: FieldItem,
    [Stepper.name]: Stepper,
  },
}

</script>

      

步进2

        <template>
  <div class="md-example-child md-example-child-stepper md-example-child-stepper-3">
    <md-field>
      <md-field-item title="步进2, 只允许输入整数">
        <md-stepper slot="right" v-model="value" :step="2" :min="2" is-integer />
      </md-field-item>
    </md-field>
  </div>
</template>

<script>
import {Stepper, Field, FieldItem} from 'mand-mobile'

export default {
  name: 'stepper-demo',
  components: {
    [Field.name]: Field,
    [FieldItem.name]: FieldItem,
    [Stepper.name]: Stepper,
  },
  data() {
    return {
      value: 3,
    }
  },
}

</script>

      

step为小数1.3

        <template>
  <div class="md-example-child md-example-child-stepper md-example-child-stepper-5">
    <md-field>
      <md-field-item title="step为小数1.3">
        <md-stepper slot="right" :step="1.3" />
      </md-field-item>
    </md-field>
  </div>
</template>

<script>
import {Stepper, Field, FieldItem} from 'mand-mobile'

export default {
  name: 'stepper-demo',
  components: {
    [Field.name]: Field,
    [FieldItem.name]: FieldItem,
    [Stepper.name]: Stepper,
  },
}

</script>

      

API

Stepper Props

Stepper Events

@change(currentValue)

值发生变化事件

@increase(difference)

当前值增加时触发 ^2.2.0+

@decrease(difference)

当前值减少时触发 ^2.2.0+