elementui loading自定义图标和字体样式

  • 需求:页面是用了很多个loading,需要其中有一个字体大些(具体到图标也一样的方法,换下类名就行)

  • 遇见的问题:改不好的话会影响其他的loading样式(一起改变了)

  • 效果展示

    • 改之前
      在这里插入图片描述
    • 改之后
      请添加图片描述
  • 关键知识点:element的loading自带的element-loading-custom-class="boxStyle"属性的使用(Loading 的自定义类名)

  • 代码

    <div class="box"v-loading="boxLoading":element-loading-text="正在删除,请勿关闭..."element-loading-spinner="el-icon-loading"element-loading-background="rgba(255, 255, 255, 1)"element-loading-custom-class="boxStyle"></div>//css
    <style lang="stylus" scoped>
    >>>.boxStylefont-size 40px .el-loading-spinner .el-loading-textfont-size: 24px;margin-top 10px
    </style>
    
  • 自定义类名成功加载到标签上的效果,是加在mask后面
    在这里插入图片描述

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

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

相关文章

使用conda管理Python虚拟环境

标题&#xff1a;使用conda管理Python虚拟环境 摘要&#xff1a;本文将介绍如何使用conda工具创建、查看和删除Python虚拟环境。通过使用conda&#xff0c;我们可以轻松地在不同的项目中使用不同的Python版本和依赖库&#xff0c;避免不同项目之间的冲突。 一、简介 Python是…

使用 Kafka 和 CDC 将数据从 MongoDB Atlas 流式传输到 SingleStore Kai

SingleStore 提供了变更数据捕获 (CDC) 解决方案&#xff0c;可将数据从 MongoDB 流式传输到 SingleStore Kai。在本文中&#xff0c;我们将了解如何将 Apache Kafka 代理连接到 MongoDB Atlas&#xff0c;然后使用 CDC 解决方案将数据从 MongoDB Atlas 流式传输到 SingleStore…

IDEA好用插件

CodeGlance Pro 右侧代码小地图 Git Commit Template git提交信息模板 IDE Eval Reset 无限试用IDEA Maven Helper 图形化展示Maven项 One Dark theme 好看的主题 SequenceDiagram 展示方法调用链 Squaretest 生成单元测试 Translation 翻译 Lombok lombok插件…

【开题报告】基于JavaWeb的年货销售系统的设计与实现

1.选题背景 年货销售是中国传统文化的一部分&#xff0c;也是中国人过年必备的习俗之一。随着互联网的发展&#xff0c;越来越多的人选择在网上购买年货&#xff0c;以节省时间和精力。为了满足人们对年货的购买需求&#xff0c;设计一个基于JavaWeb的年货销售系统具有重要意义…

leecode | 829连续整数求和

给一个整数n 求连续整数的和等于n 的个数 这道题 是一个数论的思想 解决思路&#xff1a; 数必须是连续的&#xff0c;可以转化成一个通用的公式&#xff0c;以101为例做一般性推导&#xff0c;&#xff1a; 101 &#xff1d; 101 &#xff1d; 50 &#xff0b; 51 &#xff1d…

AQS原来是这么设计的,泰裤辣!

缘起 每门编程语言基本都离不开并发问题&#xff0c;Java亦如此。谈到Java的并发就离不开Doug lea老爷子贡献的juc包&#xff0c;而AQS又是juc里面的佼佼者 因此今天就一起来聊聊AQS 概念 AQS是什么&#xff0c;这里借用官方的话 Provides a framework for implementing blo…

web3: 智能合约

目录 智能合约的历史什么是智能合约如何运作?智能合约的应用代币标准ERC-20什么是 ERC-20?功能ERC-20 代币接口ERC-721什么是 ERC-721?功能ERC-721 代币接口:ERC-165ERC-777什么是 ERC-777&

第11课 实现桌面与摄像头叠加

在上一节&#xff0c;我们实现了桌面捕获功能&#xff0c;并成功把桌面图像和麦克风声音发送给对方。在实际应用中&#xff0c;有时候会需要把桌面与摄像头图像叠加在一起发送&#xff0c;这节课我们就来看下如何实现这一功能。 1.备份与修改 备份demo10并修改demo10为demo11…

前端跨域问题的解决思路

目录 前言 跨域问题的解决思路 一般跨域的解决方案 前言 做了一个简单页面&#xff0c;做了一些数据埋点&#xff0c;想通过企业微信机器人来推送数据&#xff0c;遇到了一些问题&#xff0c;顺便记录下。 跨域问题的解决思路 由于是项目比较简单&#xff0c;直接使用了aj…

Sentinel整合OpenFeign

1、配置文件 feign:sentinel:enabled: true 2、 编写一个工厂类 import com.cart.cartservice.client.ItemClient; import com.cart.cartservice.entity.Item; import lombok.extern.slf4j.Slf4j; import org.springframework.cloud.openfeign.FallbackFactory; import org.sp…

《Effective C++》《Resource Management》

文章目录 13、term13:Use objects to manage resources14、term14:Think carefully about copying behavior in resource-managing classes15、term15:Provide access to raw resources in resource-managing classes法一&#xff1a; 使用智能指针的get进行显示转换法二&#…

Redis 连接 命令

目录 1.Redis Echo 命令 - 打印字符串简介语法可用版本: > 1.0.0返回值: 返回字符串本身。 示例 2.Redis Select 命令 - 切换到指定的数据库简介语法可用版本: > 1.0.0返回值: 总是返回 OK 。 示例 3.Redis Ping 命令 - 查看服务是否运行简介语法可用版本: > 1.0.0返回…

2024-2030年中国磁化率仪行业应用前景与投资价值评估分析报告

2024-2030年中国磁化率仪行业应用前景与投资价值评估分析报告 &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& 《报告编号》: BG471760 《出…

Apache 网页优化

目录 1.网页压缩与缓存 1.1 网页压缩 1. gzip 介绍 2. Http的压缩过程 3. Apache的压缩模块 4. mod_deflate模块 1.2 网页缓存 1. 配置 mod_expires 模块启用 2. 隐藏版本信息 2.1 配置Apache隐藏版本信息 2.2 Apache 防盗链 1. 配置防盗链 2.检查是否安装mod_re…

景联文科技GPT教育题库:AI教育大模型的强大数据引擎

GPT-4发布后&#xff0c;美国奥数队总教练、卡耐基梅隆大学数学系教授罗博认为&#xff0c;这个几乎是用“刷题”方式喂大的AI教育大模型的到来&#xff0c;意味着人类的刷题时代即将退出历史舞台。 未来教育将更加注重学生的个性化需求和多元化发展&#xff0c;借助GPT和AI教育…

你想过在 C++ 中使用契约和反射特性吗?

以下内容为本人的学习笔记&#xff0c;如需要转载&#xff0c;请声明原文链接微信公众号「ENG八戒」https://mp.weixin.qq.com/s/fOEG22dQqKSpsZmk8z6w6g ISO/IEC C 技术委员会主持人 Herb Sutter 报告称&#xff0c;C26 将具有新的功能&#xff0c;包括契约和反射。 该委员会…

Java异常简单介绍

文章目录 1. 异常分类和关键字1.1 分类1.2 关键字 2. Error2.1 Error定义2.2 常见的Error2.2.1 VirtualMachineError2.2.2 ThreadDeath2.2.3 LinkageError2.2.4 AssertionError2.2.5 InternalError2.2.6 OutOfMemoryError2.2.6.1 OOM原因2.2.6.2 OutOfMemoryError会导致宕机吗 …

大创项目推荐 深度学习卫星遥感图像检测与识别 -opencv python 目标检测

文章目录 0 前言1 课题背景2 实现效果3 Yolov5算法4 数据处理和训练5 最后 0 前言 &#x1f525; 优质竞赛项目系列&#xff0c;今天要分享的是 &#x1f6a9; **深度学习卫星遥感图像检测与识别 ** 该项目较为新颖&#xff0c;适合作为竞赛课题方向&#xff0c;学长非常推荐…

LeetCode刷题--- 解码方法

个人主页&#xff1a;元清加油_【C】,【C语言】,【数据结构与算法】-CSDN博客 个人专栏 力扣递归算法题 http://t.csdnimg.cn/yUl2I 【C】 ​​​​​​http://t.csdnimg.cn/6AbpV 数据结构与算法 ​​​http://t.csdnimg.cn/hKh2l 前言&#xff1a;这个专栏主要讲述动…

Spring中的依赖注入(DI)的几种方法的使用

文章目录 Spring中的依赖注入&#xff08;DI&#xff09;的几种方法的使用1、构造函数注入业务层实现类application.xml 2、set方法注入业务层实现类application.xml 3、自动注入业务层实现类application.xml 4、注入集合类型的属性业务层实现类application.xml 测试类 Spring中…