Vant3 Steps 步驟條

2021-09-14 11:15 更新

介紹

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

實(shí)例演示

引入

通過以下方式來全局注冊(cè)組件,更多注冊(cè)方式請(qǐng)參考組件注冊(cè)

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

const app = createApp();
app.use(Step);
app.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>
import { ref } from 'vue';

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

自定義樣式

可以通過 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>

API

Steps Props

參數(shù) 說明 類型 默認(rèn)值
active 當(dāng)前步驟對(duì)應(yīng)的索引值 number | string 0
direction 步驟條方向,可選值為 vertical string horizontal
active-icon 當(dāng)前步驟對(duì)應(yīng)的底部圖標(biāo),可選值見 Icon 組件 string checked
inactive-icon 非當(dāng)前步驟對(duì)應(yīng)的底部圖標(biāo),可選值見 Icon 組件 string -
finish-icon v3.0.7 已完成步驟對(duì)應(yīng)的底部圖標(biāo),優(yōu)先級(jí)高于 inactive-icon,可選值見 Icon 組件 string -
active-color 當(dāng)前步驟和已完成步驟的顏色 string #07c160
inactive-color 未激活步驟的顏色 string #969799
icon-prefix v3.0.15 圖標(biāo)類名前綴,等同于 Icon 組件的 class-prefix 屬性 string van-icon

Step Slots

名稱 說明
active-icon 自定義激活狀態(tài)圖標(biāo)
inactive-icon 自定義未激活狀態(tài)圖標(biāo)
finish-icon v3.0.7 自定義已完成步驟對(duì)應(yīng)的底部圖標(biāo),優(yōu)先級(jí)高于 inactive-icon

Steps Events

事件名 說明 回調(diào)參數(shù)
click-step 點(diǎn)擊步驟的標(biāo)題或圖標(biāo)時(shí)觸發(fā) index: number

樣式變量

組件提供了下列 CSS 變量,可用于自定義樣式,使用方法請(qǐng)參考 ConfigProvider 組件

名稱 默認(rèn)值 描述
--van-step-text-color var(--van-gray-6) -
--van-step-active-color var(--van-success-color) -
--van-step-process-text-color var(--van-text-color) -
--van-step-font-size var(--van-font-size-md) -
--van-step-line-color var(--van-border-color) -
--van-step-finish-line-color var(--van-success-color) -
--van-step-finish-text-color var(--van-text-color) -
--van-step-icon-size 12px -
--van-step-circle-size 5px -
--van-step-circle-color var(--van-gray-6) -
--van-step-horizontal-title-font-size var(--van-font-size-sm) -
--van-steps-background-color var(--van-white) -


以上內(nèi)容是否對(duì)您有幫助:
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號(hào)
微信公眾號(hào)

編程獅公眾號(hào)