### 设置
Element UI `
el-progress` 组件环形进度条渐变
背景色
为了使 `
el-progress` 的环形进度条拥有渐变
背景色，可以通过
自定义 CSS 和 JavaScript 来实现这一功能。具体方法如下：
#### 方法一：利用内联样式与 SASS 预处理器
通过设置 `:color` 属性并结合 SASS 或其他预处理工具来创建不同状态下的颜色变化。
```html
<template>
<div class="
progress-container">
<
el-progress
type="circle"
:width="70"
:stroke
-width="10"
:color="customGradientColor"
:percentage="percentValue"
@click.native="handleClick"></
el-progress>
</div>
</template>
<script>
export default {
data() {
return {
percentValue: 50,
customGradientColor: 'linear
-gradient(90deg, rgba(255,0,0,.8), rgba(0,255,0,.8))'
};
},
methods: {
handleClick(event){
console.log('
Progress clicked');
}
}
};
</script>
<style lang="s
css" scoped>
.
progress-container /deep/ .
el-progress-circle__track{
stroke
-dasharray: none;
}
.
el-progress-circle__path {
transition: all ease
-in
-out 0.3s;
}
/* 使用深度选择器覆盖默认样式 */
/deep/.
el-progress-circle path:nth
-of
-type(odd) { /* 如果需要针对特定实例调整 */ }
/* 对于不同的 div 应用独特的渐变色 */
.
progress-item:nth
-child(1) .
el-progress-circle__path {
stroke: linear
-gradient(to right, red , y
ellow);
}
.
progress-item:nth
-child(2) .
el-progress-circle__path {
stroke: linear
-gradient(to bottom, blue , green);
}
// ...以此类推...
</style>
```
此段代码展示了如何使用 Vue.js 结合 SASS 实现多个环形进度条的不同渐变效果[^2]。注意 `/deep/` 是用于穿透scoped样式的特殊语法，在某些版本可能已被替代为 `::v
-deep` 或者直接移除以支持新的组合式 API 特性。
#### 方法二：直接操作 DOM 修改 SVG 路径填充
如果希望更灵活地控制渐变逻辑，则可以直接访问底层渲染出来的SVG元素，并对其应用
CSS线性或径向渐变规则。
```javascript
mounted(){
this.$nextTick(() => {
const svgPath = document.queryS
elector('.
el-progress-circle__path');
if (svgPath) {
let gradientId = "grad";
var defs = document.create
ElementNS("http://www.w3.org/2000/svg", "defs");
// 创建一个 LinearGradient 定义
var grad = document.create
ElementNS("http://www.w3.org/2000/svg","linearGradient");
grad.setAttribute("id",gradientId);
// 添加两个颜色停止点
var stop1 = document.create
ElementNS("http://www.w3.org/2000/svg","stop");
stop1.setAttribute("offset","0%");
stop1.setAttribute("stop
-color","#ffcc00");
var stop2 = document.create
ElementNS("http://www.w3.org/2000/svg","stop");
stop2.setAttribute("offset","100%");
stop2.setAttribute("stop
-color","#ee6e73");
grad.appendChild(stop1);
grad.appendChild(stop2);
defs.appendChild(grad);
svgPath.parentNode.insertBefore(defs, svgPath.nextSibling);
svgPath.style.stroke = `url(#${gradientId})`;
}
});
},
```
这种方法绕过了框架层面的限制，允许开发者更加精细地定制视觉表现形式[^4]。
本文将深入解析新《安全生产法》的内容，探讨其对企业安全管理的影响，并分享如何运用新法规提升管理水平，确保生产安全。
扫一扫
3289
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
