【Element】el-progress 自定义进度条

一、背景

要求弹窗内显示进度条,根据接口获取当前进度值,间隔5秒调用接口获取最新进度值,当进度值为100时,允许关闭进度条弹窗

二、效果

三、实现步骤

3.1、按钮绑定事件,打开弹窗

<el-button class="cancelBtn" size="small" type="warning" @click="chargeGenerate">打开进度条</el-button>

3.2、弹窗内加进度条

<!-- 弹窗内显示进度条 -->
<el-dialog title="生成过程中请稍后" :visible.sync="dialogTableVisible" width="55%" top="40vh" @close="onDialogClose">
<el-progress :text-inside="true" :stroke-width="20" :percentage="percentage" status="success"></el-progress>
</el-dialog>

 说明:

text-inside:进度条显示文字内置在进度条内

stroke-width:进度条的宽度,单位 px

percentage:百分比(默认设置的为0)

详细内容可查看官网:Element - The world's most popular Vue UI framework

3.3、data中定义默认数据

 data() {return {dialogTableVisible: false,//弹窗默认关闭percentage: 0,//进度值timer:null,}}

3.4、按钮内处理弹窗进度条逻辑

chargeGenerate(){//打开弹窗this.dialogTableVisible = true//进度条开始时为0this.percentage = 0;//调取进度条的接口,启动定时器,接口获取完,销毁定时器this.timer =  setInterval(()=>{this.$http.get(this.$url.lifebill.getCalculateProgress).then(res=>{//获取接口中返回的进度值,并赋值给进度条this.percentage = res.data//满足以下条件,关闭定时器if ((res.code==0 && res.data == 100)||res.code==1) {clearInterval(this.timer); // 关闭定时器this.$message.success(res.msg)}})},5000)}

3.5、进度值不为100时,不能关闭进度弹窗

如果进度条在进行中,还没有达到100%时,是不能关闭进度弹窗的,给弹窗增加@close关闭事件

onDialogClose() {//如果进度值小于100,弹窗不能关闭if(this.percentage < 100){this.dialogTableVisible = true}else{this.dialogTableVisible = false}},

最后,👏👏 😀😀😀 👍👍 

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

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

相关文章

接入电商数据平台官方开放平台API接口获取商品实时信息数据,销量,评论,详情页演示

要接入电商数据平台官方开放平台API接口获取商品实时信息数据、销量、评论和详情页演示&#xff0c;需要按照以下步骤进行操作&#xff1a; 找到可用的API接口&#xff1a;首先&#xff0c;需要找到支持查询商品信息的API接口。可以在电商数据平台的官方开放平台上查找相应的AP…

python tkinter 使用

python tkinter 使用 ython可以使用多种GUI库来创建窗口页面&#xff0c;例如Tkinter、PyQt、wxPython等。 本篇文章主要讲述如何使用tkinter。 1&#xff1a;导入 import tkinter as tk这时如果运行的话会提示&#xff1a; ModuleNotFoundError: No module named ‘tkint…

JVM常见参数总结

JVM是Java应用程序的运行环境&#xff0c;它通过参数配置来控制其行为和性能。在JVM中&#xff0c;有很多参数可以用来调整其运行状态&#xff0c;这些参数可以帮助开发人员根据应用程序的需求进行优化和调整。在本次分享中&#xff0c;作者将介绍一些常见的JVM参数&#xff0c…

弄懂Rust编程中的Trait

1.定义 trait trait 定义了某个特定类型拥有可能与其他类型共享的功能。可以通过 trait 以一种抽象的方式定义共享的行为。可以使用 trait bounds 指定泛型是任何拥有特定行为的类型。 一个类型的行为由其可供调用的方法构成。如果可以对不同类型调用相同的方法的话&#xff…

机器人制作开源方案 | 莲花灯

1. 功能描述 莲花灯是一款基于莲花形象设计的机器人&#xff0c;本文示例将用两种模式来实现莲花灯的亮灭功能。 自主模式&#xff1a;用 光强传感器 控制莲花灯的灯叶开合。暗光情况下灯叶打开&#xff0c;灯亮&#xff1b;强光情况下灯叶闭合&#xff0c;灯灭。 …

webpack环境变量的设置

现在虽然vite比较流行&#xff0c;但对于用node写后端来说&#xff0c;webpack倒是成了一个很好的打包工具&#xff0c;可以很好的保护后端的代码。所以这块的学习还是不能停下来&#xff0c;接下来我们来针对不同的环境做不同的设置写好笔记。 引用场景主要是针对服务器的各种…

python模拟砍价源码详解

以下是一个简单的Python程序&#xff0c;模拟砍价的过程。这个程序假设原始价格是100元&#xff0c;每次砍价砍掉价格的10%&#xff1a; class Item:def __init__(self, original_price):self.original_price original_priceself.current_price original_pricedef bargain(s…

0时区格林威治时间转换手机当地时间-Android

假设传入的是2023-11-01T12:59:10.420987这样的格式 要将格式为2023-11-01T12:59:10.420987的UTC时间字符串转换为Android设备本地时间&#xff0c;您可以使用java.time包中的类&#xff08;在API 26及以上版本中可用&#xff09;。如果您的应用需要支持较低版本的Android&…

docker通过挂载conf文件启动redis

初衷&#xff1a;之前直接在启动脚本中没有挂载配置文件&#xff0c;并且直接设置了密码等&#xff0c;后续要使用集群&#xff0c;苦于无法修改配置&#xff0c;进入redis容器也找不到redis.conf&#xff0c;所以写这个文章用来使用redis的配置&#xff0c;来达到后续都可动态…

pdf转png工具类

pdf转图片的工具类 1、需要引入的包 <dependency><groupId>org.apache.pdfbox</groupId><artifactId>pdfbox</artifactId><version>2.0.4</version></dependency> 2、工具类 public static void main(String[] args) {Stri…

华为OD南京研究所二面手撕代码实录:乘电梯的最短时间

乘电梯的最短时间 某公司,每天早上都有很多人去坐电梯,每个人都可能到不同的楼层.同时电梯还有一个容量限制.电梯最多只能带K个人.电梯从第a层到第b层,会花费|a-b|的时间. 现在有N个人,以及知道每个人想要去的地方,请问如何坐电梯,才能使每个人到达到他们对应的楼层,且所花费时…

《微信小程序开发从入门到实战》学习二十四

3.3.12开发创建投票多选投票页面 创建投票多选投票页面和创建单选投票页面没有区别&#xff0c;唯一区别仅在于向服务端发送数据时&#xff0c;告诉服务器这个投票是什么类型的投票。这个类型用三种数据类型表示都可以&#xff0c;分别如下所示&#xff1a; multiple:true/fa…

Json数据格式

json比较可读&#xff0c;通过键值对返回。实现通常有两种方式:一种是自己来构造&#xff0c;也就是用一个对象存储数据&#xff0c;在最后输出时将其json字符串化&#xff1b;第二种是使用 RestController 注解实现json数据返回。 第一种 导入依赖坐标&#xff1a; <depe…

阿里 OSS鉴权访问文件

如果OSS文件设置保护&#xff0c;需要鉴权才能访问&#xff0c;添加请求头鉴权&#xff0c;SDK方法如上&#xff1b; 将鉴权信息和地址、时间返回给前端&#xff0c;前端直接从oss上读取 String filePath "/admin/2023/6/183569314928918546.png"; RequestMessage…

【C++上层应用】6. 信号 / 中断

文章目录 【 1. signal 函数 】【 2. raise函数 】 信号是由操作系统传给进程的 中断&#xff0c;会提早终止一个程序。在 UNIX、LINUX、Mac OS X 或 Windows 系统上&#xff0c;可以通过按 CtrlC 产生中断。有些信号不能被程序捕获&#xff0c;但是下表所列信号可以在程序中捕…

Git——感谢尚硅谷官方文档

Git——尚硅谷学习笔记 第1章 Git 概述1.1 何为版本控制1.2 为什么需要版本控制1.3 版本控制工具1.4 Git 简史1.5 Git 工作机制1.6 Git 和代码托管中心 第2章 Git 安装第 3 章 Git 常用命令3.1 设置用户签名3.2 初始化本地库3.3 查看本地库状态3.4 添加暂存区3.4.1 将工作区的文…

sklearn模型中预测值的R2_score为负数

目录 正文评论区参考链接 正文 Sklearn.metrics下面的r2_score函数用于计算R&#xff08;确定系数&#xff1a;coefficient of determination&#xff09;。它用来度量未来的样本是否可能通过模型被很好地预测。 分值为 1 表示最好&#xff0c;但我们在使用过程中&#xff0c…

媒体格式转换软件Permute 3 mac中文版软件特点

Permute mac是一款媒体格式转换软件&#xff0c;可以帮助用户快速地将各种音频、视频和图像文件转换成所需格式&#xff0c;并提供了一些常用工具以便于用户进行编辑和处理。 Permute mac软件特点 - 支持大量格式&#xff1a;支持几乎所有常见的音频、视频和图像格式&#xff…

Redis事务+秒杀案例

Redis事务是一个单独的隔离操作&#xff0c;是指将多条命令放在一个命令队列当中&#xff0c;按顺序执行&#xff0c;保证多个命令在同一个事务中执行而不受其他客户端的影响。 通俗来说就是&#xff1a;串联多个命令防止别的命令插队。 1.Multi、Exec、discard 在输入Multi命…

大数据Doris(二十七):Routine Load数据导入演示

文章目录 Routine Load数据导入演示 一、启动kafka集群(三台节点都启动) 二、创建topic