引入

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

Vue.use(Step);
Vue.use(Steps);

基礎(chǔ)用法

active 屬性表示當(dāng)前步驟的索引，從 0 起計(jì)。

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

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

自定義樣式

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

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

豎向步驟條

可以通過設(shè)置 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>

Steps Props

Step Slots

Steps Events

樣式變量

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