element-ui el-steps自定义进度图标及完成图标-Toy模板网

这篇具有很好参考价值的文章主要介绍了element-ui el-steps自定义进度图标及完成图标。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

element-ui el-steps自定义进度图标及完成图标
项目中需要自定义 el-steps的图标同时完成时图标也要进行修改，记录一下，有写的不好的地方欢迎大佬们指正:

实现步骤：

首先在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标签，所以没有写穿透
等待节点自定义图标：

.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");
      }

成功状态自定义图标：文章来源地址https://www.toymoban.com/news/detail-514777.html

.el-step{
        &>.is-success{
          .is-icon{
              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;
        }
      }