Progress 进度条

用于展示操作进度,告知用户当前状态和预期。

线形进度条

Progress 进度条 - 图1

Progress 组件设置percentage属性即可,表示进度条对应的百分比,必填,必须在 0-100。通过 format 属性来指定进度条文字内容。

  1. <el-progress :percentage="50"></el-progress>
  2. <el-progress :percentage="100" :format="format"></el-progress>
  3. <el-progress :percentage="100" status="success"></el-progress>
  4. <el-progress :percentage="100" status="warning"></el-progress>
  5. <el-progress :percentage="50" status="exception"></el-progress>
  6. <script>
  7. export default {
  8. methods: {
  9. format(percentage) {
  10. return percentage === 100 ? '满' : `${percentage}%`;
  11. }
  12. }
  13. };
  14. </script>

百分比内显

百分比不占用额外控件,适用于文件上传等场景。

Progress 进度条 - 图2

Progress 组件可通过 stroke-width 属性更改进度条的高度,并可通过 text-inside 属性来将进度条描述置于进度条内部。

  1. <el-progress :text-inside="true" :stroke-width="26" :percentage="70"></el-progress>
  2. <el-progress :text-inside="true" :stroke-width="24" :percentage="100" status="success"></el-progress>
  3. <el-progress :text-inside="true" :stroke-width="22" :percentage="80" status="warning"></el-progress>
  4. <el-progress :text-inside="true" :stroke-width="20" :percentage="50" status="exception"></el-progress>

自定义颜色

可以通过 color 设置进度条的颜色,color 可以接受颜色字符串,函数和数组。

Progress 进度条 - 图3

  1. <el-progress :percentage="percentage" :color="customColor"></el-progress>
  2. <el-progress :percentage="percentage" :color="customColorMethod"></el-progress>
  3. <el-progress :percentage="percentage" :color="customColors"></el-progress>
  4. <div>
  5. <el-button-group>
  6. <el-button icon="el-icon-minus" @click="decrease"></el-button>
  7. <el-button icon="el-icon-plus" @click="increase"></el-button>
  8. </el-button-group>
  9. </div>
  10. <script>
  11. export default {
  12. data() {
  13. return {
  14. percentage: 20,
  15. customColor: '#409eff',
  16. customColors: [
  17. {color: '#f56c6c', percentage: 20},
  18. {color: '#e6a23c', percentage: 40},
  19. {color: '#5cb87a', percentage: 60},
  20. {color: '#1989fa', percentage: 80},
  21. {color: '#6f7ad3', percentage: 100}
  22. ]
  23. };
  24. },
  25. methods: {
  26. customColorMethod(percentage) {
  27. if (percentage < 30) {
  28. return '#909399';
  29. } else if (percentage < 70) {
  30. return '#e6a23c';
  31. } else {
  32. return '#67c23a';
  33. }
  34. },
  35. increase() {
  36. this.percentage += 10;
  37. if (this.percentage > 100) {
  38. this.percentage = 100;
  39. }
  40. },
  41. decrease() {
  42. this.percentage -= 10;
  43. if (this.percentage < 0) {
  44. this.percentage = 0;
  45. }
  46. }
  47. }
  48. }
  49. </script>

环形进度条

Progress 组件可通过 type 属性来指定使用环形进度条,在环形进度条中,还可以通过 width 属性来设置其大小。

Progress 进度条 - 图4

  1. <el-progress type="circle" :percentage="0"></el-progress>
  2. <el-progress type="circle" :percentage="25"></el-progress>
  3. <el-progress type="circle" :percentage="100" status="success"></el-progress>
  4. <el-progress type="circle" :percentage="70" status="warning"></el-progress>
  5. <el-progress type="circle" :percentage="50" status="exception"></el-progress>

仪表盘形进度条

Progress 进度条 - 图5

通过 type 属性来指定使用仪表盘形进度条。

  1. <el-progress type="dashboard" :percentage="percentage" :color="colors"></el-progress>
  2. <div>
  3. <el-button-group>
  4. <el-button icon="el-icon-minus" @click="decrease"></el-button>
  5. <el-button icon="el-icon-plus" @click="increase"></el-button>
  6. </el-button-group>
  7. </div>
  8. <script>
  9. export default {
  10. data() {
  11. return {
  12. percentage: 10,
  13. colors: [
  14. {color: '#f56c6c', percentage: 20},
  15. {color: '#e6a23c', percentage: 40},
  16. {color: '#5cb87a', percentage: 60},
  17. {color: '#1989fa', percentage: 80},
  18. {color: '#6f7ad3', percentage: 100}
  19. ]
  20. };
  21. },
  22. methods: {
  23. increase() {
  24. this.percentage += 10;
  25. if (this.percentage > 100) {
  26. this.percentage = 100;
  27. }
  28. },
  29. decrease() {
  30. this.percentage -= 10;
  31. if (this.percentage < 0) {
  32. this.percentage = 0;
  33. }
  34. }
  35. }
  36. }
  37. </script>

Attributes

参数说明类型可选值默认值
percentage百分比(必填)number0-1000
type进度条类型stringline/circle/dashboardline
stroke-width进度条的宽度,单位 pxnumber6
text-inside进度条显示文字内置在进度条内(只在 type=line 时可用)booleanfalse
status进度条当前状态stringsuccess/exception/warning
color进度条背景色(会覆盖 status 状态颜色)string/function/array''
width环形进度条画布宽度(只在 type 为 circle 或 dashboard 时可用)number126
show-text是否显示进度条文字内容booleantrue