ElementUI之Progress進度條底色設置


  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了。

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM