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

本文目录

1. 前言2. 基本用法3. 调整颜色4. 自定义文字内容5. 百分值在内部展示，并调整高度6. 环形进度条7. 仪表盘进度条8. 小结

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. 小结

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