問題描述:使用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、就可以解決掉我們遇到的難題了。