Vant Steps 步驟條

引入

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>買(mǎi)家下單</van-step>
  <van-step>商家接單</van-step>
  <van-step>買(mǎi)家提貨</van-step>
  <van-step>交易完成</van-step>
</van-steps>

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

自定義樣式

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

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

豎向步驟條

可以通過(guò)設(shè)置direction屬性來(lái)改變步驟條的顯示方向

<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