Steps 步驟條

引導用戶按照流程完成任務的分步導航條，可根據實際應用場景設定步驟，步驟不得少於 2 步。

基礎用法

簡單的步驟條。

設置active屬性，接受一個Number，表明步驟的 index，從 0 開始。需要定寬的步驟條時，設置space屬性即可，它接受Boolean，單位為px，如果不設置，則為自適應。設置finish-status屬性可以改變已經完成的步驟的狀態。

<el-steps :active="active" finish-status="success">
  <el-step title="步驟 1"></el-step>
  <el-step title="步驟 2"></el-step>
  <el-step title="步驟 3"></el-step>
</el-steps>

<el-button style="margin-top: 12px;" @click="next">下一步</el-button>

<script>
  export default {
    data() {
      return {
        active: 0
      };
    },

    methods: {
      next() {
        if (this.active++ > 2) this.active = 0;
      }
    }
  }
</script>

 

含狀態步驟條

每一步驟顯示出該步驟的狀態。

也可以使用title具名分發，可以用slot的方式來取代屬性的設置，在本文檔最后的列表中有所有的 slot name 可供參考。

<el-steps :space="200" :active="1" finish-status="success">
  <el-step title="已完成"></el-step>
  <el-step title="進行中"></el-step>
  <el-step title="步驟 3"></el-step>
</el-steps>

 

有描述的步驟條

每個步驟有其對應的步驟狀態描述。

<el-steps :active="1">
  <el-step title="步驟 1" description="這是一段很長很長很長的描述性文字"></el-step>
  <el-step title="步驟 2" description="這是一段很長很長很長的描述性文字"></el-step>
  <el-step title="步驟 3" description="這段就沒那么長了"></el-step>
</el-steps>

 

居中的步驟條

標題和描述都將居中。

<el-steps :active="2" align-center>
  <el-step title="步驟1" description="這是一段很長很長很長的描述性文字"></el-step>
  <el-step title="步驟2" description="這是一段很長很長很長的描述性文字"></el-step>
  <el-step title="步驟3" description="這是一段很長很長很長的描述性文字"></el-step>
  <el-step title="步驟4" description="這是一段很長很長很長的描述性文字"></el-step>
</el-steps>

 

帶圖標的步驟條

步驟條內可以啟用各種自定義的圖標。

通過icon屬性來設置圖標，圖標的類型可以參考 Icon 組件的文檔，除此以外，還能通過具名slot來使用自定義的圖標。

<el-steps :active="1">
  <el-step title="步驟 1" icon="el-icon-edit"></el-step>
  <el-step title="步驟 2" icon="el-icon-upload"></el-step>
  <el-step title="步驟 3" icon="el-icon-picture"></el-step>
</el-steps>

 

豎式步驟條

豎直方向的步驟條。

只需要在el-steps元素中設置direction屬性為vertical即可。

<div style="height: 300px;">
  <el-steps direction="vertical" :active="1">
    <el-step title="步驟 1"></el-step>
    <el-step title="步驟 2"></el-step>
    <el-step title="步驟 3" description="這是一段很長很長很長的描述性文字"></el-step>
  </el-steps>
</div>

 

簡潔風格的步驟條

設置 simple 可應用簡潔風格，該條件下 align-center / description / direction / space 都將失效。

<el-steps :active="1" simple>
  <el-step title="步驟 1" icon="el-icon-edit"></el-step>
  <el-step title="步驟 2" icon="el-icon-upload"></el-step>
  <el-step title="步驟 3" icon="el-icon-picture"></el-step>
</el-steps>

<el-steps :active="1" finish-status="success" simple style="margin-top: 20px">
  <el-step title="步驟 1" ></el-step>
  <el-step title="步驟 2" ></el-step>
  <el-step title="步驟 3" ></el-step>
</el-steps>

 

Steps Attributes

參數	說明	類型	可選值	默認值
space	每個 step 的間距，不填寫將自適應間距。支持百分比。	number / string	—	—
direction	顯示方向	string	vertical/horizontal	horizontal
active	設置當前激活步驟	number	—	0
process-status	設置當前步驟的狀態	string	wait / process / finish / error / success	process
finish-status	設置結束步驟的狀態	string	wait / process / finish / error / success	finish
align-center	進行居中對齊	boolean	-	false
simple	是否應用簡潔風格	boolean	-	false

Step Attributes

參數	說明	類型	可選值	默認值
title	標題	string	—	—
description	描述性文字	string	—	—
icon	圖標	傳入 icon 的 class 全名來自定義 icon，也支持 slot 方式寫入	string	—
status	設置當前步驟的狀態，不設置則根據 steps 確定狀態	wait / process / finish / error / success	-

Step Slot

name	說明
icon	圖標
title	標題
description	描述性文字