引入

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

Vue.use(Stepper);

基礎(chǔ)用法

通過 v-model 綁定輸入值，可以通過 change 事件監(jiān)聽到輸入值的變化。

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

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

步長設(shè)置

通過 step 屬性設(shè)置每次點(diǎn)擊增加或減少按鈕時(shí)變化的值，默認(rèn)為 1。

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

限制輸入范圍

通過 min 和 max 屬性限制輸入值的范圍。

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

限制輸入整數(shù)

設(shè)置 integer 屬性后，輸入框?qū)⑾拗浦荒茌斎胝麛?shù)。

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

禁用狀態(tài)

通過設(shè)置 disabled 屬性來禁用步進(jìn)器，禁用狀態(tài)下無法點(diǎn)擊按鈕或修改輸入框。

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

禁用輸入框

通過設(shè)置 disable-input 屬性來禁用輸入框，此時(shí)按鈕仍然可以點(diǎn)擊。

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

固定小數(shù)位數(shù)

通過設(shè)置 decimal-length 屬性可以保留固定的小數(shù)位數(shù)。

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

自定義大小

通過 input-width 屬性設(shè)置輸入框?qū)挾?，通過 button-size 屬性設(shè)置按鈕大小和輸入框高度。

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

異步變更

如果需要異步地修改輸入框的值，可以設(shè)置 async-change 屬性，并在 change 事件中手動(dòng)修改 value。

<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();
        // 注意此時(shí)修改 value 后會(huì)再次觸發(fā) change 事件
        this.value = value;
      }, 500);
    },
  },
};

圓角風(fēng)格

將 theme 設(shè)置為 round 來展示圓角風(fēng)格的步進(jìn)器。

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

Props

Events

樣式變量

組件提供了下列 Less 變量，可用于自定義樣式，使用方法請(qǐng)參考主題定制。

為什么 value 有時(shí)候會(huì)變成 string 類型？

這是因?yàn)橛脩糨斎脒^程中可能出現(xiàn)小數(shù)點(diǎn)或空值，比如 1.，這種情況下組件會(huì)拋出字符串類型。

如果希望 value 保持 number 類型，可以在 v-model 上添加 number 修飾符：

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