Vue項目解決element組件環形進度條,超過100%時,不渲染問題。


問題描述:使用element組件的環形進度條時,給出的屬性只有一個參數,

要求只能填寫1-100的數,當我們的數值超過100時,想要把環形渲染滿,但問題出來了,700以上的數值時,圖層就不渲染了,如下圖所示:

 

            

這有可能會不滿足我們的要求,需要渲染滿,和100%的效果一樣該怎么辦呢?

解決問題步驟:

1、我們使用瀏覽器的開發者工具。會發現有一個屬性,那就是 stroke-dashoffset 

當100%時,這個屬性的值為0px

2、那么找到了源頭,就可以找到解決辦法了,思路就是,當我們的數據超過100時,強制stroke-dashoffset 屬性為0.問題就解決了。

3、給我們的組件來一個動態屬性,如圖:

colordi這個屬性,當我們的數據大於100的時候,激活此屬性。

4、此時我們需要用到一個知識點,就是

/deep/ --------------- less深度作用域

我們需要此功能來找到只有F12才能看到的源代碼屬性,以此來改變stroke-dashoffset屬性的值。

5、看一下我寫的方法

/*深層改變環形圖的渲染*/
.colordi /deep/ svg > path:nth-child(2){
stroke-dashoffset: 0px !important;
}

6、就可以解決掉我們遇到的難題了。

   

 

 




 

 

 
        


 


免責聲明!

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



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