线性渐变喝环形渐变
线性渐变:直接修改样式根据所需颜色修改即可
::v-deep .el-progress {
.el-progress-bar {
.el-progress-bar__outer {
background: linear-gradient(to right#8075fd, #b87bfe)
}
.el-progress-bar__inner {
background: linear-gradient(to right, #8075fd, #f9fdf8)
}
}
}
环形渐变:首先新建个组件progressColor.vue代码如下:
<template>
<!-- 自定义svg , 在需要更改的地方使用即可 (目前作用于 设置 elementui 环形进度条的渐变色) -->
<svg width="100%" height="100%">
<!-- 渐变颜色一 通过id获取 -->
<defs>
<linearGradient id="blue" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color:#12ACD0; stop-opacity:1" />
<stop offset="100%" style="stop-color:#52E2E1;stop-opacity:1" />
</linearGradient>
</defs>
<!-- 渐变颜色二 通过id获取 -->
<defs>
<linearGradient id="dismantle" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color: #0878EE; stop-opacity:1" />
<stop offset="100%" style="stop-color: #26C1FB;stop-opacity:1" />
</linearGradient>
</defs>
</svg>
</template>
<script>
export default {
name: 'progressColor'
};
</script>
在需要的地方引入组件,一般是el-progress的下方
<el-progress type="circle" :percentage="85.7"></el-progress>
<progress-color></progress-color>
然后再css里写样式选择需要的渐变色,到这里就完成了
::v-deep {
.el-progress-circle {
// 进度条颜色
svg>path:nth-child(2) {
stroke: url(#dismantle); // 该url() 中填入的是, 对应组件中的 id 名
}
}
}