項目中需要自定義 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é)點自定義圖標:
文章來源:http://www.zghlxwxcb.cn/news/detail-514777.html
.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)!