Vant4 Stepper 步進器

介紹

步進器由增加按鈕、減少按鈕和輸入框組成，用于在一定范圍內輸入、調整數字。

引入

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

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

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

代碼演示

基礎用法

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

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

import { ref } from 'vue';

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

步長設置

通過 ?step? 屬性設置每次點擊增加或減少按鈕時變化的值，默認為 ?1?。

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

限制輸入范圍

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

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

限制輸入整數

設置 ?integer? 屬性后，輸入框將限制只能輸入整數。

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

禁用狀態(tài)

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

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

自定義大小

通過 ?input-width? 屬性設置輸入框寬度，通過 ?button-size? 屬性設置按鈕大小和輸入框高度。

<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 { closeToast, showLoadingToast } from 'vant';

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

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

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

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

圓角風格

將 ?theme? 設置為 ?round? 來展示圓角風格的步進器。

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

API

Props

Events

類型定義

組件導出以下類型定義：

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

主題定制

樣式變量

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

常見問題

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

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

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

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