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

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

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

在main.js頁面引用iconfont

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

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

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

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

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

?

轉載于:https://www.cnblogs.com/tomatoto/p/9962395.html

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。