ElementPlus Steps 步驟條

Steps 步驟條

引導(dǎo)用戶按照流程完成任務(wù)的分步導(dǎo)航條，可根據(jù)實(shí)際應(yīng)用場(chǎng)景設(shè)定步驟，步驟不得少于 2 步。

基礎(chǔ)用法

簡(jiǎn)單的步驟條。

設(shè)置active屬性，接受一個(gè)Number，表明步驟的 index，從 0 開(kāi)始。需要定寬的步驟條時(shí)，設(shè)置space屬性即可，它接受Number，單位為px，如果不設(shè)置，則為自適應(yīng)。設(shè)置finish-status屬性可以改變已經(jīng)完成的步驟的狀態(tài)。

<template>
  <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>
</template>

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

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

含狀態(tài)步驟條

每一步驟顯示出該步驟的狀態(tài)。

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

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

有描述的步驟條

每個(gè)步驟有其對(duì)應(yīng)的步驟狀態(tài)描述。

<template>
  <el-steps :active="1">
  <el-step
    title="步驟 1"
    description="這是一段很長(zhǎng)很長(zhǎng)很長(zhǎng)的描述性文字"
  ></el-step>
  <el-step
    title="步驟 2"
    description="這是一段很長(zhǎng)很長(zhǎng)很長(zhǎng)的描述性文字"
  ></el-step>
  <el-step title="步驟 3" description="這段就沒(méi)那么長(zhǎng)了"></el-step>
</el-steps>
</template>

居中的步驟條

標(biāo)題和描述都將居中。

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

帶圖標(biāo)的步驟條

步驟條內(nèi)可以啟用各種自定義的圖標(biāo)。

通過(guò)icon屬性來(lái)設(shè)置圖標(biāo)，圖標(biāo)的類型可以參考 Icon 組件的文檔，除此以外，還能通過(guò)具名slot來(lái)使用自定義的圖標(biāo)。

<template>
  <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>
</template>

豎式步驟條

豎直方向的步驟條。

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

<template>
  <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="這是一段很長(zhǎng)很長(zhǎng)很長(zhǎng)的描述性文字"
    ></el-step>
  </el-steps>
</div>
</template>

簡(jiǎn)潔風(fēng)格的步驟條

設(shè)置 simple 可應(yīng)用簡(jiǎn)潔風(fēng)格，該條件下 align-center / description / direction / space 都將失效。

<template>
  <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>
</template>

Steps Attributes

Step Attributes

Step Slot