element-ui以服务方式调用loading,自定义修改icon

一、以服务的方式调用Loading

除了常用的v-loading、this.$loading我们还可以以服务的方式调用。主要有以下步骤

  1. 引入Loading服务
import { Loading } from 'element-ui';
  1. 在需要时调用
Loading.service(options);

其中 options 参数为 Loading 的配置项,具体见下表。LoadingService 会返回一个 Loading 实例,可通过调用该实例的 close 方法来关闭它:

let loadingInstance = Loading.service(options);
this.$nextTick(() => { // 以服务的方式调用的 Loading 需要异步关闭loadingInstance.close();
});

具体options

二、使用自定义icon
  1. 调用loading
const loadingInstance = Loading.service({fullscreen: true,spinner: 'el-icon-loading',// 添加自定义类名,避免影响页面内部及button的默认loading样式customClass: 'iam-loading',
})
  1. 新建css文件
.iam-loading {.el-loading-spinner {// 自定义icon地址background-image: url('../images/ctyun-loading.gif') !important;background-repeat: no-repeat;background-size: 80px 80px;height: 100px;width: 100%;background-position: center;top: 40%;}.el-loading-spinner .circular {/*隐藏 默认的 loading 动画*/display: none !important;}.el-loading-spinner .el-loading-text{margin-top: 100px !important;}.el-icon-loading:before{/*隐藏 默认的 loading 动画*/display: none !important;}
}
  1. main.ts中引入css文件 ,避免样式不生效
import '@/assets/css/el-loading.scss'

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

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

相关文章

(第8天)保姆级 PL/SQL Developer 安装与配置

PL/SQL Developer 安装与配置(第8天) 咱们前面分享了很多 Oracle 数据库的安装,但是还没有正式使用过 Oracle 数据库,怎么连接 Oracle 数据库?今天就来讲讲我学习中比较常用的 Oracle 数据库连接工具:PL/SQL DEVELOPER。 PL/SQL Developer 的安装和配置对于新手来说还是…

Unity 射线检测(Raycast)检测图层(LayerMask)的设置

目录 主要内容 拓展: 主要内容 Raycast函数有很多重载(函数的重载根据函数的参数来决定) 这里只涉及这个重载,其余重载可以很方便得在Visual Studio中看源码获取; public static bool Raycast(Vector3 origin, Vector3 direction, out RaycastHit hit…

链游成为蓝海,潮游世界开创未来新时代

区块链、元宇宙浪潮来袭,为数字世界开启崭新的大门,一场链游模式的范式革命正在发生! 未来,元宇宙中,链游将成为中坚力量。 潮游世界抢占时代先机,利用区块链技术的去中心化和数字资产的不可替代性&#x…

设计原则 | 接口隔离原则

一、接口隔离原则 1、原理 客户端不应该依赖它不需要的接口,即一个类对另一个类的依赖应该建立在最小的接口上。如果强迫客户端依赖于那些它们不使用的接口,那么客户端就面临着这个未使用的接口的改变所带来的变更,这无意间导致了客户程序之…

【MySQL】MySQL库的操作

MySQL库的操作 一、创建数据库创建数据库案例字符集和校验规则校验规则对数据库的影响 二、操纵数据库1、查看数据库2、查看当前正在使用的数据库3、使用数据库4、显示创建语句5、数据库删除6、数据库的修改7、备份和恢复8、查看连接情况 一、创建数据库 创建数据库的语法如下…

计网 - TCP扫盲

文章目录 知识点TCP头格式TCP有限状态机(FSM)为何需要TCP协议TCP的定义TCP连接的概念如何唯一确定一个TCP连接TCP vs UDPTCP拥塞控制TCP流量控制 导图 知识点 TCP头格式 TCP头部包含多个字段,其中一些是必需的,而另一些是可选的…

MySQL笔记-第18章_MySQL8其它新特性

视频链接:【MySQL数据库入门到大牛,mysql安装到优化,百科全书级,全网天花板】 文章目录 第18章_MySQL8其它新特性1. MySQL8新特性概述1.1 MySQL8.0 新增特性1.2 MySQL8.0移除的旧特性 2. 新特性1:窗口函数2.1 使用窗口…

机器人说明书---名词解释017课_C++语言_多态

目录 多态基类被派生为两个类编译器看的是指针的内容 视频讲解 多态 多态按字面的意思就是多种形态。当类之间存在层次结构,并且类之间是通过继承关联时,就会用到多态。 C 多态意味着调用成员函数时,会根据调用函数的对象的类型来执行不同的…

数据结构实验任务八:排序算法的实现与分析

问题描述 统计成绩:给出 n 个学生的考试成绩表,每条信息由姓名和分数组成,试设 计一个算法: 1.按分数高低次序,打印出每个学生在考试中获得的名次,分数相同的为同 一名次; 2.按名次列出每个学生…

性能优化 vue2/vue3 通过CDN 减少项目启动时间

其实更多可以通过压缩图片等文件大小 也会让项目运行快一些 以及尽量使用异步或者懒加载 使用CDN可以避免在项目中使用npm导入Vue的依赖项&#xff0c;从而减少项目启动时的加载时间 使用方法如下 <!-- Vue 2 --> <script src"https://cdn.jsdelivr.net/npm/vue…

前端:兼容 cookie 和 localStorage 类,且可设置过期时限

前言 兼容 Cookie 和 localStorage 两种方式&#xff0c;且都可设置过期时限&#xff1b; 初始化 init(type, timeOut) 参数 名称类型描述typeString存储方式。支持 2 种类型&#xff1a;cookie&#xff08;存储值最大为 4KB&#xff09;、localStorage(存储值最大为 5M)t…

解码大语言模型奥秘:《大规模语言模型:从理论到实践》震撼上市!

2022年11月&#xff0c;ChatGPT的问世展示了大模型的强大潜能&#xff0c;对人工智能领域有重大意义&#xff0c;并对自然语言处理研究产生了深远影响&#xff0c;引发了大模型研究的热潮。 距ChatGPT问世不到一年&#xff0c;截至2023年10月&#xff0c;国产大模型玩家就有近2…

(1)(1.7) HOTT telemetry

文章目录 前言 1 布线和设置 2 参数说明 前言 Plane-4.0.0&#xff08;及更高版本&#xff09;、Copter-4.0.4&#xff08;及更高版本&#xff09;和 Rover-4.1.0&#xff08;及更高版本&#xff09;支持 Graupner HOTT 遥测技术。 1 布线和设置 与自动驾驶仪的连接可通过…

常用的线程锁

常用的锁 互斥锁&#xff08;Mutex Lock&#xff09; 用于保护共享资源&#xff0c;一次只允许一个线程访问共享资源&#xff0c;其他线程需要等待锁释放后才能访问。互斥锁是最常见的锁类型&#xff0c;用于避免多个线程同时访问共享资源而导致的数据竞争和不一致性。 读写锁…

C#基础——数组Array、数组API

C#基础——数组Array、数组API 1、数组&#xff1a;按照指定顺序存储指定数量的相同类型的值 声明数组 // 数组的长度根据存储值的数量进行自动推断int[] ints1 new int[] { 2, 4, 6, 8 };//可以简写为int[] ints2 { 2, 4, 6, 8 };// 定义数组时&#xff0c;指定数组长度in…

小间距LED显示屏的芯片扮演的关键角色

LED屏幕由数万颗灯珠封装而成&#xff0c;包含驱动芯片、PCB板、电阻、电容、模组套件和箱体等&#xff0c;形成一块高清LED显示屏。芯片的质量直接影响整个屏幕的品质、稳定性和性能。那么&#xff0c;什么是细间距LED显示屏&#xff1f;小间距LED显示屏芯片具体有何作用呢&am…

react-router-dom v6中优雅处理404重定向问题

在基于React的单页面应用&#xff08;SPA&#xff09;中&#xff0c;使用 react-router-dom 库来管理路由是一项关键任务。当用户访问一个不存在的页面时&#xff0c;我们通常希望能够以优雅的方式处理404情况&#xff0c;从而提升用户体验。本文将探讨如何在React应用中使用re…

OpenAI 承认 ChatGPT 最近确实变懒,承诺修复问题

文章目录 一. ChatGPT 指令遵循能力下降引发用户投诉1.1 用户抱怨回应速度慢、敷衍回答、拒绝回答和中断会话 二. OpenAI 官方确认 ChatGPT 存在问题&#xff0c;展开调查三. OpenAI 解释模型行为差异&#xff0c;回应用户质疑四. GPT-4 模型变更受人事动荡和延期影响 一. Chat…

【小沐学Python】Python实现语音识别(Whisper)

文章目录 1、简介1.1 whisper简介1.2 whisper模型 2、安装2.1 whisper2.2 pytorch2.3 ffmpeg 3、测试3.1 命令测试3.2 代码测试&#xff1a;识别声音文件3.3 代码测试&#xff1a;实时录音识别 4、工具4.1 WhisperDesktop4.2 Buzz4.3 Whisper-WebUI 结语 1、简介 https://gith…

Python 自动化之修理excel文件(二)

批量合成excel文档Pro版 文章目录 批量合成excel文档Pro版前言一、做成什么样子二、基本架构三、库输入模块四、用户输入模块五、数据处理模块1.获取当前目录的文件信息2.创建Workbook实例对象3.遍历entries列表4.获取Excel文件的工作表信息5.命名和写入数据 六、数据输出模块1…