详细分析 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.rhkb.cn/news/407570.html

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

相关文章

[数据集][目标检测]工程机械车辆检测数据集VOC+YOLO格式3189张10类别

数据集格式&#xff1a;Pascal VOC格式YOLO格式(不包含分割路径的txt文件&#xff0c;仅仅包含jpg图片以及对应的VOC格式xml文件和yolo格式txt文件) 图片数量(jpg文件个数)&#xff1a;3189 标注数量(xml文件个数)&#xff1a;3189 标注数量(txt文件个数)&#xff1a;3189 标注…

密码生成器(HTML+CSS+JavaScript)

&#x1f30f;个人博客主页&#xff1a;心.c ​ 前言&#xff1a;前两天写了密码生成器&#xff0c;现在跟大家分享一下&#xff0c;大家如果想使用随便拿&#xff0c;如果哪里有问题还请大佬们给我指出&#xff0c;感谢支持 &#x1f525;&#x1f525;&#x1f525;专题文章&…

Vue3集成高德离线地图实践

1. 离线地图效果预览 2. 地图下载器下载离线地图 根据需要选择地图&#xff0c;我这边选择高德地图&#xff0c;层级选择0-15级别即可&#xff0c;进行下载 3. 放到nginx内网服务器 注意配置允许跨域 4. Vue3核心代码 // main.js // 初始化vue-amap initAMapApiLoader({o…

Android自定义简单TextView

自定义属性 <declare-styleable name"TextView"><!--name 属性名称format 格式&#xff1a;string 文字 color颜色dimension 宽高 字体大小 integer数字reference 资源引用(drawable)--><attr name"YiRanText" format"string"/&…

torchvision中的数据集使用

1.数据集&#xff1a; 自定义数据集transforms中的类 如何将数据集和transforms结合在一起&#xff1f; 以CIFAR10为列 2.CIFAR10数据集的下载与导入 import torchvisiontrain_settorchvision.datasets.CIFAR10(root"./dataset",trainTrue,downloadTrue) test_set…

判别分析2|Bayes判别分析|Fisher判别分析|软件求解

Bayes判别分析 引入先验信息 距离判别只要求知道总体的数字特征&#xff0c;不涉及总体的分布函数 当均值和协方差未知时&#xff0c;就用样本的均值和协方差矩阵做估计值。距离判别方法简单实用&#xff0c;但没有考虑到每个总体出现的机会大小&#xff0c;即先验概率&#…

Git的使用教程及常用语法03

七.如何从版本库中删除文件 第一种方式&#xff1a;直接在工作区删除文件&#xff0c;然后提交 rm ffile1.txt (注意&#xff1a;这个不是git命令&#xff0c;而是linux命令) 看到状态发现&#xff0c;文件file1.txt已经被删除&#xff0c;提示需要提交到暂存区。 因为我们只…

从开发到集成:视频美颜SDK与直播美颜API详解

在本文中&#xff0c;我们将详细探讨视频美颜SDK的开发过程及其与直播美颜API的集成方案&#xff0c;帮助开发者更好地理解和应用这些技术。 一、视频美颜SDK的开发概述 视频美颜SDK是一个用于实时视频处理的开发工具包&#xff0c;提供了包括磨皮、美白、瘦脸、眼睛放大等多…

盘古信息IMS MCM制造协同管理系统:为中小企业数字化转型量身打造的数字化方案

近年来&#xff0c;全球经济的不稳定性&#xff0c;给中小企业的经营和发展带来了巨大的挑战。为提升企业竞争力&#xff0c;中小企业纷纷谋求数字化转型路径&#xff0c;优化生产流程、提高运营效率、降低生产成本&#xff0c;以应对变幻莫测的市场环境。IMS MCM是盘古信息为广…

python爬虫521

爬虫521 记录 记录 最近想学爬虫&#xff0c;尝试爬取自己账号下的文章标题做个词云 csdn有反爬机制 原理我就不说啦 大家都写了 看到大家结果是加cookie 但是我加了还是521报错 尝试再加了referer 就成功了(╹▽╹) import matplotlib import requests from wordcloud impor…

TinaSDKV2.0 自定义系统开发

TinaSDKV2.0 自定义系统开发 什么是自定义系统&#xff1f; TinaSDK Kconfig界面配置 Tina Linux采用 Kconfig 机制对 SDK 和内核进行配置。 Kconfig 是一种固定格式的配置文件。Linux 编译环境中的 menuconfig 程序可以识别这种格式的配置文件&#xff0c;并提取出有效信息…

使用redis模拟cookie-session,例子:实现验证码功能

在前后端分离架构中不建议使用cookie-session机制实现端状态识别 原因&#xff1a; 1.前后端分离存在跨域问题&#xff0c;cookie无法共享 2.后台服务器一旦建立集群&#xff0c;可能导致session数据丢失&#xff0c;即后台有多台服务器&#xff0c;每个服务器存的session不一…

Flutter ListView控件

ListView是flutter中线性排列的可滚动的列表部件。ListView 是最常用的滚动小部件。它在滚动方向上一个接一个地显示其子项。在交叉轴上&#xff0c;子项需要填满 ListView。 如果非空&#xff0c;则 itemExtent 会强制子项在滚动方向上具有给定的范围。 如果非空&#xff0c;…

kafka的一个有趣问题(BUG)

这是我的第104篇原创文章 问题由来 在使用kafka时&#xff0c;创建topic&#xff0c;对某个topic进行扩分区的操作&#xff0c;想必大家肯定都使用过。尤其是集群进行扩容时&#xff0c;对流量较大的topic进行扩分区操作。一般而言&#xff0c;期望的效果是&#xff1a;新扩的分…

【Qt】常用控件QPushButton

常用控件QPushButton QWidget中涉及的各种属性/函数/使用方法&#xff0c;对Qt中的各种控件都是有效的。 QPushButton继承自QAbstractButton。这个类是抽象类&#xff0c;是其他按钮的父类。 QAbstractButton中和QPushButton相关性比较大的属性。 属性说明 text 按钮中的⽂本…

TCP/UDP的对比,粘包分包抓包,http协议

服务器端&#xff1a; 一、loop 127.0.0.1本地回环测试地址 二、tcp特点 面向连接、可靠传输、字节流 粘包问题&#xff1a;tcp流式套接字&#xff0c;数据与数据之间没有套接字&#xff0c;导致可能多次的数据粘到一起 解决方法&#xff1a;&#xff08;1&#xff09;规…

后端Java秋招面试中的自我介绍需要说什么?

本文主要面向校招/实习面试中求职后端开发岗位的同学&#xff0c;其他岗位/社招的同学也可以参考&#xff0c;道理都是相通的 1 背景 1.1为什么要认真准备自我介绍&#xff1f; 1. 必要性&#xff1a;在求职面试中&#xff0c;一般来说同学和面试官打过招呼之后第一项就是自…

html+css+js网页设计 电商 珠宝首饰电商3个页面

htmlcssjs网页设计 电商 珠宝首饰电商3个页面 网页作品代码简单&#xff0c;可使用任意HTML编辑软件&#xff08;如&#xff1a;Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad 等任意html编辑软件进行运行及修改编辑等操作&#xff09;。 获取源码 1…

网络编程知识点总结

物理链路网络运输会话表示应用 物链网运会表应 实际的数据帧 TCP和UDP的异同&#xff08;笔试面试&#xff09; 主机&#xff1a;host 转换&#xff1a;to 网络&#xff1a;network uint32_t htonl(uint32_t hostlong); //将4字节无符号整数的主机字节序转换为网络字节序&a…

掌握语义内核(Semantic Kernel):如何使用Memories增强人工智能应用

随着人工智能领域的不断发展&#xff0c;语义内核&#xff08;Semantic Kernel&#xff09;的概念应运而生&#xff0c;为我们处理和理解庞大的数据集提供了新的视角。今天&#xff0c;我们将聚焦于语义内核中的一个核心概念——Memories&#xff0c;它是如何使我们的数据查询更…