Vant4 Steps 步驟條

介紹

用于展示操作流程的各個環(huán)節(jié)，讓用戶了解當前的操作在整體流程中的位置。

引入

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

import { createApp } from 'vue';
import { Step, Steps } from 'vant';

const app = createApp();
app.use(Step);
app.use(Steps);

代碼演示

基礎用法

?active? 屬性表示當前步驟的索引，從 0 起計。

<van-steps :active="active">
  <van-step>買家下單</van-step>
  <van-step>商家接單</van-step>
  <van-step>買家提貨</van-step>
  <van-step>交易完成</van-step>
</van-steps>

import { ref } from 'vue';

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

自定義樣式

可以通過 ?active-icon? 和 ?active-color? 屬性設置激活狀態(tài)下的圖標和顏色。

<van-steps :active="active" active-icon="success" active-color="#07c160">
  <van-step>買家下單</van-step>
  <van-step>商家接單</van-step>
  <van-step>買家提貨</van-step>
  <van-step>交易完成</van-step>
</van-steps>

豎向步驟條

可以通過設置 ?direction? 屬性來改變步驟條的顯示方向。

<van-steps direction="vertical" :active="0">
  <van-step>
    <h3>【城市】物流狀態(tài)1</h3>
    <p>2016-07-12 12:40</p>
  </van-step>
  <van-step>
    <h3>【城市】物流狀態(tài)2</h3>
    <p>2016-07-11 10:00</p>
  </van-step>
  <van-step>
    <h3>快件已發(fā)貨</h3>
    <p>2016-07-10 09:30</p>
  </van-step>
</van-steps>

API

Steps Props

Step Slots

Steps Events

類型定義

組件導出以下類型定義：

import type { StepsProps, StepsDirection } from 'vant';

主題定制

樣式變量

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