前端学习（2693）：重读vue电商网站14之步骤条的使用与美化

 

以下就是步骤条使用的核心代码，其中 active 绑定的是每一个 step 的下标，默认从 0 开始。其次，我们可以设置 aligin-center 属性来让我们的步骤条进行居中。el-step就是每一个步骤进度。

Javascript

<!-- 步骤条区域 -->
<el-steps :space="200" :active="activeIndex" finish-status="success" align-center>
   <el-step title="基本信息"></el-step>
   <el-step title="商品参数"></el-step>
   <el-step title="商品属性"></el-step>
   <el-step title="商品图片"></el-step>
   <el-step title="商品内容"></el-step>
   <el-step title="完成"></el-step>
</el-steps>

更改原本样式，得到我们想要的效果：

Css

.el-steps{
    margin: 15px 0;
}
.el-step__title{
    font-size: 13px;
}

最终实现效果如下：