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)},

调用的xiefdxie'f'd

错误的写法:(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()}},

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

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

相关文章

台式机加独显引发的故事

弄到一块NVIDIA1660显卡&#xff0c;想要加到台式机&#xff0c;枯树逢春&#xff1b;中间引发不少事情&#xff0c;记录下来共勉 1.台式机插入显卡 1&#xff09;拆开主机后部的接口片 2&#xff09;显卡插入显卡巢&#xff0c;很内存条结构类似&#xff08;长短布局&#xff…

python:range函数的使用

python&#xff1a;range函数的使用 文章目录 python&#xff1a;range函数的使用range的定义参数使用形式作用总结 range的定义 首先让我们看看range函数的帮助信息&#xff0c;通过help来查看 class range(object)| range(stop) -> range object| range(start, stop[,…

代码日常规范

1、编写代码的七大原则 其实在日常生活中的代码只要贯彻这七大原则&#xff0c;然后在这基础上提高编译执行的效率就好 1.1 可读性 可读性是编写代码的关键&#xff0c;它可以让代码更容易理解&#xff0c;更容易维护和修改。可读性可以通过缩进、换行、注释和提示信息等方式…

电子学会C/C++编程等级考试2022年06月(二级)真题解析

C/C++等级考试(1~8级)全部真题・点这里 第1题:小白鼠再排队 N只小白鼠(1 < N < 100),每只鼠头上戴着一顶有颜色的帽子。现在称出每只白鼠的重量,要求按照白鼠重量从小到大的顺序输出它们头上帽子的颜色。帽子的颜色用 “red”,“blue”等字符串来表示。不同的小白…

React 之 airbnb - 项目实战

一、开发前言 1. 规范 2. 创建项目 node -v > 18.0.0 npm -v > 8.6.0 create-react-app star-airbnb 3. 项目基本配置 配置jsconfig.json {"compilerOptions": {"target": "es5","module": "esnext","ba…

kafka2.x常用命令:创建topic,查看topic列表、分区、副本详情,删除topic,测试topic发送与消费

原创/朱季谦 接触kafka开发已经两年多&#xff0c;也看过关于kafka的一些书&#xff0c;但一直没有怎么对它做总结&#xff0c;借着最近正好在看《Apache Kafka实战》一书&#xff0c;同时自己又搭建了三台kafka服务器&#xff0c;正好可以做一些总结记录。 本文主要是记录如…

Spring --- 创建一个Spring项目

文章目录 创建一个Maven项目添加Spring框架支持添加启动类 创建一个Maven项目 注&#xff1a;我们需要使用 Maven 来管理依赖&#xff0c;所以需要创建一个Maven项目 添加Spring框架支持 注&#xff1a; 添加这两个依赖才能正确使用 Spring在添加依赖后记得刷新&#xff0c;把依…

windows安装 evo

1、widows先下载安装python 下载 &#xff0c;安装&#xff0c;设置系统环境变量 2、windows下安装pip 下载 &#xff0c;安装&#xff0c;设置系统环境变量 3、安装evo 二进制安装

【Nginx篇】Nginx轻松上手

&#x1f49d;&#x1f49d;&#x1f49d;欢迎来到我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里可以感受到一份轻松愉快的氛围&#xff0c;不仅可以获得有趣的内容和知识&#xff0c;也可以畅所欲言、分享您的想法和见解。 推荐:kwan 的首页,持续学…

【运维】nginx中root和alias区别和作用是啥

文章目录 前言1、root指令2、alias指令总结&#xff1a; 前言 nginx指定文件路径有两种方式root和alias&#xff0c;这两者的用法区别&#xff0c;使用方法总结了下&#xff0c;方便大家在应用过程中&#xff0c;快速响应。root与alias主要区别在于nginx如何解释location后面的…

Unity2D-URP基于ShaderGraph创建带粒子特效的激光光束

文章目录 创建Shader新建Node: UV新建Node: Split......参数说明 基于Shader创建Material创建Line创建粒子系统StartVFX创建粒子材质更改粒子系统的材质设置透明模式设置粒子效果创建一个Beam设置EndVFX效果预览激光光束管理脚本最终预览 创建Shader Create --> Shader Gra…

零信任、SASE还在因不标准的身份系统难对接而无法发挥真正力量?这份标准化的解决方案助您一臂之力

身份安全是网络安全的一个重要领域&#xff0c;旨在确保用户的身份安全可信&#xff0c;防止未经授权的访问和数据泄漏等问题。目前主流的信息安全趋势强调可持续验证、多源信任评估、动态防护、可持续数据防护、一体化安全审计等&#xff0c;特别是零信任、SASE等技术均以身份…

macOS/Ubuntu - ftp 工具

文章目录 Ubuntu - FilezillamacOS - Termius Ubuntu - Filezilla 安装 sudo apt-get install filezilla查看版本 filezilla --version启动 filezilla你也可以下载安装包&#xff1a; https://filezilla-project.org/download.php 解压 FileZilla_3.66.1_x86_64-linux-gnu…

vue elementUI 自定义框组织树,选择select下拉组织树横行滑动条出现方法

背景&#xff1a;最近公司开发需要使用到组织树进行组织结构的选择&#xff0c;在开发途中遇到两个次组织树已超过外框&#xff0c;但超出部分不显示横向滑动条。 自定义组织树框代码如下&#xff1a; <el-row><el-col :span"20" style"padding: 0px…

《数据结构、算法与应用C++语言描述》-线索二叉树的定义与C++实现

_23Threaded BinaryTree 可编译运行代码见&#xff1a;GIithub::Data-Structures-Algorithms-and-Applications/_24Threaded_BinaryTree 线索二叉树定义 在普通二叉树中&#xff0c;有很多nullptr指针被浪费了&#xff0c;可以将其利用起来。 首先我们要来看看这空指针有多少…

Leetcode刷题之设计循环队列(C语言版)

Leetcode刷题之设计循环队列&#xff08;C语言版&#xff09; 一、题目描述二、题目示例三、题目解析Ⅰ、typedef structⅡ、MyCircularQueue* myCircularQueueCreate(int k)Ⅲ、bool myCircularQueueIsEmpty(MyCircularQueue* obj)Ⅳ、bool myCircularQueueIsFull(MyCircularQ…

Spring加载Bean的多种方式

文章目录 1. XML方式定义2. 使用Component ComponentScan3. 使用Configuration Bean4. 使用FactoryBean的方式加载bean5. Import方式6. Import ImportSelector7. Import ImportBeanDefinitionRegistrar8. 实现接口BeanDefinitionRegistryPostProcessor9. 实现接口BeanFacto…

P19 C++ 构造函数的成员初始化列表

目录 前言 01 如果不用成员列表如何初始化变量 02 成员列表初始化 03 为什么要使用成员列表初始化呢&#xff1f; 04 案例代码 前言 本期我们聊聊构造函数初始化列表。 你应该经常使用成员初始化列表&#xff0c;如果你不喜欢这种代码风格&#xff0c;建议你还是慢慢习惯吧…

MFC mysql 往数据库中写路径时,斜杠消失

写入时发现数据库中路径为&#xff1a; E:wokspacePROJECTThirdTrailInspectioncode_cttrmeasureBSVbinimage_guidipzjt-20231113145420_下行mdx-1-5_li339.44_1.jpg 因为转义字符的存在&#xff0c; 解决办法&#xff1a; MFC的在CString转string之前&#xff0c;将\\替换掉…

立即修复计算机显示msvcp110.dll丢失问题!4个快速解决方法大揭秘

在计算机使用过程中&#xff0c;我们可能会遇到一些错误提示&#xff0c;其中之一就是“msvcp110.dll丢失”。这个错误通常会导致某些程序无法正常运行&#xff0c;给用户带来诸多不便。那么&#xff0c;当我们遇到这个问题时&#xff0c;应该如何进行修复呢&#xff1f;本文将…