Vant Stepper stepper

Introduced

The stepr consists of an add button, a reduction button, and an input box to enter and adjust numbers within a certain range

Introduced

import Vue from 'vue';
import { Stepper } from 'vant';

Vue.use(Stepper);

Code demo

Basic usage

By binding the input value with v-model, you can listen for changes in the input value through the change event

<van-stepper v-model="value" />

export default {
  data() {
    return {
      value: 1
    }
  }
}

Step settings

Use the step property to set the value that changes each time you click the Add or Decrease button, which defaults to 1

<van-stepper v-model="value" step="2" />

Limit the input range

Limit the range of input values with min and max properties

<van-stepper v-model="value" min="5" max="8" />

Limit input integers

When the integer property is set, the input box limits that only integers can be entered

<van-stepper v-model="value" integer />

The state is disabled

You can't click a button or modify the input box by setting the disabled property to disable the stepr

<van-stepper v-model="value" disabled />

Disable the input box

The input box is disabled by setting the disabled-input property, at which point the button can still be clicked

<van-stepper v-model="value" disabled-input />

Fixed scale

You can keep a fixed scale by setting the decimal-length property

<van-stepper v-model="value" step="0.2" :decimal-length="1" />

Custom size

Set the width of the input box with the input-width property, and set the button size and input box height with the button-size property

<van-stepper v-model="value" input-width="40px" button-size="32px" />

Asynchronous changes

If you need to modify the value of the input box asynchronously, you can set the async-change property and manually modify the value in the change event

<van-stepper
  :value="value"
  async-change
  @change="onChange"
/>

import { Toast } from 'vant';

export default {
  data() {
    return {
      value: 1
    }
  },
  methods: {
    onChange(value) {
      Toast.loading({ forbidClick: true });

      setTimeout(() => {
        Toast.clear();

        // 注意此时修改 value 后会再次触发 change 事件
        this.value = value;
      }, 500);
    }
  }
}

Api

Props

Events