elment Loading 加载组件动态变更 text 值bug记录
先上效果图:
倒计时4分钟组件方法
// 倒计时 4分钟getSencond() {this.countDown = '4分00秒'this.interval = setInterval(() => {this.maxTime--;let minutes = Math.floor(this.maxTime / 60);let seconds = Math.floor(this.maxTime % 60);minutes = minutes < 10 ? '0' + minutes : minutesseconds = seconds < 10 ? '0' + seconds : secondsthis.countDown = minutes + '分' + seconds + '秒'// console.log('countDown:', this.countDown)this.allLoading(this.maxTime, this.countDown,)if (this.maxTime === 0) {clearInterval(this.interval)}}, 1000)},
调用的loading方法
错误的写法:(text 里面给变量,变量值不会更新,只会走一次。)
allLoading(maxTime, countDown) {const loading = this.$loading({lock: true,text: `请耐心等待导入成功: 倒计时${ countDown }`,spinner: 'el-icon-loading',background: 'rgba(0, 0, 0, 0.7)'})if (maxTime === 0) {loading.close()}},
正确的写法:官方文档里也没有提供能动态改变加载文案的 API,网上看到有人说可以使用 setText
来设置 text
值,于是使用以下方法试了试,还真的可以。
loading.setText(`请耐心等待导入成功: 倒计时${ countDown }`)
data() {return {countDown: '4分00秒',maxTime: 4 * 60,interval: '',}},allLoading(maxTime, countDown) {const loading = this.$loading({lock: true,text: '正在导入...',spinner: 'el-icon-loading',background: 'rgba(0, 0, 0, 0.7)'})loading.setText(`请耐心等待导入成功: 倒计时${ countDown }`)if (maxTime === 0) {loading.close()}},
改变icon 的图标大小:
element中自带的loading图标修改大小
.el-loading-spinner{
font-size: 30px;
}
这样就可以直接修改,又得生效不了,前面可以加 ::v-deep
::v-deep .el-loading-spinner{
font-size: 30px;
}
相关文章:
elment Loading 加载组件动态变更 text 值bug记录
先上效果图: 倒计时4分钟组件方法 // 倒计时 4分钟getSencond() {this.countDown 4分00秒this.interval setInterval(() > {this.maxTime--;let minutes Math.floor(this.maxTime / 60);let seconds Math.floor(this.maxTime % 60);minutes minutes < 10 ? 0 minu…...
Typora免费版安装教程(仅供学习)
目录 一、Typora简介二、Typora安装三、Typora补丁四、Typora使用体验五、总结 一、Typora简介 Typora是一款非常流行的Markdown编辑器,它能够将Markdown文本转化为漂亮的排版,并且支持实时预览。Typora具有简单易用的界面,使得用户可以轻松地…...
SSM项目实战-前端-添加分页控件-调正页面布局
1、Index.vue <template><div class"common-layout"><el-container><el-header><el-row><el-col :span"24"><el-button type"primary" plain click"toAdd">新增</el-button></el-…...
C语言从入门到实战——常用字符函数和字符串函数的了解和模拟实现
常用字符函数和字符串函数的了解和模拟实现 前言1. 字符分类函数2. 字符转换函数3. strlen的使用和模拟实现4. strcpy的使用和模拟实现5. strcat的使用和模拟实现6. strcmp的使用和模拟实现7. strncpy函数的使用8. strncat函数的使用9. strncmp函数的使用10. strstr的使用和模拟…...
nodejs+vue+elementui网上家电家用电器数码商城购物网站 多商家
基于vue.js的恒捷网上家电商城系统根据实际情况分为前后台两部分,前台部分主要是让用户购物使用的,包括用户的注册登录,查看公告,查看和搜索商品信息,根据分类定位不同类型的商品,将喜欢的商品加入购物车&a…...
32.768KHz时钟RTC晶振精度PPM值及频差计算
一个数字电路就像一所城市的交通,晶振的作用就是十字路口的信号灯,因此晶振的品质及其电路应用尤其关键。数字电路又像生命体,它的运行就像人身体里的血液流通,它不是由单一的某个器件或器件单元构成,而是由多个器件及…...
SQL Server 数据库,创建数据表
2.3表的基本概念 表是包含数据库中所有数据的数据库对象。数据在表中的组织方式与在电子表格中相似,都是 按行和列的格式组织的,每行代表一条唯一的记录,每列代表记录中的一个字段.例如,在包含公 司员工信息的表中,每行…...
Vue3引入markdown编辑器--Bytemd
字节跳动开源了一款markdown编辑器,bytemd,项目地址:GitHub - bytedance/bytemd: ByteMD v1 repository 安装 npm i bytemd/vue-next 引入方式如下,再main.js中引入样式 import bytemd/dist/index.css 直接封装一个Markdown编…...
JS实现基数排序
基数排序(Radix Sort)作为一种非比较性的排序算法,以其独特的思想和高效的性能而受到广泛关注。本文将深入研究基数排序的原理、实现方式等。 什么是基数排序 公众号:Code程序人生,个人网站:https://creato…...
【蓝桥杯】二分查找
二分查找 题目描述 输入 n n n 个不超过 1 0 9 10^9 109 的单调不减的(就是后面的数字不小于前面的数字)非负整数 a 1 , a 2 , … , a n a_1,a_2,\dots,a_{n} a1,a2,…,an,然后进行 m m m 次询问。对于每次询问,给出一…...
大于2T磁盘划分并挂接
需要挂接9T多的磁盘做数据磁盘,记录下操作过程 1、使用fdisk -l识别到磁盘 # fdisk -l|grep 9.5 TiB Disk /dev/sdd: 9.5 TiB, 10453950398464 bytes, 20417871872 sectors Disk /dev/sdf: 9.5 TiB, 10453950398464 bytes, 20417871872 sectors Disk /dev/sdh: 9.…...
蓝桥杯每日一题2023.12.3
题目描述 1.移动距离 - 蓝桥云课 (lanqiao.cn) 题目分析 对于此题需要对行列的关系进行一定的探究,所求实际上为曼哈顿距离,只需要两个行列的绝对值想加即可,预处理使下标从0开始可以更加明确之间的关系,奇数行时这一行的数字需…...
Nacos源码解读04——服务发现
Nacos服务发现的方式 1.客户端获取 1.1:先是故障转移机制判断是否去本地文件中读取信息,读到则返回 1.2:再去本地服务列表读取信息(本地缓存),没读到则创建一个空的服务,然后立刻去nacos中读取更新 1.3:读到了就返回,同时开启定时…...
SAP系统邮件功能配置 SCOT <转载>
原文链接:https://zhuanlan.zhihu.com/p/71594578 相信SAP顾问或多或少都会接到用户要求SAP系统能够定时发送邮件的功能,定时将用户需要的信息已邮件的方式发送给固定的人员。 下面就来讲一下SAP发送邮件应该如何配置: 1、RZ10做配置&#…...
数据结构——二叉树(相关术语、性质、遍历过程)
遍历操作 二叉树的层次遍历-CSDN博客 二叉树的基本操作-CSDN博客 二叉树的先序遍历非递归实现-CSDN博客 后序遍历的非递归方式实现-CSDN博客 二叉树:已知先序中序求后序或者其他(秒解)-CSDN博客 因为之前发过一遍,我就不复制…...
详细学习Pyqt5的9种显示控件
Pyqt5相关文章: 快速掌握Pyqt5的三种主窗口 快速掌握Pyqt5的2种弹簧 快速掌握Pyqt5的5种布局 快速弄懂Pyqt5的5种项目视图(Item View) 快速弄懂Pyqt5的4种项目部件(Item Widget) 快速掌握Pyqt5的6种按钮 快速掌握Pyqt5的10种容器&…...
SpringBoot+vue美食外卖点餐系统的研究与设计
目录 前言😃:一、项目简介二、技术选型三、系统功能架构四、功能实现商家端功能实现(1)商家端登录界面(2)工作台界面(3)数据统计界面(4)订单界面(…...
行业分析:轻轨行业发展现状及市场投资前景
轻轨是城市轨道建设的一种重要形式,也是当今世界上发展最为迅猛的轨道交通形式。轻轨的机车重量和载客量要比一般列车小,因此叫做“轻轨”。 城市轻轨具有运量大、速度快、污染小、能耗少、准点运行、安全性高等优点。城市轻轨与地下铁道、城市铁路及其…...
智安网络|语音识别技术:从历史到现状与未来展望
语音识别技术是一种将语音信号转化为可识别的文本或命令的技术,近年来得到了广泛应用和关注。 一. 语音识别的发展现状 1.历史发展 语音识别技术的起源可以追溯到20世纪50年代,但直到近年来取得了显著的突破和进展。随着计算机性能的提升和深度学习算法…...
揭秘预付费电表怎么无线收费——方便快捷收费
【摘要】针对目前市场上普遍以Ic卡作为售电介质的预付费售电系统存在的问题,介绍了一种新型的无线预付费售电系统及其构成,并给出了整个系统设计的完整方案。整个系统包括用户终端和电力管理系统端,它们之间通过双工通信可以将用户用电信息和…...
OpenCV-Python:图像卷积操作
目录 1.图像卷积定义 2.图像卷积实现步骤 3.卷积函数 4.卷积知识考点 5.代码操作及演示 1.图像卷积定义 图像卷积是图像处理中的一种常用操作,主要用于图像的平滑、锐化、边缘检测等任务。它可以通过滑动一个卷积核(也称为滤波器)在图像…...
创建Vue项目
安装node 官网: https://nodejs.org/en/download/ 安装的过程没有什么需要注意的,可以把安装路径调整一下。 使用以下命令查看 node 的版本 v20.10.0 ,验证是否安装成功。 node -v 创建Vue项目 在存放项目的目录下打开cmd,输入以…...
T-SQL的多表查询
前面讲述过的所有查询都是基于单个数据库表的查询。如果一个查询需要对多个表进行操作,就称为联接查询,联接查询的结果集或结果称为表之间的联接。 联接查询实际上是通过各个表之间共同列的关联性来查询数据的,它是关系数据库查询最主要的特征…...
适合学生备考的护眼台灯有哪些?五款公认优质台灯推荐
根据近两年的卫计委数据统计,我国的近视率全球第一。其中小学生平均近视率36%,初中平均近视率71.6%,高中生平均近视率81%。看到这些数据真让作为家长的我们触目惊心。 而这里面,先天的遗传近视并不多,很多的学生近视都…...
机器人学英语
我的prompt i want to you act as an english language teacher/asistant to help me study english, you could teach me in such a way: you ask me questions and i answer them, and you help me correct the grammer or word mistakes in my expression and polish my par…...
51综合程序03-DS1302时钟
文章目录 DS1302时钟芯片一、DS1302时钟芯片的工作原理1. 芯片特点2. 引脚说明3. 寄存器地址4. 读数据的时序图5. 写数据的时序图 二、综合实例LCD1602显示 DS1302时钟芯片 一、DS1302时钟芯片的工作原理 1. 芯片特点 实时计算年、月、日、时、分、秒、星期,直到2…...
redis的缓存击穿,缓存穿透,缓存雪崩
Redis是一个开源的、内存中的数据结构存储系统,它可以用作数据库、缓存和消息代理。Redis支持多种数据结构,如字符串、哈希表、列表、集合和有序集合。此外,Redis还支持各种操作,如读取和写入数据、删除和更新数据等。 Redis的特点…...
AutoHotKey-study
目录 使用编辑器脚本注意函数解释信息调试方法键盘获取方法脚本练习 最近发现常用键盘的上下左右箭头去操作输入输出问题感觉很不是滋味,不像Linux那样,有vim的使用,就想着有没有什么方法更快捷,更方便的去使用电脑键盘࿰…...
Go to do list
go 语言中怎么实现分布式系统? 在Go语言中实现分布式系统需要考虑以下几个方面: 通信协议:在分布式系统中,各个节点需要通过网络进行通信。Go语言提供了丰富的网络编程库,如net/http、net/rpc等,可以方便…...
JWT 认证机制
1. Session 认证的局限性 Session 认证机制需要配合 Cookie 才能实现。由于 Cookie 默认不支持跨域访问,所以,当涉及到前端跨域请求后端按口的时候,需要做很多额外的配置,才能实现跨域 Session 认证。 注意: 1…...
网站都有备案号吗/游戏广告联盟平台
查询表内容: select * from stu; (stu是一张表) 显示表结构: desc stu;...
天猫网站做真丝服装批发/海南网站制作公司
在计算机系统中,通过文件的名称对信息进行管理,计算机的文件管理系统使信息按名称存取成为可能。典型的文件名由主文件名 ( 简称文件名 ) 和文件扩展名 ( 类型名 ) 组成,在文件名和文件扩展名之间加一个点(1)DOS 操作系统中文件的命名规则早期…...
个人可做网站需要什么材料/谷歌aso优化
JSP文件:JSP Include指令的使用这是JSP网页中的文字");%>HTML文件(1.html)Insert title here这是HTML的内容问题:运行JSP文件时,“这是HTML的内容”中的中文部分出现了乱码解决:将回到HTML文件在之上就能解决原理…...
雪锐琴网站建设/东莞网站建设方案外包
外部样式表调用:页面内嵌法:就是将样式表直接写在页面代码的head区。 如: <style type”text/css”><!– body { background : white ; color : black ; } –> </style> 外部调用法:将样式表写在一个独立的.cs…...
专题活动是在官方网站还是在其他网站做/企业网站推广建议
使用 Binder IPC 本页介绍了 Android O 中对 Binder 驱动程序进行的更改、提供了有关使用 Binder IPC 的详细信息,并列出了必需的 SELinux 政策。 对 Binder 驱动程序进行的更改 从 Android O 开始,Android 框架和 HAL 现在使用 Binder 互相通信。由于…...