el-steps步驟條中的圖標想要替換成圖片

實現效果：

 

如上所示，需要改變每個步驟的圖標，在process和finish下顯示不同顏色。

 

實現代碼：

1.html：

<el-steps :active="active">
  <el-step title="企業基本信息">
    <i class="step01" slot="icon"></i>
  </el-step>
  <el-step title="企業銀行賬戶信息">
    <i class="step02" slot="icon"></i>
  </el-step>
  <el-step title="法人及聯系人信息">
    <i class="step03" slot="icon"></i>
  </el-step>
  <el-step title="受益人信息">
    <i class="step04" slot="icon"></i>
  </el-step>
</el-steps>

2.css：

.step01, .step02, .step03, .step04{
  width: 35px;
  height: 35px;
  background-size: 100% 100%;
}
.step01{
  background-image: url("~@/assets/images2/1_company.png");
}
.step02{
  background-image: url("~@/assets/images2/1_bank_grey.png");
}
.step03{
  background-image: url("~@/assets/images2/1_legal_person_grey.png");
}
.step04{
  background-image: url("~@/assets/images2/user_user_grey.png");
}
/deep/ .el-steps{
  width: 80%;
  .el-step.is-horizontal .el-step__line{
    top: 50%;
    left: 94px;
    right: 48px;
  }
  .el-step__head.is-process{
    border-color: #dedede;
  }
  .el-step__head.is-finish{
    border-color: #285edf;
  }
  .el-step__title.is-process{
    color: #dedede;
  }
  .el-step__title.is-finish{
    color: #285edf;
  }
  .el-step__icon{
    width:56px; 
    height:56px;
  }
  .is-finish .step02{
    background-image: url("~@/assets/images2/1_bank.png");
  }
  .is-finish .step03{
    background-image: url("~@/assets/images2/1_legal_person.png");
  }
  .is-finish .step04{
    background-image: url("~@/assets/images2/user_user.png");
  }
}

 

注意：

1.在el-steps中設置slot，給每個icon加class，然后對設置的class設置背景圖片及樣式。

2.主要是分為兩部分，設置一開始process的圖片（灰），再設置finish的圖片（藍），第一個步驟的不需要這樣，只要一開始設置為藍色的就可以了。

3.參考鏈接：

https://www.jianbaizhan.com/article/544.html

https://blog.csdn.net/hggl_bera/article/details/106430036