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 : 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.mfbz.cn/a/211115.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

AI 绘画 | Stable Diffusion 电商模特

前言 上一篇文章讲到如何给人物更换背景和服装。今天主要讲电商模特,就是服装电商们的固定服装产品图片如何变成真人模特穿上的固定服装产品效果图。如果你掌握了 《AI 绘画 | Stable Diffusion 人物 换背景|换服装》,这篇文章对你来说,上手会更轻松。 教程 提取服装蒙版…

解决Wireshark分析RTMP抓包时Unknown问题

使用Wireshark抓包时&#xff0c;经常出现很多Unknown包&#xff0c;但实际上的字节流实际是正常的。 其实&#xff0c;RTMPT设置里有一个最大包大小的设置&#xff0c;默认是32768&#xff0c;而且默认RTMPT协议配置了从多个TCP流中重组RTMPT的功能(应当是考虑基于HTTP的传输…

SpringBoot+SSM项目实战 苍穹外卖(2)

继续上一节的内容&#xff0c;本节完成新增员工、员工分页查询、启用禁用员工账号、编辑员工、导入分类模块功能代码。 目录 新增员工(完整流程分为以下五个部分)需求分析和设计代码开发功能测试代码完善 (ThreadLocal 线程局部变量)代码提交 员工分页查询代码完善 扩展Spring …

css中元素水平居中的方式

文章目录 前言水平居中&#xff1a;垂直居中方法一: text-align: centerdisplay: table-cell方法二:父元素静态定位子元素通过相对定位来实现方法三:通过静态和相对定位方法四 css图片居中用text-align:center无效怎么回事&#xff1f;如何让图片在DIV中水平和垂直两个方向都居…

prometheus|云原生|kubernetes内部安装prometheus

架构说明&#xff1a; prometheus是云原生系统内的事实上的监控标准&#xff0c;而kubernetes集群内部自然还是需要就地取材的部署prometheus服务了 那么&#xff0c;prometheus-server部署的方式其实是非常多的&#xff0c;比如&#xff0c;kubesphere集成方式&#xff0c;h…

前端面试JS— JS数据类型及相关内容

目录 JS数据类型 基本数据类型&#xff1a; 引用数据类型&#xff1a; 两种数据存储方式&#xff1a; 两种数据类型的区别&#xff1a; 数据类型的检测方式 null和undefined区别 JS数据类型 基本数据类型&#xff1a; Number&#xff0c;String&#xff0c;Boolean&#xff0c;…

Safe and Practical GPU Computation in TrustZone论文阅读笔记

Safe and Practical GPU Computation in TrustZone 背景知识&#xff1a; youtube GR视频讲解链接&#xff1a;ASPLOS’22 - Session 2A - GPUReplay: A 50-KB GPU Stack for Client ML - YouTube GPU软件栈&#xff1a; 概念&#xff1a;"GPU软件栈"指的是与GPU硬件…

以下哪项不是在内蒙古举办的?()

需要查看更多试题和答案&#xff0c;可以前往题海舟&#xff08;题海舟&#xff09;进行搜题查看。可以搜“题干关键词”。 以下哪项不是在内蒙古举办的&#xff1f;&#xff08;&#xff09; A.中蒙博览会 B.东北亚区域合作高峰论坛 C.中蒙俄合作高层论坛 D.中日经济合作会 …

C语言之位段(详解)

C语言之位段 文章目录 C语言之位段1. 位段的介绍2. 位段的内存分配3. 位段跨平台问题4. 位段的应用5. 位段使用注意 1. 位段的介绍 位段&#xff08;bit-field&#xff09;是C语言中的一种特殊数据类型&#xff0c;它允许将一个字节分成几个部分&#xff0c;并为每个部分指定特…

Sql Server数据库跨机器完整恢复(源文件恢复)

问题描述 在操作系统异常的情况下&#xff0c;SQL Server 和相关的业务系统遭受了不可用的情况。由于操作系统问题&#xff0c;导致旧服务器无法正常运行。为了恢复业务功能并确保数据完整性&#xff0c;采取了以下步骤来在新机器上进行 SQL Server 的重新安装和数据恢复。 面…

C#网络编程(System.Net命名空间和System.Net.Sockets命名空间)

目录 一、System.Net命名空间 1.Dns类 &#xff08;1&#xff09;示例源码 &#xff08;2&#xff09;生成效果 2.IPAddress类 &#xff08;1&#xff09;示例源码 &#xff08;2&#xff09;生成效果 3.IPEndPoint类 &#xff08;1&#xff09; 示例源码 &#xff0…

如何用Java实现扑克牌(附源码)

目录 一.扑克牌的数据结构 二.买牌(扑克牌的初始化) 三.洗牌 四.发牌 五.完整代码 Card.java CardList.java 六.测试 输出结果 一.扑克牌的数据结构 首先&#xff0c;扑克牌是一幅一幅的&#xff0c;除去大小王以外一共有52张&#xff0c;我们可以考虑用数组来存储…

开源 LLM 安全扫描器

Vigil 是一款开源安全扫描程序&#xff0c;可检测即时注入、越狱以及对大型语言模型(LLM) 的其他潜在威胁。 当攻击者使用专门设计的输入成功影响 LLM 时&#xff0c;就会出现即时注入。这导致 LLM 无意中实现了攻击者设定的目标。 ​ 我对 LLM 的可能性感到非常兴奋&#xff…

隐形内嵌!触想智能发布全新B款内嵌式工控一体机及内嵌式工业显示器

近日&#xff0c;触想智能发布全新B款内嵌式工控系列TPC-19.该系列可支持显示器和一体机等多种品类、多级配置的灵活选购。标志性的2.5mm矮阶窄边面板设计&#xff0c;适配隐形内嵌式安装&#xff0c;专为机柜类设备应用打造&#xff0c;以高契合的物理结构&#xff0c;带动稳定…

YUVRGB

一、直观感受 根据上面的图片&#xff0c;不难看出&#xff1a; RGB的每个分量&#xff0c;是对当前颜色的一个亮度值Y分量对呈现出清晰的图像有着很大的贡献Cb、Cr分量的内容不太容易识别清楚YUV将亮度信息&#xff08;Y&#xff09;与色度信息&#xff08;UV&#xff09;分离…

进程的创建:fork()

引入 创建进程的方式我们已经学习了一个&#xff01;在我们运行指令(或者运行我们自己写的可执行程序)的时候不就是创建了一个进程嘛&#xff1f;那个创建进程的方式称为指令级别的创建子进程&#xff01; 那如果我们想要在代码中创建进程该怎么办呢&#xff1f; fork() for…

Python基础学习快速入门

文章目录 Number变量String字符串Def函数Class类List列表Tuple元组Dictionary字典Set集合值与引用类型if条件控制Loop循环 Number变量 python直接赋值&#xff0c;不需要定义变量类型。不需要**,逗号结尾符 使用print**直接进行输出 #赋值 a 1.0 print(a)a 7 print(a)p…

OpenShare | 前端三件套初识

文章目录 &#x1f4da;总述&#x1f4da;一个案例&#x1f407;首先搭HTML框架&#x1f407;CSS加样式&#x1f407;js交互实现&#x1f32e;编辑按钮实现&#x1f32e;我还想要换头像 &#x1f6a9;加点悬浮框交互&#x1f6a9;框架梳理 &#x1f4da;资源分享 &#x1f4da;…

go第三方包发布(短精细)

1、清除其他依赖项 $ go mod tidy # 清除不必要的依赖依赖清除完成后&#xff0c;查看go.mod文件配置是否规范 module github.com/fyupeng/rpc-go-netty go 1.19 require ( )2、本地版本创建 $ git tag v0.1.0 # 本地 创建标签3、版本提交 $ git push github v0.1.0 # 推送…

如何快速生成项目目录结构树?

经常在网上看到下面这种由一个项目&#xff0c;生成一个结构树&#xff0c;你知道它是怎么生成的吗&#xff1f; 这就是利用本文要介绍的一个工具——Treer&#xff0c;treer就是一款专门用来快速生成目录结构树的命令行工具。 第一步&#xff1a;安装treer 在终端执行全局…
最新文章