1. Steps步驟條

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

1.2. 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

1.3. Step Attributes

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

1.4. Step Slot

Name	說明
icon	自定義圖標
title	自定義標題
description	自定義描述性文字

2. Steps步驟條例子

2.1. 使用腳手架新建一個名為element-ui-steps的前端項目, 同時安裝Element插件。

2.2. 編輯index.js?

import Vue from 'vue' import VueRouter from 'vue-router' import Steps from '../components/Steps.vue' import TitleSteps from '../components/TitleSteps.vue' import DescriptionSteps from '../components/DescriptionSteps.vue' import IconSteps from '../components/IconSteps.vue' import VerticalSteps from '../components/VerticalSteps.vue' import SimpleSteps from '../components/SimpleSteps.vue'Vue.use(VueRouter)const routes = [{ path: '/', redirect: '/Steps' },{ path: '/Steps', component: Steps },{ path: '/TitleSteps', component: TitleSteps },{ path: '/DescriptionSteps', component: DescriptionSteps },{ path: '/IconSteps', component: IconSteps },{ path: '/VerticalSteps', component: VerticalSteps },{ path: '/SimpleSteps', component: SimpleSteps } ]const router = new VueRouter({routes })export default router

2.3. 在components下創建Steps.vue

<template><div><h1>基礎用法</h1><h4>設置active屬性, 接受一個Number, 表明步驟的index, 從0開始。需要定寬的步驟條時, 設置space屬性即可, 它接受Number, 單位為px, 如果不設置, 則為自適應。設置finish-status屬性可以改變已經完成的步驟的狀態。</h4><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></div> </template><script> export default {data () {return {active: 0}},methods: {next () {if (this.active++ > 2) this.active = 0}} } </script>

2.4. 在components下創建TitleSteps.vue

<template><div><h1>含狀態步驟條</h1><h4>也可以使用title具名分發, 可以用slot的方式來取代屬性的設置, 在本文檔最后的列表中有所有的slot name可供參考。</h4><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></div> </template>

2.5. 在components下創建DescriptionSteps.vue

<template><div><h1>有描述的步驟條</h1><h4>description設置每個步驟有其對應的步驟狀態描述。</h4><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><h1>居中的步驟條</h1><h4>align-center進行居中對齊, 標題和描述都將居中。</h4><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></div> </template>

2.6. 在components下創建IconSteps.vue

<template><div><h1>帶圖標的步驟條</h1><h4>通過icon屬性來設置圖標, 圖標的類型可以參考Icon組件的文檔, 除此以外, 還能通過具名slot來使用自定義的圖標。</h4><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></div> </template>

2.7. 在components下創建VerticalSteps.vue

<template><div><h1>豎式步驟條</h1><h4>只需要在el-steps元素中設置direction屬性為vertical即可。</h4><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></div> </template>

2.8. 在components下創建SimpleSteps.vue

<template><div><h1>簡潔風格的步驟條</h1><h4>設置simple可應用簡潔風格, 該條件下align-center / description / direction / space都將失效。</h4><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></div> </template>

2.9. 運行項目, 訪問http://localhost:8080/#/Steps

2.10. 運行項目, 訪問http://localhost:8080/#/TitleSteps

2.11. 運行項目, 訪問http://localhost:8080/#/DescriptionSteps?

2.12. 運行項目, 訪問http://localhost:8080/#/IconSteps?

2.13. 運行項目, 訪問http://localhost:8080/#/VerticalSteps?

?

2.14. 運行項目, 訪問http://localhost:8080/#/SimpleSteps

總結

以上是生活随笔為你收集整理的038_Steps步骤条的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。