将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;
  }
}
相关推荐
闲蛋小超人笑嘻嘻8 分钟前
find数组方法详解||Vue3 + uni-app + Wot Design(wd-picker)使用自定义插槽内容写一个下拉选择器
前端·javascript·uni-app
小牛itbull27 分钟前
初始化electron项目运行后报错 electron uninstall 解决方法
前端·javascript·electron
rggrgerj2 小时前
Vue3 组件完全指南代码
前端·javascript·vue.js
在逃的吗喽3 小时前
Vue3新变化
前端·javascript·vue.js
Demoncode_y4 小时前
Vue3中基于路由的动态递归菜单组件实现
前端·javascript·vue.js·学习·递归·菜单组件
Never_Satisfied4 小时前
在JavaScript / HTML中,浏览器提示 “Refused to execute inline event handler” 错误
开发语言·javascript·html
Never_Satisfied4 小时前
在JavaScript / HTML中,事件监听的捕获和冒泡阶段解析
开发语言·javascript·html
岁月宁静5 小时前
🎨 打造 AI 应用的 “门面”:Vue3.5 + MarkdownIt 实现高颜值、高性能的答案美化组件
前端·javascript·vue.js
liaojuajun7 小时前
可视化地图
开发语言·javascript·ecmascript
小高0077 小时前
前端如何优雅地生成唯一标识?——一份跨环境 UUID 工具函数的封装与实战
前端·javascript·vue.js