Element el-progress 进度条详解

男娘i 2022-09-17 03:03 1082阅读 0赞

***[点此查看全部文字教程、视频教程、源代码  
][Link 1]***

### 本文目录 ###

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

# 1. 前言 #

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

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

# 2. 基本用法 #

如下代码：

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

el-progress表示一个进度条组件，percentage属性指定了进度百分比值，达到100时表示全部完成，所以50就是一半，所以效果如下：  
![在这里插入图片描述][09cfc7a817754ffb8d9b31e297997033.png]

# 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>

效果如下：  
![在这里插入图片描述][b5e8e17dff6b4d9fb5781d764d676220.png]

# 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时，会显示不合格：  
![在这里插入图片描述][0c9c9894411e4db4811cfd6c597c40bc.png]

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

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

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

效果如下：  
![在这里插入图片描述][87a0e27715b34364a958136defac3df1.png]

# 6. 环形进度条 #

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

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

效果如下：  
![在这里插入图片描述][5878b7b2f2994d68afc288aa821e3b20.png]

# 7. 仪表盘进度条 #

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

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

效果：  
![在这里插入图片描述][8fb53616cd0e4e4e8f08306d1ab38fa2.png]

# 8. 小结 #

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

[Link 1]: https://studyingpanda.blog.csdn.net/article/details/105329926
[09cfc7a817754ffb8d9b31e297997033.png]: /images/20220828/a756ba5e01a943ada9c822b5ec30c809.png
[b5e8e17dff6b4d9fb5781d764d676220.png]: /images/20220828/37ee0697990043c78f7a6656964c5a3e.png
[0c9c9894411e4db4811cfd6c597c40bc.png]: /images/20220828/7ef2db1cccff42dfb48c59aea7f21a51.png
[87a0e27715b34364a958136defac3df1.png]: /images/20220828/8e0af78d0cd84f9db0bfdd0ab03e9134.png
[5878b7b2f2994d68afc288aa821e3b20.png]: /images/20220828/f29fd02a610f4273937b4e8a6f890dcd.png
[8fb53616cd0e4e4e8f08306d1ab38fa2.png]: /images/20220828/1b26792960f34d6eb98a3b9fb445eb85.png