Vant4 Stepper 步進(jìn)器

介紹

步進(jìn)器由增加按鈕、減少按鈕和輸入框組成，用于在一定范圍內(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è)置每次點(diǎn)擊增加或減少按鈕時變化的值，默認(rèn)為 ?1?。

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

限制輸入范圍

通過 ?min? 和 ?max? 屬性限制輸入值的范圍，默認(rèn)超出范圍后會自動校正最大值或最小值，通過 ?auto-fixed? 可以關(guān)閉自動校正。

<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? 屬性來禁用輸入框，此時按鈕仍然可以點(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" />

異步變更

通過 ?before-change? 屬性可以在輸入值變化前進(jìn)行校驗(yàn)和攔截。

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

import { ref } from 'vue';
import { closeToast, showLoadingToast } from 'vant';

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

    const beforeChange = (value) => {
      showLoadingToast({ forbidClick: true });

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

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

圓角風(fēng)格

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

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

API

Props

Events

類型定義

組件導(dǎo)出以下類型定義：

import type { StepperTheme, StepperProps } from 'vant';

主題定制

樣式變量

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

常見問題

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

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

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

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