- 新建文件 progress-color.vue , 作為公共組件
<template>
<!-- 自定義svg , 在需要更改的地方使用即可 (目前作用于 設(shè)置 elementui 環(huán)形進度條的漸變色) -->
<svg width="100%" height="100%">
<!-- 漸變顏色一 通過id獲取 -->
<defs>
<linearGradient id="blue" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color:rgb(31, 197, 255); stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(35, 231, 169);stop-opacity:1" />
</linearGradient>
</defs>
<!-- 漸變顏色二 通過id獲取 -->
<defs>
<linearGradient id="dismantle" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color: #ef07f7; stop-opacity:1" />
<stop offset="100%" style="stop-color: #945fff;stop-opacity:1" />
</linearGradient>
</defs>
</svg>
</template>
<script>
export default {
name: 'progressColor'
};
</script>
- 在需要使用的文件中, 引入該組件, 并使用
<template>
<div>
<div class="dismantle el-progress">
<el-progress type="circle" :percentage="75" :stroke-width="15"></el-progress>
<progressColor style="width: 0;height: 0;"></progressColor>
</div>
</div>
</template>
<script>
import progressColor from '../components/progress-color.vue';
export default {
components: {
progressColor
}
}
</script>
<style lang="less" scoped>
.dismantle /deep/ .el-progress-circle {
// 進度條顏色
svg > path:nth-child(2) {
stroke: url(#dismantle); // 該url() 中填入的是, 對應(yīng)組件中的 id 名
}
}
</style>
-
修改后的環(huán)形進度條效果如下
image.png
