JAVA高级面试进阶训练营视频教程

admin

问题描述：使用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、就可以解决掉我们遇到的难题了。