Vant3 Stepper步進器

介紹

步進器由增加按鈕、減少按鈕和輸入框組成，用于在一定范圍內(nèi)輸入、調(diào)整數(shù)字。

實例演示

引入

通過以下方式來全局注冊組件，更多注冊方式請參考組件注冊。

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

const app = createApp();
app.use(Stepper);

代碼演示

基礎(chǔ)用法

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

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

import { ref } from 'vue';

export default {
  setup() {
    const value = ref(1);
    return { value };
  },
};

步長設(shè)置

通過 step 屬性設(shè)置每次點擊增加或減少按鈕時變化的值，默認為 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 屬性來禁用步進器，禁用狀態(tài)下無法點擊按鈕或修改輸入框。

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

禁用輸入框

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

<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" />

異步變更

通過 before-change 屬性可以在輸入值變化前進行校驗和攔截。

<van-stepper v-model="value" :before-change="beforeChange" />

import { ref } from 'vue';
import { Toast } from 'vant';

export default {
  setup() {
    const value = ref(1);

    const beforeChange = (value) => {
      Toast.loading({ forbidClick: true });

      return new Promise((resolve) => {
        setTimeout(() => {
          Toast.clear();
          // 在 resolve 函數(shù)中返回 true 或 false
          resolve(true);
        }, 500);
      });
    };

    return {
      value,
      beforeChange,
    };
  },
};

圓角風(fēng)格

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

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

API

Props

Events

樣式變量

組件提供了下列 CSS 變量，可用于自定義樣式，使用方法請參考 ConfigProvider 組件。

常見問題

為什么 value 有時候會變成 string 類型？

這是因為用戶輸入過程中可能出現(xiàn)小數(shù)點或空值，比如 1.，這種情況下組件會拋出字符串類型。

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

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