elementUI步骤条样式改造

原文地址：elementUI步骤条样式改造

image.png

修改的效果图如上。下面详细介绍修改的步骤。（通过动态添加类名的方式改进样式）

结构部分

<el-steps :active="milepostActive" >
  <el-step v-for="(value, key) in milepost"
           :class="milepostActive== key+1 ? stepActive: '' "
           :title="value.title"
           :description="value.description">
  </el-step>
</el-steps>

数据定义部分（data）

data () {
  return {
    // 数组对象
    milepost: [
      {title: '项目策划', description: '2019.1.1'},
      {title: '立项', description: '2019.3.1'},
      {title: '需求', description: '2019.5.1'},
      {title: '开发', description: '2019.7.1'},
      {title: '测试', description: '2019.9.1'},
      {title: '发布', description: '2019.11.1'},
      {title: '结项', description: '2019.12.31'},
    ],
    // 默认步骤数
    milepostActive: 5,
    // 动态添加类名
    stepActive: 'stepActive'
  }
},

样式部分

<style lang="scss">
 .el-step.is-horizontal.stepActive{
   .el-step__head.is-finish{
     .el-step__line{
       // 当前步骤数横线样式设置
       .el-step__line-inner{
         width: 50% !important;
         border-width: 1px !important;
       }
     }
     // 当前步骤数圆圈样式设置
     .el-step__icon.is-text{
       background: #409eff;
       color:#fff;
     }
   }
 }
</style>