Vue2+Element-UI的el-steps封装与修改样式

 

<template>
  <div>
    <!--1.设置 simple 可应用简洁风格，该条件下 align-center / description / direction / space 都将失效。-->
    <!--    <el-steps :active="currentStep" simple>-->
    <!--      <el-step-->
    <!--          v-for="(item, index) in stepsArr"-->
    <!--          :key="index"-->
    <!--          :title="item.title"-->
    <!--          :description="item.description"-->
    <!--          :icon="item.icon"-->
    <!--      />-->
    <!--    </el-steps>-->

    <!-- 2.当前使用的是假数据,正式组件封装可以采用Props传值的方式 -->
    <el-steps :active="values" align-center process-status="process" finish-status="success">
      <el-step
          v-for="(item, index) in stepsData"
          :key="index"
          :title="item.title"
          :description="item.date"
      />
    </el-steps>


    <!--3.采用Props传值的方式-->
    <!--    <el-steps :active="currentStep" align-center process-status="process" finish-status="success">-->
    <!--      <el-step-->
    <!--          v-for="(item, index) in stepsArr"-->
    <!--          :key="index"-->
    <!--          :title="item.title"-->
    <!--          :description="item.description"-->
    <!--      />-->
    <!--    </el-steps>-->


  </div>
</template>

<script>
export default {
  name: 'StepsComponent',
  props: {
    currentStep: {
      type: Number,
      default: 0
    },
    stepsArr: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      stepsData: [
        {
          title: '第1步',
          date: '完成时间：xxxx-xx-xx xx:xx:xx'
        },
        {
          title: '第2步',
          date: '完成时间：xxxx-xx-xx xx:xx:xx'
        },
        {
          title: '第3步',
          date: '完成时间：xxxx-xx-xx xx:xx:xx'
        },
        {
          title: '第4步',
          date: '完成时间：xxxx-xx-xx xx:xx:xx'
        },
        {
          title: '第5步',
          date: '完成时间：xxxx-xx-xx xx:xx:xx'
        },
        {
          title: '第6步',
          date: '完成时间：xxxx-xx-xx xx:xx:xx'
        },
      ],
      values: 3,
    };
  }
};
</script>


<style lang="scss" scoped>

// finish 图标
/deep/ .el-steps.el-steps--horizontal .el-step.is-horizontal.is-center .el-step__head.is-finish .el-step__icon {
  z-index: 1;
  color: darkgray;
  border-color: darkgray;
}

//finish title 颜色
/deep/ .el-steps.el-steps--horizontal .el-step.is-horizontal.is-center .el-step__title.is-finish {
  color: darkgray;
  font-weight: 700;
}

//finish description 颜色
/deep/ .el-steps.el-steps--horizontal .el-step.is-horizontal.is-center .el-step__description.is-finish {
  color: darkgray;
  font-weight: 700;
  white-space: nowrap;
}

// finish 连线  
/deep/ .el-steps.el-steps--horizontal .el-step.is-horizontal.is-center .el-step__head.is-finish .el-step__line {
  position: absolute;
  border-color: darkgray;
  background-color: darkgray;
}



// process 图标
/deep/ .el-steps.el-steps--horizontal .el-step.is-horizontal.is-center .el-step__head.is-process .el-step__icon {
  z-index: 1;
  color: #1ed2c3;
  border-color: #1ed2c3;
}

//process 文字颜色
/deep/ .el-steps.el-steps--horizontal .el-step.is-horizontal.is-center .el-step__title.is-process {
  font-weight: 700;
  color: #1ed2c3;
}

//process description 颜色
/deep/ .el-steps.el-steps--horizontal .el-step.is-horizontal.is-center .el-step__description.is-process {
  color: #1ed2c3;
  font-weight: 700;
  white-space: nowrap;
}

//process  连线 
/deep/ .el-steps.el-steps--horizontal.el-step.is-horizontal.is-center.el-step__head.is-process.el-step__line {
  border-color: #1ed2c3;
  background-color: #1ed2c3;
}


// wait 图标
/deep/ .el-steps.el-steps--horizontal .el-step.is-horizontal.is-center .el-step__head.is-wait .el-step__icon {
  z-index: 1;
  color: #f6ce06;
  border-color: #f6ce06;
}

// wait文字颜色
/deep/ .el-steps.el-steps--horizontal .el-step.is-horizontal.is-center .el-step__title.is-wait {
  font-weight: 700;
  color: #f6ce06;
}

//wait description 颜色
/deep/ .el-steps.el-steps--horizontal .el-step.is-horizontal.is-center .el-step__description.is-wait {
  color: #f6ce06;
  font-weight: 700;
  white-space: nowrap;
}

//wait   连线 
/deep/ .el-steps.el-steps--horizontal.el-step.is-horizontal.is-center.el-step__head.is-wait.el-step__line {
  border-color: #f6ce06;
  background-color: #f6ce06;
}




// error 图标
/deep/ .el-steps.el-steps--horizontal .el-step.is-horizontal.is-center .el-step__head.is-error .el-step__icon {
  z-index: 1;
  color: #ff0000;
  border-color: #ff0000;
}

// error文字颜色
/deep/ .el-steps.el-steps--horizontal .el-step.is-horizontal.is-center .el-step__title.is-error {
  font-weight: 700;
  color: #ff0000;
}

//error description 颜色
/deep/ .el-steps.el-steps--horizontal .el-step.is-horizontal.is-center .el-step__description.is-error {
  color: #ff0000;
  font-weight: 700;
  white-space: nowrap;
}

//error   连线  
/deep/ .el-steps.el-steps--horizontal.el-step.is-horizontal.is-center.el-step__head.is-error.el-step__line {
  border-color: #ff0000;
  background-color: #ff0000;
}


//success 图标
/deep/ .el-steps.el-steps--horizontal .el-step.is-horizontal.is-center .el-step__head.is-success .el-step__icon {
  z-index: 1;
  color: #5eff00;
  border-color: #5eff00;
}

// success文字颜色
/deep/ .el-steps.el-steps--horizontal .el-step.is-horizontal.is-center .el-step__title.is-success {
  font-weight: 700;
  color: #5eff00;
}

//success description 颜色
/deep/ .el-steps.el-steps--horizontal .el-step.is-horizontal.is-center .el-step__description.is-success {
  color: #5eff00;
  font-weight: 700;
  white-space: nowrap;
}

//success   连线  
/deep/ .el-steps.el-steps--horizontal.el-step.is-horizontal.is-center.el-step__head.is-success.el-step__line {
  border-color: #5eff00;
  background-color: #5eff00;
}



</style>