vant/src/stepper

Stepper

Install

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

Vue.use(Stepper);

Usage

Basic Usage

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

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

Step

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

Range

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

Integer

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

Disabled

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

Disable Input

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

Decimal Length

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

Custom Size

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

Async Change

<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 });

      clearTimeout(this.timer);
      this.timer = setTimeout(() => {
        Toast.clear();
        this.value = value;
      }, 500);
    },
  },
};

Round Theme

<van-stepper v-model="value" theme="round" button-size="22" disable-input />

API

Props

Attribute	Description	Type	Default
v-model	Current value	number | string	-
min	Min value	number | string	1
max	Max value	number | string	-
default-value	Default value, valid when v-model is empty	number | string	1
step	Value change step	number | string	1
name	Stepper name	number | string	-
input-width	Input width	number | string	32px
button-size	Button size	number | string	28px
decimal-length	Decimal length	number | string	-
theme v2.8.2	Theme, can be set to round	string	-
placeholder v2.8.6	Input placeholder	string	-
integer	Whether to allow only integers	boolean	false
disabled	Whether to disable value change	boolean	false
disable-plus	Whether to disable plus button	boolean	false
disable-minus	Whether to disable minus button	boolean	false
disable-input	Whether to disable input	boolean	false
async-change	Whether to enable async change	boolean	false
show-plus	Whether to show plus button	boolean	true
show-minus	Whether to show minus button	boolean	true
show-input v2.12.1	Whether to show input	boolean	true
long-press	Whether to allow long press	boolean	true
allow-empty v2.9.1	Whether to allow the input to be empty	boolean	false

Events

Event	Description	Arguments
change	Emitted when value changed	value: string, detail: { name: string }
overlimit	Emitted when a disabled button is clicked	-
plus	Emitted when the plus button is clicked	-
minus	Emitted when the minus button is clicked	-
focus	Emitted when the input is focused	event: Event
blur	Emitted when the input is blurred	event: Event

Less Variables

How to use: Custom Theme.

Name	Default Value	Description
@stepper-active-color	#e8e8e8	-
@stepper-background-color	@active-color	-
@stepper-button-icon-color	@text-color	-
@stepper-button-disabled-color	@background-color	-
@stepper-button-disabled-icon-color	@gray-5	-
@stepper-button-round-theme-color	@red	-
@stepper-input-width	32px	-
@stepper-input-height	28px	-
@stepper-input-font-size	@font-size-md	-
@stepper-input-line-height	normal	-
@stepper-input-text-color	@text-color	-
@stepper-input-disabled-text-color	@gray-5	-
@stepper-input-disabled-background-color	@active-color	-
@stepper-border-radius	@border-radius-md	-