elementUI loading效果有滚动条时,滚动后遮罩无效
这个问题通常是因为Element UI的Loading遮罩通常是在整个body上添加的,而当出现滚动条时,其遮罩可能只覆盖当前视口的高度,不会覆盖整个body的高度。
解决方法:
- 使用全屏遮罩:Element UI的Loading组件通常会自动处理全屏遮罩的问题。确保你使用的是最新版本的Element UI,并且正确地调用了Loading方法。
- 自定义遮罩样式:如果全屏遮罩仍然不起作用,你可以尝试自定义遮罩的样式,确保其高度覆盖整个页面,即使有滚动条的情况。
- 使用全局遮罩组件:如果Element UI的Loading不够用,你可以考虑使用一个全局的遮罩组件,例如一个全屏的
div
,通过控制其显示和隐藏来实现类似的效果。
示例代码:
// 引入Element UI的Loading服务
import { Loading } from 'element-ui';
// 在需要显示全屏遮罩的时候
const loadingInstance = Loading.service({
lock: true, // 是否锁定body的滚动
text: '加载中', // 显示的文本
background: 'rgba(0, 0, 0, 0.7)' // 遮罩的背景色
});
// 在数据加载完毕后关闭遮罩
loadingInstance.close();
确保在调用Loading.service
时传递正确的选项,以确保全屏遮罩可以正确显示。如果问题依然存在,可能需要检查是否有其他CSS样式影响了遮罩的显示。
评论已关闭