Elements-plus中loading加载.....

已于 2023-04-24 17:04:15 修改
阅读量961 收藏 1
点赞数
文章标签： css css3 前端
于 2023-04-24 16:15:49 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_39175450/article/details/130345501
版权

问题描述：
导出文件接口用时过长时，希望通过一个loading的遮罩层来阻止用户在导出过程中进行其他操作，
但是由于页面数据过多，loading的loading图标和文字显示不在可视范围内，而在整个页面的中间，如图：
在这里插入图片描述

需求：将加载中的图标和文字显示在可视页面的中间范围，样式可以自定义
（1）第一步：在需要做遮罩层的元素上添加如下代码
在这里插入图片描述
（2）第二步：在样式中设置自定义样式
在这里插入图片描述

完成了,如图显示
在这里插入图片描述

菜鸟在食堂
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
element-plus el-loading 图标修改
g7778的博客
07-20 2287
学习
elementui自定义loading图标
想好了再写！
07-11 3016
二、在main.js中引入mycss.css(注意此样式需要放在elementui样式后面)
Vue3+Element Plus 按需加载loading以服务方式调用不生效问题
最新发布
蜡笔小星的博客
04-30 511
【代码】Vue3+Element Plus 按需加载loading问题。
vue使用elementPlus ui框架，如何给Dialog 对话框添加Loading 自定义类名显示隐藏
技术前端，忠于热爱 @回忆哆啦没有A梦
03-12 1668
vue使用elementPlus ui框架时，如何给Dialog 对话框添加Loading 自定义类名，想要实现dialog对话框区域有loading效果，其他区域没有。
element plus 使用 icon 图标(两种方式)
热门推荐
前端技术
02-09 1万+
element plus 使用 icon 图标(两种方式)
Element Plus中的注意事项
m13012606980的专栏
07-28 1242
Element Plus中的注意事项
NIS-Elements AR快速手册.pdf
01-18
尼康显微镜 NIS-Elements AR快速手册
Repeat-elements-arranged-issue.zip_Arranged_site:www.pudn.com
09-19
设集合R={r1,r2,...,rn}是要进行排列的n个元素，其中r1,r2,...,rn可能相同。 试着设计一个算法，列出R的所有不同排列。 即，给定n以及待排的n个可能重复的元素。计算输出n个元素的所有不同排列。
Karabiner-Elements-12.9.0.dmg.zip
05-23
下载并安装包含在“Karabiner-Elements-12.9.0.dmg”文件中的软件后，只需按照引导步骤进行配置，即可开始你的个性化键盘之旅。Karabiner-Elements内置了许多预设的配置，也可以从社区获取更多用户分享的配置方案。 ...
Karabiner-Elements-12.9.0.dmg
03-01
Karabiner-Elements-12.9.0.dmg
PyPI 官网下载 | tripleo-puppet-elements-14.0.0.tar.gz
01-17
《PyPI官网下载：tripleo-puppet-elements-14.0.0.tar.gz解析》 在Python的世界中，PyPI（Python Package Index）是官方的软件仓库，它提供了丰富的Python库供开发者下载和使用。资源"tripleo-puppet-elements-...
基于element-plus全局封装Loading
qq_35214930的博客
09-05 1306
【代码】基于element-plus全局封装Loading。
踩坑日记2-Element Plus 按需加载 loading 加载样式问题
m0_67392126的博客
03-07 3559
起因 因为最近在学习 Vue3 + ts, UI库 选择了 Element Plus 但是我发现 按照Element官方 文档 按需引入 loading 的样式不起效果 文档链接 在做了相关配置后 但我在使用时发现loading样式没有生效(el-button 样式是有的 看图)， class 是添加上了，我就疑问样式去哪了？ 查找问题 首页看 el-button 源码， 好家伙一大堆 看不懂 那就先不看 el-button 去看 el-loading 源码，el-loading 代码就少很多了 不到
element-plus 中loading 自定义图片
加油小伙子
09-03 2542
<el-table v-loading="loading" element-loading-text="拼命加载中..." style="width: 100%"> </el-table> .el-table { height: 150px; .el-loading-spinner { background: url('/imgs/loading-svg/loading-bars.svg') no-repeat cente.
element的Loading 加载设置“加载“的位置始终居中
那朵花的博客
12-14 7521
问题描述，给页面设置加载中的样式，但是由于数据量很大，数据在逐步渲染的同时，页面高度也随之变高，出现竖向滚动条，这时候的加载中的那个“圈圈”也跟着页面滚走了，显示如下 解决办法：我是投机取巧的方法，如果有更好的方法，欢迎留言告诉我~ 首先，我设置一个没什么用的div，然后让它的高度和宽度正好盖住页面； 然后，将v-loading的事件放在这个div上，将div的设为position: absolute，这样不占用空间，不影响页面其他布局 注意，高度要动态获取，不然换一个显示器，就不能刚好完.
Tauri+Element-plus loading组件
豪先生的博客
12-16 356
【代码】Tauri+Element-plus loading组件。
【Vue3-ElementPlus】关于v-loading不生效以及控制台输出[Vue warn]: Failed to resolve directive: loading 的问题
weixin_44733774的博客
12-11 3067
在main.js中导入ElLoading组件，并在app应用实例挂载app.mount之前加上一条指令注册语句，然后v-loading指令就能正常使用了。
vue3 使用element-plus 图标不显示问题
m0_59013395的博客
04-07 372
最后一定要记得components写出来！我当时就漏了把Lock标签导入，捣鼓半个小时才发现，害。import引入你要导入图标 比如我要导入这两个图标。最最最最重要的一部来了，我就捣鼓了半个小时。然后后在main.js文件导入。
Element PLUS 弹窗关闭Loading加载
BangD的博客
12-21 1009
text: '正在退出预览，请稍后...',需要放在before-close事件中。异步任务执行完成后关闭加载框；
label[:, -1, ...]
04-04
This code selects all elements in the last dimension of a NumPy array `label` that are in the last but one dimension. The `:` specifies that all elements in the first dimension and the second-to-last dimension should be selected. The `-1` index specifies the last element in the second-to-last dimension. The `...` is a shorthand in NumPy for selecting all remaining dimensions. For example, if `label` is a 3-dimensional array with shape `(2, 3, 4)`, then `label[:, -1, ...]` will select all elements in the last dimension that are in the second-to-last dimension, resulting in an array of shape `(2, 4)`.

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值