element ui 的step 图标被替换方法

例子：

<el-steps :space="340" :active="1"  :align-center="true" :center="true">
  <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

css：

.step01,.step02,.step03,.step04{ width:24px; height:24px; display: inline-block;background-repeat: no-repeat;background-image: url("../assets/images/shopcard/step01.png");}
.step02{background-image: url("../assets/images/shopcard/step02.png");}
.step03{background-image: url("../assets/images/shopcard/step03.png");}
.step04{background-image: url("../assets/images/shopcard/step04.png");}
.shopCard_step .el-step__head.is-text{    border-style: hidden;background-color:transparent !important;}
.shopCard_step .el-step__head.is-text.is-finish .step02{background-image: url("../assets/images/shopcard/step02H.png");}
.shopCard_step .el-step__head.is-text.is-finish .step03{background-image: url("../assets/images/shopcard/step03H.png");}
.shopCard_step .el-step__head.is-text.is-finish .step04{background-image: url("../assets/images/shopcard/step04H.png");}

效果：

来源于： https://segmentfault.com/q/1010000008186758

本文作者： Jasmine

本文链接： https://www.jianbaizhan.com/article/544

版权声明： 本博客所有文章除特别声明外，均采用 CC BY-NC-SA 3.0 许可协议。转载请注明出处！