elmentui的Steps 步骤条样式改造

话不多说上代码

100

101

102

103

104

105

106

107

108

<template>
  <div style="padding:30px;height: 300px;">
    <el-alert :closable="false" title="menu 2" />
    <el-steps :active="active" finish-status="success">
      <el-step title="步骤1" description="这是一段很长很长很长的描述性文字">
 
        <span slot="title" style="自定义样式" />
 
        description可有多个取决于节点需要
 
        <span slot="description" style="自定义样式" />
 
        <span slot="description" style="自定义样式" />
 
      </el-step>
 
      <el-step title="步骤 1" icon="el-icon-sort-up">a</el-step>
      <el-step title="步骤 2" icon="el-icon-sort-up">a</el-step>
      <el-step title="步骤 3" icon="el-icon-sort-up">a</el-step>
    </el-steps>
 
    <el-button style="margin-top: 12px;" @click="next">下一步</el-button>
 
    <el-steps direction="vertical" :active="1">
      <el-step title="步骤 1" />
      <el-step title="步骤 2" />
      <el-step title="步骤 3" description="这是一段很长很长很长的描述性文字" />
    </el-steps>
    <el-steps :active="milepostActive">
      <el-step
        v-for="(value, key) in milepost"
        :key="key"
        :class="milepostActive== key+1 ? stepActive: noActive "
        :title="value.title"
        :description="value.description"
      />
    </el-steps>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      active: 0,
      // 数组对象
      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',
      noActive: 'noActive'
 
    }
  },
 
  methods: {
    next() {
      if (this.active++ > 3) this.active = 0
    }
    // mouseOver(){
 
    // }
  }
}
</script>
<style lang="scss">
 .el-step.is-horizontal.noActive{
   .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: rgb(146, 224, 146);
       color:#fff;
     }
   }
 }
 .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: red;
       color:#fff;
     }
   }
 }
</style>