v-loading在可变高度元素上使用(超出父级元素时，loading遮罩未完全覆盖)

最新推荐文章于 2024-02-05 14:29:03 发布
原创 最新推荐文章于 2024-02-05 14:29:03 发布 · 1.1k 阅读 · 2 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue.js #前端

文章讨论了在父级元素设置overflow为auto，子元素高度超出时如何使用v-loading实现滚动到顶部且loading未完全覆盖的问题，提出使用v-loading.body指令作为解决方案，并介绍了相关参数设置。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

v-loading在可变高度元素上使用(超出父级元素时，loading未完全覆盖)

父级元素设置overflow:auto;子级元素高度超过父级元素时，子级元素滚动到上方，调用loading,此时loading遮罩未完全覆盖

如下图：
在这里插入图片描述
解决方法

父级元素使用v-loading.body指令即可

v-loading 参数
在这里插入图片描述

吾谓谁？
关注
CSS3 实现Loading加载，页面遮罩层的应用
08-03
在移动H5领域，用户体验是至关重要的，而Loading加载和页面遮罩层是提升用户体验的两个关键元素。本文将深入探讨如何使用CSS3来实现这两种功能，并解释它们在实际应用场景中的重要性。 首先，让我们来了解什么是...
JS基于Ajax实现的网页Loading效果代码
10-23
加载效果在现代网页设计中是必不可少的元素，尤其是在进行长时间运行的后端交互操作时，可以有效改善用户的等待体验。 首先，我们了解到的关键知识点是，实现网页Loading效果的代码主要涉及以下几个方面： 1. 使用...
v-loading在可变高度元素上使用
bian2021的博客
09-06 1489
v-loading在可变高度元素上使用时，元素出现竖向滚动条时，loading无法全覆盖此时可用v-loading.body指令即可
解决v-loading无法遮盖长页面的问题
weixin_39144398的博客
07-26 1900
v-loading遮盖长页面
elementUI loading效果有滚动条时，滚动后遮罩无效
baolinDesign的博客
07-31 1786
2,修改css 样式， 给loding遮罩层的div样式 修改成 postion:fixed，这样也可以，但是需要在全局修改，不推荐使用！1，可能loading组件的高度不是100% ，经过查看，高度已经是100%了。给正在loading状态的页面禁止滚动 overflow: hidden;2，查看element ui 组件是否有自适应的设置字段 - 无。3，能不能让当前的页面不滚动，当请求完后再滚动 – 可以。
页面出现滚动条，导致element-ui的loading遮罩不全
Biligege的博客
03-23 1685
页面出现滚动条，导致element-ui的loading遮罩不全。
设置v-loading的位置
weixin_63896561的博客
06-20 867
【代码】设置v-loading的位置。
vue3 js 实现v-loading
最新发布
05-14
当指令绑定到元素时，应该在目标元素上添加一个遮罩层，并显示加载动画。当加载完成时，移除这个遮罩层。需要注意的是，遮罩层需要覆盖整个元素，可能需要设置position为relative或absolute，并调整样式。 另外，...
实现EasyUI数据加载时的loading遮罩效果
easyui 在使用过程中提供了诸多便利，其中之一就是能够在数据加载时显示一个加载中（Loading）的遮罩层，用于给用户一个等待的提示，改善用户体验。 #### easyui 中的 loading 遮罩 在实际开发中，为了增强用户...
Unity 实现圆形UI遮罩LOADING
03-29
然后，在遮罩容器下添加一个Image作为进度条，使用圆形Sprite，比如一个填充的圆环。需要将Image的填充类型设置为Radial 360，这样可以通过调整Fill Amount来控制进度显示。 然后，处理动画部分。用户可能希望...
el-loading 未能全屏覆盖
木昆灵寒酥的博客
02-05 478
修改遮罩层样式啦~~
loading遮不住dialog
weixin_43904427的博客
12-24 706
修改el-dialog的z-index，小于loading默认的2000。
v-loading
诗酒趁年华
05-30 2011
https://blog.csdn.net/qq_36437172/article/details/83618051
element的遮罩层v-loading，隐藏上面的文字和图标，添加自定义内容
qq_42376171的博客
05-05 3938
element的遮罩层v-loading，隐藏上面的文字和图标，添加自定义内容 之前有个需求是想要一个遮罩层，项目组件用的是element，想用v-loading，但是上面的图标和文字格式不是我想要的 效果图 思路如下： 1）隐藏自带的文字和图标 2）设置一个div，把该div的图层设置得比v-loading的层级高 页面代码：（把 element-loading-text和element-loading-spinner都设置为空） <span class="dingYue" v-show="loa
Vue element-loading设置加载状态位置
System_Gu的博客
03-23 8687
v-loading位置一直停留在正中间 如果div的高度过长，导致用户进入页面非要下滑才能看到加载状态，导致用户体验极差 这样我们重新写一个div，专门用来显示加载状态 这样用户一进去页面就能看到加载状态，如果想设置到某个指定位置不妨加个绝对定位试试。 ...
v-loading使用(来自官网介绍)
热门推荐
sherpan的博客
07-31 6万+
记录使用Element-UI的v-loading指令。Element提供了两种调用Loading的方法：指令和服务。 指令 对于自定义指令 v-loading，只需要绑定 Boolean即可，默认情况下，loading遮罩会插入到绑定元素的子节点通过添加 body修饰符，可以使遮罩插入至DOM中的body上。 自定义加载文案、图标和背景色 在绑定了v-loading指令的元素上添加elemen...
Vue+antd中关于发送请求时候的Loading遮罩层闪烁无法覆盖问题
CSND7997的博客
06-30 3066
需求：在发送请求的时候需要给全局加loading样式，初步实现在App.vue中直接包裹整个router-view，然后监听vuex中的值，值在封装axios的时候，即请求拦截以及响应请求的时候改变 App.vue <div id="app"> <a-spin :spinning="LOADING_PAGE" size="large"> <router-view /> </a-spin> </div
element的Loading 加载设置“加载“的位置始终居中
那朵花的博客
12-14 8524
问题描述，给页面设置加载中的样式，但是由于数据量很大，数据在逐步渲染的同时，页面高度也随之变高，出现竖向滚动条，这时候的加载中的那个“圈圈”也跟着页面滚走了，显示如下 解决办法：我是投机取巧的方法，如果有更好的方法，欢迎留言告诉我~ 首先，我设置一个没什么用的div，然后让它的高度和宽度正好盖住页面； 然后，将v-loading的事件放在这个div上，将div的设为position: absolute，这样不占用空间，不影响页面其他布局 注意，高度要动态获取，不然换一个显示器，就不能刚好完.
Vue进阶（六十一）：v-loading 实现加载效果及elementUI 中 el-date-picker中弹出的日期和时间的输入框设置为只读
IT全栈 华强工作室
07-11 6万+
在项目开发过程中，需要使用el-date-picker日期控件，需求是elementUI 中 el-date-picker中弹出的日期和时间的输入框设置为只读。在接口未请求到数据之前，显示加载中，直到请求到数据后消失。下的顶层元素上的话，就不会触发全屏。在接口的回调函数中，将。，到达加载动画效果。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值