这篇文章主要讲解了如何使用Element Steps步骤条，内容清晰明了，对此有兴趣的小伙伴可以学习一下，相信大家阅读完之后会有帮助。

组件— 通知

基础用法

<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 @click="next">下一步</el-button><script> export default { data() { return { active: 0 }; }, methods: { next() { if (this.active++ > 2) this.active = 0; } } }</script>

含状态步骤条

<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="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 :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 > <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>

简洁风格的步骤条

<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 > <el-step title="步骤 1" ></el-step> <el-step title="步骤 2" ></el-step> <el-step title="步骤 3" ></el-step></el-steps>

Steps Attributes

Step

Attributes

Step

Slot

看完上述内容，是不是对如何使用Element Steps步骤条有进一步的了解，如果还想学习更多内容，欢迎关注亿速云行业资讯频道。