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

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

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

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

elementUI的:NaiveUi的:

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

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

设置NaiveUI:

  <n-progressclass="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替换掉就可以了,思路相同

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/577741.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

<meta name=“Keywords“ content=““ >、<meta name=“Description“ content=““ > 等用法解释

今天在看网站代码&#xff0c;发现类似<meta name"Keywords" content"" >、<meta name"Description" content"" >这样的写法&#xff0c;不知道具体代表什么意思&#xff0c;于是上网搜了一下&#xff0c;下面是在网上找到…

Python电能质量扰动信号分类(三)基于Transformer的一维信号分类模型

目录 引言 1 数据集制作与加载 1.1 导入数据 1.2 制作数据集 2 Transformer分类模型和超参数选取 2.1 定义Transformer分类模型 2.2 定义模型参数 3 Transformer模型训练与评估 3.1 模型训练 3.2 模型评估 代码、数据如下&#xff1a; 往期精彩内容&#xff1a; 电…

[内功修炼]函数栈帧的创建与销毁

文章目录 1:什么是函数栈帧2:理解函数栈帧能解决什么问题呢3:函数栈帧的创建与销毁的解析3.1:什么是栈3.2:认识相关寄存器与汇编指令相关寄存器相关汇编指令 3.3 解析函数栈帧的创建和销毁3.3.1 预备知识3.3.2 详细解析一:调用main函数,为main函数开辟函数栈帧First:push前push…

RK3588平台开发系列讲解(AI 篇)RKNN-Toolkit2 模型的加载转换

文章目录 一、Caffe 模型加载接口二、TensorFlow 模型加载接口三、TensorFlowLite 模型加载接口四、ONNX 模型加载五、DarkNet 模型加载接口六、PyTorch 模型加载接口沉淀、分享、成长,让自己和他人都能有所收获!😄 📢 RKNN-Toolkit2 目前支持 Caffe、TensorFlow、Tensor…

MySQL报错:1054 - Unknown column ‘xx‘ in ‘field list的解决方法

我在操作MySQL遇到1054报错&#xff0c;报错内容&#xff1a;1054 - Unknown column Cindy in field list&#xff0c;下面演示解决方法&#xff0c;非常简单。 根据箭头指示&#xff0c;Cindy对应的应该是VARCHAR文本数字类型&#xff0c;字符串要用引号&#xff0c;所以解决方…

web架构师编辑器内容-HTML2Canvas 截图的原理

HTML2Canvas 截图的原理 目的&#xff1a;一个canvas元素&#xff0c;上面有绘制一系列的HTML节点 局限&#xff1a;canvas中没法添加具体的Html节点&#xff0c;它只是一张画布 通过canvas.getContext(‘2d’)可以拿到canvas提供的2D渲染上下文&#xff0c;然后在里面绘制形…

使用tesla gpu 加速大模型,ffmpeg,unity 和 UE等二三维应用

我们知道tesla gpu 没有显示器接口&#xff0c;那么在windows中怎么使用加速unity ue这种三维编辑器呢&#xff0c;答案就是改变注册表来加速相应的三维渲染程序. 1 tesla gpu p40 p100 加速 在windows中使用regedit 来改变 核显配置&#xff0c; 让p100 p40 等等显卡通过核显…

【动态规划】11简单多状态 dp 问题_按摩师_C++(easy)

题目链接&#xff1a;leetcode按摩师 目录 题目解析&#xff1a; 算法原理 1.状态表示 2.状态转移方程 3.初始化 4.填表顺序 5.返回值 编写代码 题目解析&#xff1a; 题目让我们求按摩师找到最优的预约集合&#xff08;总预约时间最长&#xff09; 由题可得&#xff…

一体机定制_工控触控一体机安卓主板方案

工控一体机是一种集成化的硬件方案&#xff0c;采用了联发科MT8768八核芯片和12nm制程工艺。该芯片拥有2.0GHz的主频和IMG PowerVR GE8320图形处理GPU&#xff0c;具备强大的视频处理能力&#xff0c;并且兼容大部分的视频格式和解码能力。工控一体机搭载了Android 9.0操作系统…

合并的单元格如何填充连续的序号

希望你以后碰到合并的单元格&#xff0c;不在一个个输入序号&#xff0c;用以下操作帮你输入连续的序号。 一、操作过程如下 1.有一个基准的单元格在同一列&#xff0c;而且这个基准单元格必须得是序号为1的单元格的上面的一个单元格&#xff0c;这样的话后面才能自动递增&am…

单聊和群聊

TCP协议单聊 服务端&#xff1a; import java.awt.BorderLayout; import java.io.BufferedReader; import java.io.IOException; import java.io.InputStreamReader; import java.io.PrintWriter; import java.net.ServerSocket; import java.net.Socket; import java.util.Vec…

使用ArcMap进行实测数据处理

文章目录 题目流程 题目 实验名称&#xff1a;实测数据处理 实验目的及要求&#xff1a; 1. 掌握实测点数据转为矢量点数据方法 2. 掌握数据投影变换方法 3. 掌握点数据插值方法 流程 1&#xff0c;打开ArcMap软件&#xff0c;在左菜单栏上选中File&#xff0c;然后鼠标移…

我在代码随想录|写代码|简单题理解KMP算法

本篇提纲 什么是KMPKMP有什么用什么是前缀表为什么一定要用前缀表如何计算前缀表前缀表与next数组使用next数组来匹配时间复杂度分析构造next数组使用next数组来做匹配前缀表统一减一 C代码实现前缀表&#xff08;不减一&#xff09;C实现总结 什么是KMP? 说到KMP&#xf…

HTTP前端请求

目录 HTTP 请求1.请求组成2.请求方式与数据格式get 请求示例post 请求示例json 请求示例multipart 请求示例数据格式小结 3.表单3.1.作用与语法3.2.常见的表单项 4.session 原理5.jwt 原理 HTTP 请求 1.请求组成 请求由三部分组成 请求行请求头请求体 可以用 telnet 程序测…

《我在北京送快递》平凡隽永的时刻,对人生更具意义

《我在北京送快递》平凡隽永的时刻&#xff0c;对人生更具意义 胡安焉 文章目录 《我在北京送快递》平凡隽永的时刻&#xff0c;对人生更具意义[toc]摘录感悟 摘录 转“没有期限的承诺无疑就是委婉的拒绝” 转书友&#xff1a;亨利福特说&#xff0c;我聘的是一双手&#xff0…

Codeforces Round 917 (Div. 2)

Codeforces Round 917 (Div. 2) Codeforces Round 917 (Div. 2) A. Least Product 题意&#xff1a; 给出整数数组a&#xff0c;现在可以执行任意次数以下操作&#xff1a;任意选择数组a的一个元素 a i a_i ai​&#xff0c;若 a i a_i ai​>0可以任意替换为[0, a i a_i…

U盘加密软件哪个好用(三款优秀的U盘加密软件推荐)

随着移动存储设备的普及&#xff0c;U盘已成为我们工作和生活中不可或缺的存储工具。然而&#xff0c;U盘丢失或被盗的风险也随之增加&#xff0c;如何保护U盘中的敏感数据成为了重要的问题。 此时&#xff0c;U盘加密软件成为了解决这一问题的有效手段。 那么&#xff0c;哪个…

nosql--RedisTemplate定制化

nosql--RedisTemplate定制化 1、序列化2、如果使用redis中保存数据会使用默认的序列化机制&#xff0c;导致redis中保存的对象不可视2.1将所有的对象以JSON的形式保存2.2配置reids自定义配置2.3转化成功2.4配置文件代码 3redis客户端 1、序列化 stringRedisTemplate RedisTemp…

Linux操作系统——进程(三) 进程优先级

进程优先级 首先呢&#xff0c;我们知道一个进程呢&#xff08;或者也可以叫做一个任务&#xff09;&#xff0c;它呢有时候要在CPU的运行队列中排队&#xff0c;要么有时候阻塞的时候呢又要在设备的等待队列中排队&#xff0c;其实我们排队的本质就是&#xff1a;确认优先级。…

用水用电用燃气PSD大屏文件,电力行业可视化大数据(供水供电可视化管理后台资料)

通过对水、电、燃气等能源的使用情况进行统计和分析&#xff0c;可以有效地预测能源需求&#xff0c;为企业的能源管理提供决策依据。现分享大屏燃气大数据可视化平台、电力行业可视化大数据展示平台、大工商业用气快速报告、供水供电可视化管理后台等大屏模版的Photoshop源文件…