ElementPlus中 使用ElLoading.service， spinner: ‘el-icon-loading‘不生效

最新推荐文章于 2024-06-25 08:58:06 发布
最新推荐文章于 2024-06-25 08:58:06 发布
阅读量1.2k 收藏 2
点赞数 3
文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44230700/article/details/134765976
版权 
let downloadLoadingInstance = ElLoading.service({ 
	 text: "正在下载数据，请稍候",
	 spinner: 'el-icon-loading', 
	 background: "rgba(0, 0, 0, 0.7)", 
})

使用以上代码时，加载的圆圈出不来，使用f12查看，即使能出来但是颜色也和背景颜色一样。

做法：
把spinner : 'el-icon-loading‘去掉

然后在

.el-loading-spinner .path {
  stroke: rgb(13, 161, 219);
}

亲测有效！不得不说，这个坑很恶心！在这里插入图片描述

Rabbit Coder
关注
  • 3
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 3
    评论
stencil-loading-spinner:加载使用模具创建的微调器组件
05-02
模具加载微调组件Stencil是用于使用Web组件构建快速Web应用程序的编译器。 Stencil将最流行的前端框架的最佳概念组合到编译时而非运行时工具中。 Stencil利用TypeScript，JSX，微小的虚拟DOM层，高效的单向数据绑定...
el-ui 服务方式loading
Erek的前端博客；
06-02 438
el-ui 服务方式loading
ElementUI - 自定义全局 Loading 加载动图 spinner（不使用内置图标而是自定义动态图）
热门推荐
王佳斌
04-30 1万+
前言 ElementUI Loding 组件文档：https://element.eleme.cn/#/zh-CN/component/loading 默认的样式如下图所示，更改加载图标为动态的 GIF 图片。 改为自定义动图，但要注意 底部的提示文字不能再使用了。 实现 使用 服务方式 ，不要使用指令方式。 如下样式，便可覆盖样式达到效果，具体在什么地方使用请看最下面的 示例。 .el-loading-spinner .circular{ width: 42px; height: 4
【区分vue2和vue3下的element UI Loading 加载组件，分别详细介绍属性，事件，方法如何使用，并举例】
最新发布
xiejunlan的博客
06-25 695
首先，需要澄清的是，Element UI 是为 Vue 2 设计的，而 Element Plus 是 Element UI 的 Vue 3 版本。在 Element UI 和 Element Plus 中，并没有一个直接名为 “Loading 加载” 的独立组件。相反，加载效果通常是通过指令、服务或作为其他组件（如按钮、对话框等）的一个属性来实现的。下面我将分别为 Vue 2 的 Element UI 和 Vue 3 的 Element Plus 介绍如何实现加载效果，并解释相关的属性、方法或服务。
Element Plus中的注意事项
m13012606980的专栏
07-28 1253
Element Plus中的注意事项
封装loading
m0_66572664的博客
03-06 276
target: document.querySelector(node),//loading需要覆盖的DOM节点，默认为body。使用： const loading = servicesLoading('.publishDialog', '请求中', true)background: 'rgba(0, 0, 0, 0.7)',//背景色。// spinner: 'el-icon-loading',//加载图标。lock,//同v-loading的修饰符。text: str,//加载文案。
ElLoading实现按钮防重复点击
shujiaxing的博客
05-26 1404
简单记录一下在项目中【使用loading实现按钮防重复点击】的方法。 Element Plus 提供了两种调用 Loading 的方法：指令和服务。 以服务的方式调用Loading： import { ElLoading } from 'element-plus' 定义一个基础配置 const defaultOptions = { lock: true, text: '正在加载', background: 'rgba(0, 0, 0, 0.1)' } 传入一个方法fn,在它执行.
Vue element-ui之Loading 加载
CaseyWei
12-05 4461
Loading 加载：加载数据时显示动效。 Loading 可以以服务的方式调用。 引入 Loading 服务： import { Loading } from 'element-ui'; 在需要调用时： Loading.service(options); 其中 options 参数为 Loading 的配置项，具体见下表。LoadingService 会返回一个 Loading 实例，可通过调用该实例的 close 方法来关闭它： let loadingInstance = Loa
element - - - - - 你不知道的loading使用方式
Dark_programmer的博客
03-15 9509
element - - - - - 你不知道的loading使用方式
element-ui以服务方式调用loading，自定义修改icon
Guoxuxinwen的博客
12-13 1310
调用loading// 添加自定义类名，避免影响页面内部及button的默认loading样式})新建css文件// 自定义icon地址important;top: 40%;.el-loading-spinner .circular {/*隐藏 默认的 loading 动画*/important;important;.el-icon-loading:before{/*隐藏 默认的 loading 动画*/important;
vue中elementUI的Loading.service函数的封装
qq_59717525的博客
07-16 4546
import { Loading } from 'element-ui'; const loadOption={fullscreen: true ,lock: true, text: 'Loading', spinner: 'el-icon-loading', background: 'rgba(0, 0, 0, 0.7)'} let loadingInstance; export default class loadEvents { constructor(vueThis){ .
material-wheel-view：:ferris_wheel:WheelView，例如IOS，以及其他内置的WheelView UI
02-04
将其添加到存储库末尾的root build.gradle中： repositories { maven { url " https://jitpack.io " } } 添加依赖项： dependencies { compile ' com.github.BlackBoxVision:material-wheel-view:v0.0.1 ' ...
react-native-loading-spinner-overlay：React Native加载微调器叠加层
01-30
npm install react-native-loading-spinner-overlay ： yarn add react-native-loading-spinner-overlay 例 有关示例实现，请参见。 选件 属性 类型 默认 描述 可取消 布尔型 false Android ：如果设置为false，...
vue-simple-spinner：适用于Vue.js的简单灵活的微调器
02-06
安装NPM npm install vue-simple-spinner --save用法该组件的所有样式均通过Spinner.vue组件中的计算样式完成，并且不需要外部CSS文件。ES6 以下示例也可以与CommonJS一起使用，方法是将ES6特定的语法替换为CommonJS...
Android第三方开源下拉框NiceSpinner使用详解
01-20
在Android应用开发中，原生的Spinner控件虽然基本能满足大部分需求，但随着用户界面设计的不断升级，开发者们开始寻求更加美观、可定制化的下拉框解决方案。NiceSpinner就是一个非常受欢迎的第三方开源库，它提供了...
ElementUI中LOADING服务无法关闭问题解决
qq_40493736的博客
01-07 994
需要注意的是，以服务的方式调用的全屏 Loading 是单例的：若在前一个全屏 Loading 关闭前再次调用全屏 Loading，此时调用它们中任意一个的 close 方法都能关闭这个全屏 Loading。如果完整引入了 Element，那么上会有一个全局方法$loading，同样会返回一个 Loading 实例。
element-ui 中修改loading加载样式
飞翔༒之翼
05-06 964
加载功能，默认是全屏加载效果。
vue-element 封装loading
m0_70265923的博客
03-21 564
【代码】vue-element 封装loading。
Vue3 + Axios + Element-Plus 实现全局的合并请求loading
小草莓的博客
12-30 5072
utils/loading.ts /** * 全局loading效果：合并多次loading请求，避免重复请求 * 当调用一次showLoading，则次数+1；当次数为0时，则显示loading * 当调用一次hideLoading，则次数-1; 当次数为0时，则结束loading */ import { ElLoading } from 'element-plus'; // 定义一个请求次数的变量，用来记录当前页面总共请求的次数 let loadingRequestCount = 0; /
Vue.prototype.$loading({ lock: true, text: 'Loading', spinner: 'el-icon-loading', background: 'rgba(0, 0, 0, 0.7)' });
04-05
This code creates a global method called `$loading` in Vue's prototype. When called, it shows a loading overlay with a locked background, a text that says "Loading", a spinner icon, and a semi-transparent black background. This is using the `ElementUI` library's loading component.
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Rabbit Coder

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值