Element el-progress 进度条详解

点此查看全部文字教程、视频教程、源代码

1. 前言

进度条通常用于展示页面加载进度，或者某项任务的完成进度，说实话，在网站开发领域，用的不算多。

本篇，我们来了解下el-progress进度条的常见用法。

2. 基本用法

如下代码：

	基本用法
    <el-progress :percentage="50"></el-progress>

el-progress表示一个进度条组件，percentage属性指定了进度百分比值，达到100时表示全部完成，所以50就是一半，所以效果如下：

3. 调整颜色

可以通过status属性调整颜色，这个地方有个设计很奇怪，之前的组件都是使用success/warning/info/danger表示颜色类型，但是进度条组件比较特殊，使用的是success/warning/exception作为颜色类型：

	调整颜色
    <el-progress :percentage="50" status="success"></el-progress>
    <el-progress :percentage="50" status="warning"></el-progress>
    <el-progress :percentage="50" status="exception"></el-progress>

效果如下：

4. 自定义文字内容

可以指定进度条右侧文字的内容，通过format属性指定显示文字的方法即可：

 	自定义文字内容
    <el-progress :percentage="50" :format="format"></el-progress>

对应JS代码如下：

  methods: {
    format(percentage) {
      if (percentage < 60) {
        return "不合格"
      } else if (percentage < 90) {
        return "合格"
      } else {
        return "优秀"
      }
    }
  }

所以，当percentage值为50时，会显示不合格：

5. 百分值在内部展示，并调整高度

可以通过text-inside属性，将百分比显示到进度条的内部。由于默认进度条高度比较低，所以可以通过stroke-width属性调整进度条高度：

	百分比内部显示
    <el-progress :percentage="50" :text-inside="true" :stroke-width="30"></el-progress>

效果如下：

6. 环形进度条

可以通过将type属性值设置为circle，从而展示环形进度条：

	环形进度条
    <el-progress :percentage="50" type="circle"></el-progress>

效果如下：

7. 仪表盘进度条

通过将type属性值设置为dashboard，从而展示仪表盘进度条：

	仪表盘进度条
    <el-progress :percentage="50" type="dashboard"></el-progress>

效果：

8. 小结

进度条功能比较简单，本篇的描述主要集中在调整外观方面，可以在实际项目中适当的选择进度条的样式。