详细分析 el-progress的基本知识以及用法(附Demo)

目录

  • 前言
  • 1. 基本知识
  • 2. Demo
  • 3. 实战

前言

由于实战项目中有所引用,对此记录基本的知识点,并且以Demo的形式呈现

1. 基本知识

el-progress 是 Element Plus UI 库中的一个进度条组件,用于显示任务的完成情况
可以帮助用户了解某个操作或任务的进展情况

以下是关于 el-progress 的详细补充,包括其常用属性和一个简单的示例
常用的属性如下:

percentage:进度条的完成百分比(0 到 100)
type:进度条的类型。支持 line(线性)和 circle(圆形)两种类型
stroke-width: 线性进度条的宽度,仅在 type 为 line 时有效
color:进度条的颜色,支持字符串(颜色值)和函数(动态计算颜色)
text-inside:是否将文本显示在进度条内部(仅在 type 为 line 时有效)
show-text:是否显示文本,默认显示

2. Demo

通过如下Demo进行理解

在第一个示例中,<el-progress :percentage="50" /> 渲染一个线性进度条,进度为 50%
在第二个示例中,<el-progress type="circle" :percentage="75" /> 渲染了一个圆形进度条,进度为 75%
在第三个示例中,colorFunc 是一个计算属性,用于根据当前进度动态改变进度条的颜色

<template><div><!-- 线性进度条示例 --><el-progress :percentage="50" /><!-- 圆形进度条示例 --><el-progresstype="circle":percentage="75"stroke-width="10"color="#409EFF"/><!-- 动态颜色进度条示例 --><el-progress:percentage="currentProgress":color="colorFunc":stroke-width="15":text-inside="true"/></div>
</template><script>
export default {data() {return {currentProgress: 30};},computed: {colorFunc() {if (this.currentProgress < 30) return 'red';if (this.currentProgress < 70) return 'yellow';return 'green';}},methods: {// 示例方法:更新进度updateProgress() {this.currentProgress += 10;}}
};
</script><style>
/* 样式调整(可选) */
</style>

类似的还有如下:

  1. 圆形进度条,显示文本
<template><div><el-progresstype="circle":percentage="85"stroke-width="10":show-text="true"/></div>
</template><script>
export default {data() {return {// 进度百分比percentage: 85};}
};
</script>
  1. 多个进度条显示
<template><div><el-progress :percentage="20" /><el-progress :percentage="50" color="#409EFF" /><el-progress type="circle" :percentage="75" stroke-width="12" /><el-progress type="circle" :percentage="90" stroke-width="20" color="#67C23A" /></div>
</template><script>
export default {data() {return {percentages: [20, 50, 75, 90]};}
};
</script>
  1. 异步更新进度条
<template><div><el-progress :percentage="progress" /><button @click="simulateProgress">开始模拟进度</button></div>
</template><script>
export default {data() {return {progress: 0};},methods: {simulateProgress() {let interval = setInterval(() => {if (this.progress < 100) {this.progress += 10;} else {clearInterval(interval);}}, 500);}}
};
</script>

3. 实战

实战中的运用如下:

在这里插入图片描述

最终截图如下:

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/52290.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

移动云电脑手机端3.0全新升级,畅享个人便捷管理,筑牢安全管控防线

在当今数字化飞速发展的时代&#xff0c;企业对于高效、便捷且安全的办公模式需求日益迫切。移动云电脑手机端3.0全新升级&#xff0c;迎来科技领域的又一突破。其基于企业管理平台为企业客户提供管理能力&#xff0c;实现对用户、终端、资源的全方位集中管控&#xff0c;助力提…

探索GitLab:从搭建到高效使用的实用指南

企业里为什么喜欢使用GitLab 一、GitLab简介二、搭建GitLab三、GitLab的权限管理3.1、用户注册3.2、创建用户组3.3、为用户组添加用户3.4、为工程添加访问权限 四、GitLab的code review五、团队知识管理六、总结 一、GitLab简介 GitLab是利用 Ruby on Rails 一个开源的版本管理…

Go开发桌面客户端软件小试:网站Sitemap生成

在前一篇【手把手教你用Go开发客户端软件&#xff08;使用Go HTML&#xff09;】中&#xff0c;我们详细介绍了如何通过Go语言开发一个简单的桌面客户端软件。本次&#xff0c;我们将继续这个系列&#xff0c;使用Go语言结合Sciter的Go绑定库——go-sciter&#xff0c;实战开发…

Linux虚拟机磁盘管理-新分区磁盘挂载

挂载mount 注意&#xff1a;挂载前一定要对磁盘进行文件系统创建&#xff0c;否则无法挂载磁盘 比如mkfs.ext4系统文件 磁盘挂载前和挂载后&#xff1a; linux系统重启后磁盘挂载没有了怎么办(不建议&#xff0c;哪怕输错一个字系统起不来&#xff0c;自己操作的时候出现过起不…

大语言模型-PDF文档解析

PDF解析能够提升大语言模型系统的信息处理能力和应用范围&#xff0c;为用户提供更加便捷、高效、个性化的服务体验。本文介绍三种常用的pdf解析方式&#xff1a;Open Parse、pdfplumber、PyMuPD。 一、Open Parse Open Parse是一个能够直观地识别文档布局并有效地对其进行分…

Qt 系统相关 - 网络与音视频

目录 一、Qt 网络 1. UDP Socket 1.1 核心 API 概览 1.2 回显服务器 1.3 回显客户端 2. TCP Socket 2.1 核心 API 概览 2.2 回显服务器 2.3 回显客户端 3. HTTP Client 3.1 核心 API 3.2 代码示例 二、Qt 音视频 1. Qt 音频 1.1 核心API概览 1.2 示例 2. Qt 视…

加速网络体验,Squid缓存代理:让浏览如飞,畅享无限网络速度!

作者简介&#xff1a;我是团团儿&#xff0c;是一名专注于云计算领域的专业创作者&#xff0c;感谢大家的关注 座右铭&#xff1a; 云端筑梦&#xff0c;数据为翼&#xff0c;探索无限可能&#xff0c;引领云计算新纪元 个人主页&#xff1a;团儿.-CSDN博客 目录 前言: squ…

订单到期关闭如何实现?

目录 一、被动关闭 二、定时任务 三、JDK自带的DelayQueue 四、Netty的时间轮 五、Kafka的时间轮 六、RocketMQ延迟消息 七、RabbitMQ死信队列 八、RabbitMQ插件 九、Redis过期监听 十、Redis的Zset 十一、Redisson 在电商、支付等系统中&#xff0c;一般都是先创建…

详解华为项目管理,附华为高级项目管理内训材料

&#xff08;一&#xff09;华为在项目管理中通过有效的沟通、灵活的组织结构、坚持不懈的努力、细致的管理和科学的考核体系&#xff0c;实现了持续的创新和发展。通过引进先进的管理模式&#xff0c;强调以客户需求为导向&#xff0c;华为不仅优化了技术管理和项目研发流程&a…

多重示例详细说明Eureka原理实践

Eureka原理&#xff08;Eureka Principle&#xff09;是指在长时间的思考和积累之后&#xff0c;通过偶然的瞬间获得灵感或发现解决问题的方法的一种认知现象。这个过程通常包括三个主要阶段&#xff1a;准备阶段、潜伏期以及突然的灵感爆发。下面详细说明Eureka原理的实践步骤…

vue3 组合式API

<!-- 深度监听 deep 点击按钮控制台&#xff0c;才输出count变化了: 1, 老值: 0;否则控制台不输出 --> <script setup>import { ref,watch } from vueconst state ref({count:0})const setCount () > {state.count.value}watch(state, () > {console.log(…

QT中通过TCP协议多线程的文件传输(客户端)

首先&#xff0c;新建一个项目&#xff0c;我命名为了SendFileClient 首先我们要在pro文件中 代码第一行加入network的后缀 一、窗口搭建 如图所示&#xff0c;在第一个QWidget中让客户端输入IP&#xff0c;端口号 连接服务器 第二个Qwidget 设置一个LineEdit,供客户端选择要…

[godot] 采用状态机时,如何处理攻击时移动?如“冲撞”

这里以‘史莱姆撞击’为例子&#xff0c;将‘空中跃进’定义为伤害帧。&#xff08;见下图&#xff09; 先梳理流程&#xff1a;a.史莱姆原地蓄力(起跳准备)--->b.跳起并移动一段距离(空中跃进)--->c.落地调整 一 当状态机进入‘攻击状态’时&#xff0c;在enter()中…

计算机毕业设计PySpark+Django农产品推荐系统 农产品爬虫 农产品商城 农产品大数据 农产品数据分析可视化 PySpark Hadoop

基于Spark的农产品个性推荐系统 相关技术介绍: 1. Python Python是一种高级编程语言&#xff0c;具有简洁、易读、易学的特点&#xff0c;被广泛应用于Web开发、数据分析、人工智能等领域。 在此系统中&#xff0c;我们使用Python进行后端开发&#xff0c;利用其强大的语法…

基本数据类型 --- 浮点型

float的机器码表示&#xff1a; 一个float数据 (pow(-1, sign) fraction) * pow(2, exponent - 127) 由上图&#xff0c;可得&#xff1a; (pow(-1, sign) fraction) * pow(2, exponent - 127) ( 1 2^(-2) ) * pow(2, 124-127) 0.15625 其他文章&#xff1a; https://b…

鸿蒙HarmonyOS之使用ArkTs语言实现层级树状目录选择UI

一、实现效果 二、实现步骤 代码示例中用到的颜色、图片等资源可以自行替换设置 1、Index.ets 里面调用 import { CategoryView} from ./CategoryView;//主页面 Entry Component struct Index {State tabsIndex: number 0;build() {...//层级目录ViewCategoryView()...} …

ReTagList标签列表(API)

组件实现基于 Vue3 + Element Plus + Typescript,同时引用 vueUse + lodash-es + tailwindCss (不影响功能,可忽略) 基于ElTag实现的Tag列表,支持Tag列表多选,动态Tag列表 ReTagList标签列表 基础 简单展示Tag列表,可通过size指定尺寸 查看 /demo/tag-list/basic.md …

Arduino开源四足蜘蛛机器人制作教程

视频教程&#xff1a;手把手叫你做四足蜘蛛机器人——1零件介绍_哔哩哔哩_bilibili 一、项目介绍 1.1 项目介绍 Arduino主控&#xff0c;图形化编程&#xff0c;趣味学习 Arduino nano开发板舵机扩展底板 4.8V可充电电池&#xff0c;支持Arduino C语言编程和米思齐图形化编程…

Yolov10网络详解与实战(附数据集)

文章目录 摘要模型详解模型实战训练COCO数据集下载数据集 COCO转yolo格式数据集&#xff08;适用V4&#xff0c;V5&#xff0c;V6&#xff0c;V7&#xff0c;V8&#xff09;配置yolov10环境训练断点训练测试 训练自定义数据集Labelme数据集格式转换训练测试 总结 摘要 模型详解…