将elementUI,NaiveUI的progress环形进度条设置为渐变色

需求 :将elementUI,NaiveUI的progress环形进度条设置为渐变色_第1张图片进度条要有一个渐变效果。效果图:将elementUI,NaiveUI的progress环形进度条设置为渐变色_第2张图片

NaiveUI和elementUI的官方progress组件都是只能设置一种颜色,不符合需求所以改一下。

其实NaiveUI和elementUI设置进度条的实现方式基本一样都是使用svg渲染出两个path,第一个是底色,第二个是进度条。

elementUI的:将elementUI,NaiveUI的progress环形进度条设置为渐变色_第3张图片NaiveUi的:将elementUI,NaiveUI的progress环形进度条设置为渐变色_第4张图片

可以看到唯一的区别就是 NaiveUi的path外层多包裹了一个g标签。

实现思路就是我们自己创建一个可以有过度色的svg来替换掉第二个path。

设置NaiveUI:

  
    // 创建一个svg
    
      
        
          // 设置过度
          
          
          
        
      
    
  
// css

设置emementUI的:

elementUI只需要直接找到第二个path替换掉就可以了,思路相同

// 找到第二个path并将他的stroke替换为我们创建的svg
.progressClass {
  position: relative;
  :deep(svg > path:nth-child(2)) {
    stroke: url(#gradient) !important;
  }
}

你可能感兴趣的:(elementui,javascript,大屏端)