在使用ElementsUI中的步驟條時(shí)，有時(shí)會(huì)遇到自定義icon的情況。但element icon數(shù)量不多，可能找不到需要的。

這時(shí)我們可以自定義icon，同樣通過類來引用。首先我們先下載好需要的icon，具體過程可以搜索iconfont下載。

下載好之后解壓，將這五個(gè)文件加入到我們的項(xiàng)目中。在iconfont.css頁面可以修改圖片類的名稱，方便引用。

在main.js頁面引用iconfont

import './assets/icon/iconfont.css'

這時(shí)我們就可以正常使用icon了，在icon處填寫剛才定義好的類。

變色部分的處理：一般情況下未完成的步驟是灰色，我們可以直接操作element的類

.el-step__head.is-process {color: #9ea4af; }; .step1 .el-step__head.is-finish {color: #FF0000;border-color: #FF0000; }

這樣就完成了變色的效果。

?

轉(zhuǎn)載于:https://www.cnblogs.com/tomatoto/p/9962395.html

總結(jié)

以上是生活随笔為你收集整理的ElementUI自定义icon步骤条的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。