項目中需要自定義 el-steps的圖標 同時完成時圖標也要進行修改，記錄一下，有寫的不好的地方歡迎大佬們指正:

實現(xiàn)步驟：

首先在templete部分：
el-step中添加一個插槽 slot=“icon”， 為其添加類名，以便于修改樣式

<el-steps class="handlerSteps">
          <el-step
            @click.native="scrollToTop('build')"
            :status="flag_build ? 'success' : 'wait'"
            title="立項"
          >
            <i class="build stepIcon" slot="icon"></i>
          </el-step>
          <el-step
            @click.native="scrollToTop('design')"
            :status="flag_design ? 'success' : 'wait'"
            title="設計"
          >
            <i class="design stepIcon" slot="icon"></i>
          </el-step>
          <el-step
            @click.native="scrollToTop('bidding')"
            :status="flag_bidding ? 'success' : 'wait'"
            title="招標"
          >
            <i class="bidding stepIcon" slot="icon"></i>
          </el-step>
          <el-step
            @click.native="scrollToTop('doing')"
            :status="flag_doing ? 'success' : 'wait'"
            title="施工"
          >
            <i class="doing stepIcon" slot="icon"></i>
          </el-step>
          <el-step
            @click.native="scrollToTop('check')"
            :status="flag_check ? 'success' : 'wait'"
            title="驗收"
          >
            <i class="check stepIcon" slot="icon"></i>
          </el-step>
          <el-step
            @click.native="scrollToTop('payProgress')"
            :status="flag_pay ? 'success' : 'wait'"
            title="進度支付"
          >
            <i class="pay stepIcon" slot="icon"></i>
          </el-step>
        </el-steps>

css部分：
記得不要寫在 scoped中，否則不會生效， 這里是新開了一個style標簽，所以沒有寫穿透
等待節(jié)點自定義圖標：

.handlerSteps{
      .stepIcon{
        width: 35px;
        height: 35px;
        background-size: 100% 100%;
      }
      .build{
        background-image: url("~@/static/images/project/build.png");
      }
      .design{
        background-image: url("~@/static/images/project/design.png");
      }
      .bidding{
        background-image: url("~@/static/images/project/bidding.png");
      }
      .doing{
        background-image: url("~@/static/images/project/doing.png");
      }
      .check{
        background-image: url("~@/static/images/project/check.png");
      }
      .pay{
        background-image: url("~@/static/images/project/pay.png");
      }

成功狀態(tài)自定義圖標：文章來源地址http://www.zghlxwxcb.cn/news/detail-514777.html

.el-step{
        &>.is-success{
          .is-icon{
              i{
              	//默認成功狀態(tài)是在這個偽類中寫的，因此覆蓋掉這個√，寫入自己的圖片
                &:before{
                  content:"";
                }
                width:35px;
                height:35px;
                background-size: 100% 100%;
                background-image: url("~@/static/images/project/done.png");
              }
          }
        }
        .el-step__title{
          text-indent:6px;
        }
      }

到了這里，關于element-ui el-steps自定義進度圖標及完成圖標的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網(wǎng)！