ElementUI中Progress進度條組件官網給了如下屬性:
這里的color很好理解就是顯示實際進度的顏色(個人覺得叫背景色不太好)。但是官網並沒有給出設置底色的屬性,只給了一個默認的顏色,F12看一下:
條狀的進度條很好理解,就是背景是(class="el-progress-bar__outer")的div,背景色是#ebeef5,表面的彩色進度就是(class="el-progress-bar__inner")的div;相應的顏色設置就通過class賦值就行了(ElementUI中直接賦值沒有效果,需要獲得盛放它的外部元素對象,然后利用“>>>” 進行賦值,其他組件也適用,詳情看下面環形進度條代碼例子)
環狀進度條是通過svg畫出來的,其中包含兩個<path>,第一個就是底部的背景圓環圖,第二個是彩色進度條圓環,這里設置顏色就不是background-color屬性了,而是stroke屬性;下面是我的例子
這樣就可以ok了。