element 自定义步骤条

1.通过具名slot来使用自定义的图标，自定义描述性文字，自定义标题

<el-steps :active="contentStage" align-center>
        <el-step title="步骤1" description="">
          <template slot="icon">
            <img src="../../assets/questionnaireInvestigation/1.png">
          </template>
        </el-step>
        <el-step title="步骤2" description="">
          <template slot="icon">
            <img src="../../assets/questionnaireInvestigation/1.png">
          </template>
        </el-step>
        <el-step title="步骤3" description="">
          <template slot="description">
            <div>啦啦啦</div>
          </template>
        </el-step>
        <el-step title="步骤4" description="">
          <template slot="title">
            <div>步骤111</div>
          </template>
        </el-step>
        <el-step title="步骤5" description=""></el-step>
        <el-step title="步骤6" description=""></el-step>
        <el-step title="步骤7" description=""></el-step>
        <el-step title="步骤8" description=""></el-step>
      </el-steps>

contentStage: 0,

2.步骤条

<el-steps :active="contentStage" align-center>
  <el-step title="步骤1" description=""></el-step>
  <el-step title="步骤2" description=""></el-step>
  <el-step title="步骤3" description=""></el-step>
  <el-step title="步骤4" description=""></el-step>
  <el-step title="步骤5" description=""></el-step>
</el-steps>

contentStage: 2,

<style lang='scss' scoped>![请添加图片描述](https://img-blog.csdnimg.cn/c79b559c32fb43759778c15b597d3217.png)

::v-deep .el-step__icon.is-text {
  border-radius: 50%;
  border: 6px solid;
  border-color: inherit;
}
::v-deep .el-step__icon {
  width: 0px;
  height: 0px;
  font-size: 0px;
  top: -3px;
}
::v-deep .el-step__head.is-finish {
  color: rgb(0, 121, 254);
  border-color: rgb(0, 121, 254);
  .el-step__line {
      background-color: rgb(0, 121, 254);
  }
}
::v-deep .el-step__title.is-finish {
  color: rgb(0, 121, 254);
}
::v-deep .el-step__head.is-process {
  color: rgb(0, 121, 254);
  border-color: rgb(0, 121, 254);
}
::v-deep .el-step__title.is-process {
  color: rgb(0, 121, 254);
}
</style>

3. 自定义步骤条

步骤条

<template>
  <div style="height:600px;">
    <div style="height:200px;width:100%">

    </div>
    <el-steps :active="contentStage" align-center>
      <el-step title="第一步" description="">
        <template slot="icon">
          <img :src="contentStage==-1?png1:contentStage==0?pngBlue1:completed">
        </template>
      </el-step>
      <el-step title="第二步" description="">
        <template slot="icon">
          <img :src="contentStage==-1||contentStage==0?png1:contentStage==1?pngBlue1:completed">
        </template>
      </el-step>
      <el-step title="第三步" description="">
        <template slot="icon">
          <img :src="contentStage==-1||contentStage<2?png1:contentStage==2?pngBlue1:completed">
        </template>
      </el-step>
      <el-step title="第四步" description="">
        <template slot="icon">
          <img :src="contentStage==-1||contentStage<3?png1:contentStage==3?pngBlue1:completed">
        </template>
      </el-step>
      <el-step title="第五步" description="">
        <template slot="icon">
          <img :src="contentStage==-1||contentStage<4?png1:contentStage==4?pngBlue1:completed">
        </template>
      </el-step>
      <el-step title="第六步" description="">
        <template slot="icon">
          <img :src="contentStage==-1||contentStage<5?png1:contentStage==5?pngBlue1:completed">
        </template>
      </el-step>
    </el-steps>
    <el-button type="primary" @click="nextClick"> 下一步</el-button>
  </div>
</template>

<script>
import completed from "../../assets/questionnaireInvestigation/completed.png";

import png1 from "../../assets/questionnaireInvestigation/1.png";
import pngBlue1 from "../../assets/questionnaireInvestigation/1-blue.png";
export default {
  data() {
    return {
      png1: png1,
      pngBlue1: pngBlue1,
      completed: completed,
      contentStage: -1,
    };
  },
  watch: {
    showItem() {
      if (!this.showItem) {
        this.clearItem();
      }
    },
  },
  methods: {
    nextClick() {
      if (this.contentStage++ == 6) this.contentStage = -1;
    },
  },
};
</script>


<style lang="scss" scoped>
::v-deep .el-step__icon.is-text {
  border-radius: 50%;
  border: 0px solid;
  border-color: inherit;
}
::v-deep .el-step__icon {
  width: 0px;
  height: 0px;
  font-size: 0px;
  top: -3px;
}
::v-deep .el-step.is-horizontal .el-step__line {
    height: 2px;
    top: 40px;
}

::v-deep .el-step__head.is-finish {
  color: rgb(0, 121, 254);
  .el-step__line {
      background-color: rgb(171, 199, 243);
  }
}
::v-deep .el-step__title.is-finish {
  color: rgb(0, 121, 254);
}
::v-deep .el-step__head.is-process {
  color: rgb(0, 121, 254);
  border-color: rgb(0, 121, 254);
}
::v-deep .el-step__title.is-process {
  color: rgb(0, 121, 254);
}
</style>