Element Plus 实例详解（六）___Progress 进度条

本文目录：

一、前言

二、搭建Element Plus试用环境

 1、搭建Vue3项目（基于Vite + Vue）

 2、安装Element Plus

三、Element Plus Progress 进度条功能试用

1、直线进度条

2、进度条内显示百分比标识

3、环形进度条

4、仪表盘形进度条

5、自定义内容

6、自定义进度条的颜色

7、动画进度条

四、官方资料中的各参数说明

五、总结

一、前言

　　Element Plus Progress 进度条，用于展示操作进度，告知用户当前状态和预期。

二、搭建Element Plus试用环境

 1、搭建Vue3项目（基于Vite + Vue）

　　安装时请选择支持Typescript，本实例我安装在（C:\00program\vue\vuelearn\vueviteproject1）目录中，具体方法详见下面文章：

vue3 项目搭建教程（基于create-vue，vite，Vite + Vue）https://blog.csdn.net/weixin_69553582/article/details/129630880

 　　安装完成后打开浏览器：http://localhost:5173/  ,能正常显示欢迎页面：

 2、安装Element Plus

  • NPM：npm install element-plus --save

详细参考：

Element Plus 实例详解系列（一）__安装设置icon-default.png?t=N7T8https://blog.csdn.net/weixin_69553582/article/details/129701286

三、Element Plus Progress 进度条功能试用

1、直线进度条

  • Progress 组件设置 percentage 属性即可，表示进度条对应的百分比。
  • 该属性必填，并且必须在 0-100 的范围内。
  • 可以通过设置 format 来自定义文字显示的格式。

实现效果：

完整代码：

<template>
    <div class="demo-progress">
        <h3>Progress 进度条</h3>
        <el-progress :percentage="50" :stroke-width="10"/>
        <el-progress :percentage="100" :stroke-width="10" :format="format" />
        <el-progress :percentage="100" :stroke-width="10" status="success" />
        <el-progress :percentage="100" :stroke-width="10" status="warning" />
        <el-progress :percentage="50" :stroke-width="10" status="exception" />
    </div>
</template>

<script lang="ts" setup>
    const format = (percentage) => (percentage === 100 ? 'Full' : `${percentage}%`)
</script>

<style scoped>
    .demo-progress .el-progress--line {
        margin-bottom: 35px;
        width: 350px;
    }
</style>

2、进度条内显示百分比标识

  • 百分比不占用额外控件，适用于文件上传等场景。
  • Progress 组件可通过 stroke-width 属性更改进度条的高度，
  • 可通过 text-inside 属性来改变进度条内部的文字。

实现效果：

 完整代码：

<template>
    <div class="demo-progress">
        <h3>进度条内显示百分比标识</h3>
        <el-progress :text-inside="true" :stroke-width="28" :percentage="70" />
        <el-progress :text-inside="true"
                     :stroke-width="28"
                     :percentage="100"
                     status="success" />
        <el-progress :text-inside="true"
                     :stroke-width="28"
                     :percentage="80"
                     status="warning" />
        <el-progress :text-inside="true"
                     :stroke-width="28"
                     :percentage="50"
                     status="exception"/>
    </div>
</template>

<style scoped>
    .demo-progress .el-progress--line {
        margin-bottom: 15px;
        width: 350px;
        padding:10px;
    }
</style>

3、环形进度条

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

实现效果：

完整代码：

<template>
    <div class="demo-progress">
        <h3>环形进度条</h3>
        <el-progress type="circle" :percentage="0" :stroke-width="10" />
        <el-progress type="circle" :percentage="35" :stroke-width="10" />
        <el-progress type="circle" :percentage="100" :stroke-width="10" status="success" />
        <el-progress type="circle" :percentage="70" :stroke-width="10" status="warning" />
        <el-progress type="circle" :percentage="50" :stroke-width="10" status="exception" />
    </div>
</template>
<style scoped>
    .demo-progress .el-progress--line {
        margin-bottom: 15px;
        width: 450px;
    }

    .demo-progress .el-progress--circle {
        margin-right: 15px;
    }
</style>

4、仪表盘形进度条

  • 可以指定 type 属性到 dashboard 使用控制面板进度栏。

实现效果：

完整代码：

<template>
    <div class="demo-progress">
        <h3>仪表盘形进度条</h3>
        <el-progress type="dashboard" :percentage="percentage" :color="colors" :stroke-width="10"/>
        <el-progress type="dashboard" :percentage="percentage2" :color="colors" :stroke-width="10"/>
        <div>
            <el-button-group>
                <el-button :icon="Minus" @click="decrease" />
                <el-button :icon="Plus" @click="increase" />
            </el-button-group>
        </div>
    </div>
</template>

<script lang="ts" setup>
    import { onMounted, ref } from 'vue'
    import { Minus, Plus } from '@element-plus/icons-vue'

    const percentage = ref(10)
    const percentage2 = ref(0)

    const colors = [
        { color: '#f56c6c', percentage: 20 },
        { color: '#e6a23c', percentage: 40 },
        { color: '#5cb87a', percentage: 60 },
        { color: '#1989fa', percentage: 80 },
        { color: '#6f7ad3', percentage: 100 },
    ]

    const increase = () => {
        percentage.value += 10
        if (percentage.value > 100) {
            percentage.value = 100
        }
    }
    const decrease = () => {
        percentage.value -= 10
        if (percentage.value < 0) {
            percentage.value = 0
        }
    }
    onMounted(() => {
        setInterval(() => {
            percentage2.value = (percentage2.value % 100) + 10
        }, 400)
    })
</script>
<style scoped>
    .demo-progress .el-progress--line {
        margin-bottom: 15px;
        width: 300px;
        padding:10px;
    }

    .demo-progress .el-progress--circle {
        margin-right: 15px;
    }
</style>

5、自定义内容

  • 通过默认插槽添加自定义内容。

实现效果：

完整代码：

<template>
    <div class="demo-progress">
        <h3>自定义内容</h3>
        <el-progress :percentage="80" :stroke-width="10">
            <el-button text>Content</el-button>
        </el-progress>
        <el-progress :text-inside="true"
                     :stroke-width="30"
                     :percentage="50"
                     status="exception">
            <span>Content</span>
        </el-progress>
        <el-progress type="circle" :percentage="100" status="success" :stroke-width="10">
            <el-button type="success" :icon="Check" circle />
        </el-progress>
        <span>通过默认插槽</span>
        <el-progress type="dashboard" :percentage="70" :stroke-width="10">
            <template #default="{ percentage }">
                <span class="percentage-value">{{ percentage }}%</span>
                <span class="percentage-label">Progressing</span>
            </template>
        </el-progress>
    </div>
</template>

<script lang="ts" setup>
    import { Check } from '@element-plus/icons-vue'
</script>

<style scoped>
    .percentage-value {
        display: block;
        margin-top: 10px;
        font-size: 28px;
    }

    .percentage-label {
        display: block;
        margin-top: 10px;
        font-size: 12px;
    }

    .demo-progress .el-progress--line {
        margin-bottom: 15px;
        width: 450px;
        padding: 10px;
    }

    .demo-progress .el-progress--circle {
        margin-right: 15px;
    }
</style>

6、自定义进度条的颜色

  • 可以通过 color 属性来设置进度条的颜色。
  • 该属性可以接受十六进制颜色值，函数和数组。

实现效果：

完整代码：

<template>
    <div class="demo-progress" >
        <h3>自定义进度条的颜色</h3>
        <el-progress :percentage="percentage" :stroke-width="20" :color="customColor" />

        <el-progress :percentage="percentage" :stroke-width="20" :color="customColorMethod" />

        <el-progress :percentage="percentage" :stroke-width="20" :color="customColors" />
        <el-progress :percentage="percentage" :stroke-width="20" :color="customColors" />
        <div>
            <el-button-group>
                <el-button :icon="Minus" @click="decrease" />
                <el-button :icon="Plus" @click="increase" />
            </el-button-group>
        </div>
    </div>
</template>

<script lang="ts" setup>
    import { ref } from 'vue'
    import { Minus, Plus } from '@element-plus/icons-vue'

    const percentage = ref(45)
    const customColor = ref('#409eff')

    const customColors = [
        { color: '#b6ff00', percentage: 20 },
        { color: '#e6a23c', percentage: 40 },
        { color: '#5cb87a', percentage: 60 },
        { color: '#1989fa', percentage: 80 },
        { color: '#6f7ad3', percentage: 100 },
    ]

    const customColorMethod = (percentage: number) => {
        if (percentage < 30) {
            return '#909399'
        }
        if (percentage < 70) {
            return '#e6a23c'
        }
        return '#67c23a'
    }
    const increase = () => {
        percentage.value += 10
        if (percentage.value > 100) {
            percentage.value = 100
        }
    }
    const decrease = () => {
        percentage.value -= 10
        if (percentage.value < 0) {
            percentage.value = 0
        }
    }
</script>
<style scoped>
    .demo-progress .el-progress--line {
        margin-bottom: 15px;
        width: 350px;
        padding: 10px;
        
    }
</style>

7、动画进度条

  • 使用 intermediate 属性来设置不确定的进度，
  • duration 来控制动画持续时间。

实现效果：

 完整代码：

<template>
    <div class="demo-progress">
        <h3>动画进度条</h3>
        <el-progress :percentage="50" :indeterminate="true" :stroke-width="20"/>
        <el-progress :percentage="100" :format="format" :indeterminate="true" :stroke-width="20"/>
        <el-progress :percentage="100"
                     status="success"
                     :indeterminate="true"
                     :duration="5" :stroke-width="20"/>
        <el-progress :percentage="100"
                     status="warning"
                     :indeterminate="true"
                     :duration="1" :stroke-width="20"/>
        <el-progress :percentage="50" status="exception" :indeterminate="true" :stroke-width="20"/>
    </div>
</template>

<script lang="ts" setup>
    const format = (percentage) => (percentage === 100 ? 'Full' : `${percentage}%`)
</script>
<style scoped>
    .demo-progress .el-progress--line {
        margin-bottom: 15px;
        width: 350px;
    }
</style>

四、官方资料中的各参数说明

Attributes属性

属性名说明类型可选值默认值
percentage百分比，必填number(0-100)0
type进度条类型stringline/
circle/
dashboard		line
stroke-width进度条的宽度number—6
text-inside进度条显示文字内置在进度条内（仅 type 为 'line' 时可用）boolean—false
status进度条当前状态stringsuccess/
exception/
warning		—
indeterminate是否为动画进度条boolean-false
duration控制动画进度条速度number-3
color进度条背景色 进度条背景色 （会覆盖 status 状态颜色）string/
function/
array		—''
width环形进度条画布宽度（只在 type 为 circle 或 dashboard 时可用）number—126
show-text是否显示进度条文字内容boolean—true
stroke-linecapcircle/dashboard 类型路径两端的形状stringbutt/
round/
square		round
format指定进度条文字内容function(percentage)——

Slots

名称说明
default自定义内容，参数为 { percentage }

五、总结

1

Element Plus 实例详解（一）__安装设置
2Element Plus 实例详解（二）___Button 按钮
3Element Plus 实例详解（三）___Date Picker 日期选择
4Element Plus 实例详解（四）___Border 边框
5Element Plus 实例详解（五）___Scrollbar 滚动条
6Element Plus 实例详解（六）___Progress 进度条
7Element Plus 实例详解（七）___
8Element Plus 实例详解（八）___
9Element Plus 实例详解（九）___
10Element Plus 实例详解（十）___
11Element Plus 实例详解（十一）___
12Element Plus 实例详解（十一）___

         推荐阅读：

31

Element Plus 实例详解（一）___安装设置

30

​​​

Vue3安装配置、开发环境搭建(组件安装卸载)（图文详细）
29​​​​​​

SVG实例详解系列（一）(svg概述、位图和矢量图区别（图解）、SVG应用实例）

28​​​​​​

查看jdk安装路径，在windows上实现多个java jdk的共存解决办法，安装java19后终端乱码的解决

27bba02a1c4617422c9fbccbf5325850d9.png​​​​​​

别具一格，原创唯美浪漫情人节表白专辑，(复制就可用)（html5,css3,svg)表白爱心代码(1)

26fea225cb9ec14b60b2d1b797dd8278a2.png​​​​​​

2023年春节祝福第二弹——送你一只守护兔，让它温暖每一个你【html5 css3】画会动的小兔子，炫酷充电，字体特

251f53fb9c6e8b4482813326affe6a82ff.png​​​​​​

2023春节祝福系列第一弹（上）（放飞祈福孔明灯，祝福大家身体健康）（附完整源代码及资源免费下载）

246176c4061c72430eb100750af6fc4d0e.png​​​​​​

HTML+CSS+svg绘制精美彩色闪灯圣诞树，HTML+CSS+Js实时新年时间倒数倒计时(附源代码)

2317b403c4307c4141b8544d02f95ea06c.png​​​​​​

​草莓熊python绘图（春节版，圣诞倒数雪花版）附源代码

225d409c8f397a45c986ca2af7b7e725c9.png​​​​​​

【程序人生】卡塔尔世界杯元素python海龟绘图（附源代码），世界杯主题前端特效5个（附源码）

210a4256d5e96d4624bdca36433237080b.png​​​​​​

python爱心源代码集锦（18款）

204d9032c9cdf54f5f9193e45e4532898c.png​​​​​​

巴斯光年python turtle绘图__附源代码

19074cd3c255224c5aa21ff18fdc25053c.png​​​​​​

Three.js实例详解___旋转的精灵女孩(附完整代码和资源)（一）

18daecd7067e7c45abb875fc7a1a469f23.png​​​​​​

​草莓熊python turtle绘图代码（玫瑰花版）附源代码

17fe88b78e78694570bf2d850ce83b1f69.png​​​​​​

立体多层玫瑰绘图源码__玫瑰花python 绘图源码集锦

16c5feeb25880d49c085b808bf4e041c86.png​​​​​​

皮卡丘python turtle海龟绘图（电力球版）附源代码

1538266b5036414624875447abd5311e4d.png​​​​​​

【CSDN云IDE】个人使用体验和建议（含超详细操作教程）（python、webGL方向)

1403ed644f9b1d411ba41c59e0a5bdcc61.png​​​​​​

草莓熊python turtle绘图（风车版）附源代码

1309e08f86f127431cbfdfe395aa2f8bc9.png​​​​​​

用代码过中秋，python海龟月饼你要不要尝一口？

1240e8b4631e2b486bab2a4ebb5bc9f410.png​​​​​​

《 Python List 列表全实例详解系列（一）》__系列总目录、列表概念

11938bc5a8bb454a41bfe0d4185da845dc.jpeg​​​​​​

用代码写出浪漫__合集（python、matplotlib、Matlab、java绘制爱心、玫瑰花、前端特效玫瑰、爱心）

100f09e73712d149ff90f0048a096596c6.png​​​​​​

Python函数方法实例详解全集(更新中...)

993d65dbd09604c4a8ed2c01df0eebc38.png​​​​​​

matplotlib 自带绘图样式效果展示速查（28种，全）

8aa17177aec9b4e5eb19b5d9675302de8.png​​​​​​

手机屏幕坏了____怎么把里面的资料导出（18种方法）

71750390dd9da4b39938a23ab447c6fb6.jpeg​​​​​​

2023年3月TIOBE 指数头条：编程语言 Go 进入 TIOBE 指数前 10 名，多家权威机构____编程语言排行榜__薪酬状

6dc8796ddccbf4aec98ac5d3e09001348.jpeg​​​​​​

Python中Print()函数的用法___实例详解(全，例多）

51ab685d264ed4ae5b510dc7fbd0d1e55.jpeg​​​​​​

色彩颜色对照表（一）(16进制、RGB、CMYK、HSV、中英文名)

480007dbf51944725bf9cf4cfc75c5a13.png​​​​​​

Node.js (v19.1.0npm 8.19.3) vue.js安装配置教程（超详细）

3c6374d75c29942f2aa577ce9c5c2e12b.png​​​​​​

Tomcat 启动闪退问题解决集（八大类详细）

25218ac5338014f389c21bdf1bfa1c599.png​​​​​​

Tomcat端口配置（详细）

1fffa2098008b4dc68c00a172f67c538d.png​​​​​​

tomcat11、tomcat10 安装配置（Windows环境）（详细图文）

# vue.js # javascript # 前端
Logo
腾讯云开发者社区

腾讯云面向开发者汇聚海量精品云计算使用和开发经验，营造开放的云计算技术生态圈。

更多推荐

cover

动物识别系统 python实现+UI

avatar 腾讯云开发者社区

Linux下安装MySQL8.0(超详细)

Linux下安装MySQL8.0(超详细)

avatar 腾讯云开发者社区
cover

光模块问题查看并保证光模块收发功率

avatar 腾讯云开发者社区