详细分析 el-progress的基本知识以及用法（附Demo）

前言

由于实战项目中有所引用，对此记录基本的知识点，并且以Demo的形式呈现

1. 基本知识

el-progress 是 Element Plus UI 库中的一个进度条组件，用于显示任务的完成情况
可以帮助用户了解某个操作或任务的进展情况

以下是关于 el-progress 的详细补充，包括其常用属性和一个简单的示例
常用的属性如下：

percentage：进度条的完成百分比（0 到 100）
type：进度条的类型。支持 line（线性）和 circle（圆形）两种类型
stroke-width：线性进度条的宽度，仅在 type 为 line 时有效
color：进度条的颜色，支持字符串（颜色值）和函数（动态计算颜色）
text-inside：是否将文本显示在进度条内部（仅在 type 为 line 时有效）
show-text：是否显示文本，默认显示

2. Demo

通过如下Demo进行理解

在第一个示例中，<el-progress :percentage="50" /> 渲染一个线性进度条，进度为 50%
在第二个示例中，<el-progress type="circle" :percentage="75" /> 渲染了一个圆形进度条，进度为 75%
在第三个示例中，colorFunc 是一个计算属性，用于根据当前进度动态改变进度条的颜色

<template><div><!-- 线性进度条示例 --><el-progress :percentage="50" /><!-- 圆形进度条示例 --><el-progresstype="circle":percentage="75"stroke-width="10"color="#409EFF"/><!-- 动态颜色进度条示例 --><el-progress:percentage="currentProgress":color="colorFunc":stroke-width="15":text-inside="true"/></div>
</template><script>
export default {data() {return {currentProgress: 30};},computed: {colorFunc() {if (this.currentProgress < 30) return 'red';if (this.currentProgress < 70) return 'yellow';return 'green';}},methods: {// 示例方法：更新进度updateProgress() {this.currentProgress += 10;}}
};
</script><style>
/* 样式调整（可选） */
</style>

类似的还有如下：

圆形进度条，显示文本

<template><div><el-progresstype="circle":percentage="85"stroke-width="10":show-text="true"/></div>
</template><script>
export default {data() {return {// 进度百分比percentage: 85};}
};
</script>

多个进度条显示

<template><div><el-progress :percentage="20" /><el-progress :percentage="50" color="#409EFF" /><el-progress type="circle" :percentage="75" stroke-width="12" /><el-progress type="circle" :percentage="90" stroke-width="20" color="#67C23A" /></div>
</template><script>
export default {data() {return {percentages: [20, 50, 75, 90]};}
};
</script>

异步更新进度条

<template><div><el-progress :percentage="progress" /><button @click="simulateProgress">开始模拟进度</button></div>
</template><script>
export default {data() {return {progress: 0};},methods: {simulateProgress() {let interval = setInterval(() => {if (this.progress < 100) {this.progress += 10;} else {clearInterval(interval);}}, 500);}}
};
</script>