038_Steps步骤条

article/2025/9/17 22:07:56

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