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

需求 :进度条要有一个渐变效果。效果图:

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

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

elementUI的:NaiveUi的:

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

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

设置NaiveUI:

javascript 复制代码
  <n-progress
    class="progressClass"
    :type="type"
    :height="h"
    :processing="processing"
    :percentage="dataset"
    :indicator-placement="indicatorPlacement"
    :rail-color="railColor"
    :offset-degree="offsetDegree"
  >
    // 创建一个svg
    <svg>
      <defs>
        <linearGradient id="gradient" x1="1" y1="0.4" x2="0.3" y2="1">
          // 设置过度
          <stop offset="0%" :style="{ 'stop-color': color }" stop-opacity="1"></stop>
          <stop offset="50%" :style="{ 'stop-color': color2 }" stop-opacity="1"></stop>
          <stop offset="100%" :style="{ 'stop-color': color3 }" stop-opacity="1"></stop>
        </linearGradient>
      </defs>
    </svg>
  </n-progress>
// css
<style scoped lang="scss">
// 找到第二个path并将他的stroke替换为我们创建的svg
.progressClass {
  position: relative;
  :deep(svg > g:nth-child(2) path) {
    stroke: url(#gradient) !important;
  }
}
</style>

设置emementUI的:

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

javascript 复制代码
// 找到第二个path并将他的stroke替换为我们创建的svg
.progressClass {
  position: relative;
  :deep(svg > path:nth-child(2)) {
    stroke: url(#gradient) !important;
  }
}
相关推荐
前端大白话2 分钟前
救命!这10个Vue3技巧藏太深了!性能翻倍+摸鱼神器全揭秘
前端·javascript·vue.js
前端大白话6 分钟前
前端人必看!10个JavaScript“救命”技巧,让你告别加班改Bug
前端·javascript·程序员
Rudon滨海渔村12 分钟前
【Tauri】桌面程序exe开发 - Tauri+Vue开发Windows应用 - 比Electron更轻量!8MB!
javascript·electron·tauri·桌面应用
cg501716 分钟前
Vue回调函数中的this
前端·javascript·vue.js
前端太佬18 分钟前
从零到一实现扫码登录:一个前端菜鸟的踩坑实录
前端·javascript·架构
yuanmenglxb200429 分钟前
微信小程序核心技术栈
前端·javascript·vue.js·笔记·微信小程序·小程序
纪元A梦44 分钟前
华为OD机试真题——绘图机器(2025A卷:100分)Java/python/JavaScript/C++/C/GO最佳实现
java·javascript·c++·python·华为od·go·华为od机试题
会飞的鱼先生1 小时前
Vue3的内置组件 -实现过渡动画 TransitionGroup
前端·javascript·vue.js·vue
晓得迷路了1 小时前
10 分钟开发一个 Chrome 插件?Trae 让你轻松实现!
前端·javascript·trae
海底火旺1 小时前
JavaScript中的Object方法完全指南:从基础到高级应用
前端·javascript·面试