elment Loading 加载组件动态变更 text 值bug记录

news2024/11/16 19:24:44

先上效果图:

倒计时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 : minutes
                seconds = seconds < 10 ? '0' + seconds : seconds
                this.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;
}

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

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

相关文章

Linux系统编程--文件操作函数

一.常见IO函数 fopen fclose fread fwrite fseek fflush fopen 运行过程 &#xff1a;打开文件 写入数据 数据写到缓冲区 关闭文件后 将数据刷新入磁盘 1.fopen 返回文件类型的结构体的指针 包括三部分 1).文件描述符&#xff08;整形值 索引到磁盘文件&#xff09;…

11.29 C++ 作业

自己封装一个矩形类(Rect)&#xff0c;拥有私有属性:宽度(width)、高度(height)&#xff0c; 定义公有成员函数: 初始化函数:void init(int w, int h) 更改宽度的函数:set_w(int w) 更改高度的函数:set_h(int h) 输出该矩形的周长和面积函数:void show() #include <io…

windows 查看mysql的错误日志

查找错误日志文件存储路径 用到的软件&#xff1a;everything 官网 voidtools 下载路径 https://www.voidtools.com/Everything-1.4.1.1024.x64-Setup.exe 直接点击下载即可 运行效果如下 我们知道mysql有个配置文件是my.ini&#xff0c;里面配置了相关信息 我们需要先…

Docker—更新应用程序

在本部分中&#xff0c;你将更新应用程序和映像。您还将了解如何停止和移除容器。 一、更新源代码 在以下步骤中&#xff0c;当您没有任何待办事项列表项时&#xff0c;您将把“空文本”更改为“您还没有待办事项&#xff01;在上面添加一个&#xff01;” 1、在src/static/…

UG\NX二次开发 创建对象属性UF_ATTR_assign

文章作者:里海 来源网站:里海NX二次开发3000例专栏 感谢粉丝订阅 感谢 weixin_43890371 订阅本专栏,非常感谢。 简介 创建对象属性UF_ATTR_assign 这个函数在后续NX版本中被UF_ATTR_set_user_attribute替代,新的函数使用例子请参阅这篇文章《UG\NX二次开发 创建对象属性UF_…

自学MySql(一)

1.安装下载 下载网址 2、将mysql的bin目录添加到环境变量&#xff08;可选&#xff09; 3、使用一下命令测试

二叉树层次遍历通用模板公式

二叉树的基本结构 #include<iostream>using namespace std;struct TreeNode {/* data */int val;TreeNode* left;TreeNode* right;TreeNode() {}TreeNode(int x) : left(nullptr), right(nullptr), val(x) {} };力扣&#xff08;LeetCode&#xff09;官网 - 全球…

SpringBoot项目打成jar包后,上传的静态资源(图片等)如何存储和访问

1.问题描述&#xff1a; 使用springboot开发一个项目&#xff0c;开发文件上传的时候&#xff0c;通常会将上传的文件存储到资源目录下的static里面&#xff0c;然后在本地测试上传文件功能没有问题&#xff0c;但是将项目打成jar包放到服务器上运行的时候就会报错&#xff0c…

QT学习_16_制作软件安装包

1、准备软件exe及其运行环境 参考&#xff1a;Qt学习_12_一键生成安装包_江湖上都叫我秋博的博客-CSDN博客 这篇博客记录了&#xff0c;如何用window的脚本&#xff0c;一键生成一个可以免安装的软件压缩包&#xff0c;解压缩后&#xff0c;点击exe文件就可以直接运行。 这一…

基于APM(PIX)飞控和missionplanner制作遥控无人车-从零搭建自主pix无人车无人履带车坦克-2(以乐迪crossflight飞控为例)

这里重点以乐迪crossflight飞控为例进行组装调试。 1.刷写固件 安装最新版的乐迪地面站&#xff0c;在官网可以下载。由于产品里面不好找到对应的飞控&#xff0c;可以在首页滑动图片里进入。 1.连接飞控和电脑&#xff0c;查看com口&#xff0c;安装驱动。 2.刷写固件。如果…

【腾讯云 HAI域探秘】借助高性能应用HAI——我也能使用【stable diffusion】制作高级视频封面了

目录 高性能应用服务HAI_GPU云服务器的申请与服务创建 官网地址&#xff1a;高性能应用服务HAI_GPU云服务器_腾讯云 通过高性能应用服务HAI——创建【stable diffusion】 WebUI效果&#xff1a; 服务器后台效果&#xff1a; stable-diffusion服务测试 启动接口服务 配置…

MediaPipe - 小记

文章目录 关于 MediaPipe 关于 MediaPipe Cross-platform, customizable ML solutions for live and streaming media. MediaPipe &#xff1a; 设备端机器学习框架 MediaPipe Studio : 提供标准化 task&#xff0c;你可以下载预训练模型来使用 MediaPipe Model Maker : 定制…

nacos集群开箱搭建-linux版本搭建

原创/朱季谦 nacos是一款易于构建云原生应用的动态服务发现、配置管理和服务管理平台&#xff0c;简单而言&#xff0c;它可以实现类似zookeeper做注册中心的功能&#xff0c;也就是可以在springcloud领域替代Eureka、consul等角色&#xff0c;同时&#xff0c;还可以充当spri…

毕业设计单片机可以用万能板吗?

毕业设计单片机可以用万能板吗? 可以是可以&#xff0c;就是焊接起来比较麻烦&#xff0c;特别是有好几个重复连线点的时候&#xff0c;检测起来就不那么容易了&#xff0c;而且布线看起来乱糟糟的&#xff0c;如果后期一不小心把线弄断了&#xff0c;查起来就更麻烦了&#x…

「Linux」进程等待与替换

&#x1f4bb;文章目录 &#x1f4c4;前言进程等待进程等待的概念进程等待的方法 进程替换进程替换的概念替换方式 &#x1f4d3;总结 &#x1f4c4;前言 在如今的时代&#xff0c;多进程编程已经变成了必不可少的一部分&#xff0c;而进程等待、进程替换这两个概念都是作为多进…

记一次:Python的学习笔记一

前言&#xff1a;之前学习的Python笔记&#xff0c;已经过去很多年了&#xff0c;不久前重新翻了出来练习练习。不完善的地方在缝缝补补 一、环境搭建 1.1、Python的win环境安装 0、python-3.12.0软件安装&#xff1a;Win11环境搭建python-3.12.0-amd64 这里小小注意一下&a…

Docker的基本概念和优势,以及在应用程序开发中的实际应用

文章目录 概要 基本概念 容器 (Container): 镜像 (Image): Dockerfile: 仓库 (Repository): 容器编排 (Orchestration): Docker Compose: Docker Daemon 和 Docker Client: 网络 (Network): 数据卷 (Volume): 主要优势 应用场景 小结 概要 Docker 是一种容器化平台&#xff0c;…

网易区块链,网易区块链赋能赣州脐橙数字藏品,数字指纹解决方案

目录 网易区块链 网易区块链赋能赣州脐橙数字藏品,助力革命老区三农之路 数字指纹解决方案 网易区块链 网易区块链成立于2017年,致力于Web3.0区块链技术的研发和应用。自主研发的区块链“天玄”引擎,在单链场景下支持每秒最高30万笔交易,单日可处理上链数据超10亿。 与…

最新AI智能写作回答系统源码 附完整的搭建教程

随着人工智能技术的快速发展&#xff0c;AI在各个领域的应用越来越广泛。在写作领域&#xff0c;AI智能写作回答系统已经成为一种新型的写作工具&#xff0c;可以帮助人们快速、准确地生成文章&#xff0c;提高写作效率和质量。 以下是部分代码的示例&#xff1a; 系统的特色功…

哈希桶——开放定址法

哈希表的迭代器&#xff1a; 迭代器模板介绍&#xff1a; template<class K, class T, class Ref, class Ptr, class KeyOfT, class Hash> K:关键词类型 T:存储的数据类型 Ref:T& &#xff08;operator*() 解引用函数的返回类型&#xff09; Ptr:T* (oper…