vue3+elementPlus：el-progress进度条自定义颜色

本文主要是介绍vue3+elementPlus：el-progress进度条自定义颜色，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

在属性里有:color自定义回调函数 

//html<el-progress:color="colors"type="circle":percentage="datalist.state.secondLevelCount":width="70"><template #default="{ percentage }"><spanclass="percentage-label"style="color: rgba(247, 220, 111, 1)">二级</span><p style="color: rgba(247, 220, 111, 1)">{{ percentage }}台</p></template></el-progress>
//js
//报警状态自定义二级颜色
const colors = reactive([{ color: "rgba(247,220,111,0.6)", percentage: 20 },{ color: "rgba(247,220,111,0.6)", percentage: 40 },{ color: "rgba(247,220,111,0.6)", percentage: 60 },{ color: "rgba(247,220,111,0.6)", percentage: 80 },{ color: "rgba(247,220,111,0.6)", percentage: 100 },
]);

这篇关于vue3+elementPlus：el-progress进度条自定义颜色的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---