v-loading在可变高度元素上使用

最新推荐文章于 2024-07-24 14:58:19 发布

bian2021

最新推荐文章于 2024-07-24 14:58:19 发布

阅读量1.2k

点赞数 5

分类专栏：随笔文章标签： vue.js

本文链接：https://blog.csdn.net/bian2021/article/details/120133886

版权

随笔专栏收录该内容

5 篇文章 0 订阅

订阅专栏

v-loading在可变高度元素上使用时，元素出现竖向滚动条时，loading无法全覆盖此时可用v-loading.body指令即可

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

bian2021

关注关注

5
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
v-loading在可变高度元素上使用

v-loading在可变高度元素上使用时，元素出现竖向滚动条时，loading无法全覆盖此时可用v-loading.body指令即可
复制链接

扫一扫

专栏目录

内容loading加载后高度变化

taotaomin99的博客

06-15

1302

在家是今天的笔记之前，昨天…啊不，前天，帅微博的时候刷到一段话，蛮对口的，分享一下：与影立黄昏，问釜温清粥捻灯共熄芯，书生还书生夜静伴春眠，共饮清风醉朝起何相思，大梦何前尘抬手摘星月，冷茶知我味妄我言中泪，独路他人愁回首无萧瑟，逍遥自在灯火阑珊处 …完毕，进入笔记阶段，对就这么生硬…..现在web技术不断发展，视图与数据渲染更多由前端呈现，后台更多与数据打交道。于是，我们会经常看到这样的交互场景。页

解决v-loading无法遮盖长页面的问题

weixin_39144398的博客

07-26

1644

v-loading遮盖长页面

参与评论您还未登录，请先登录后发表或查看评论

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

weixin_42646650的博客

08-18

696

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

v-loading

诗酒趁年华

05-30

1931

https://blog.csdn.net/qq_36437172/article/details/83618051

v-loading使用(来自官网介绍)

热门推荐

sherpan的博客

07-31

6万+

记录使用Element-UI的v-loading指令。Element提供了两种调用Loading的方法：指令和服务。指令对于自定义指令 v-loading，只需要绑定 Boolean即可，默认情况下，loading遮罩会插入到绑定元素的子节点通过添加 body修饰符，可以使遮罩插入至DOM中的body上。自定义加载文案、图标和背景色在绑定了v-loading指令的元素上添加elemen...

elementUI loading效果有滚动条时，滚动后遮罩无效

baolinDesign的博客

07-31

1144

2,修改css 样式，给loding遮罩层的div样式修改成 postion:fixed，这样也可以，但是需要在全局修改，不推荐使用！1，可能loading组件的高度不是100% ，经过查看，高度已经是100%了。给正在loading状态的页面禁止滚动 overflow: hidden;2，查看element ui 组件是否有自适应的设置字段 - 无。3，能不能让当前的页面不滚动，当请求完后再滚动 – 可以。

页面出现滚动条，导致element-ui的loading遮罩不全

Biligege的博客

03-23

1257

页面出现滚动条，导致element-ui的loading遮罩不全。

vue-loading:用于在客户端请求时阻塞

08-04

npm i --save vuejs-loading-screen 用法 import Vue from 'vue' import loading from 'vuejs-loading-screen' Vue . use ( loading ) < h1>Welcome to VueLoading Screen < script > export default {...

loading-on-button:允许在按钮元素上切换加载状态的指令

05-30

button class =" btn btn-primary " awelzijn-loading-on-button =" ctrl.loading " data-loading-text =" Bezig met laden " > Test </ button > < button class =" btn btn-danger " awelzijn-...

Vue中的无限加载vue-infinite-loading的方法

08-27

使用vue-infinite-loading可以在页面中应用，直接在组件中声明components:{ InfiniteLoading }，然后在模板部分使用 `<infinite-loading>` 标签。模板部分： ``` <infinite-loading @infinite="infiniteHandler"> ...

弹出层遮罩层效果(包括居中、不随滚动条滚动)

03-07

弹出层遮罩层效果(包括居中、不随滚动条滚动)

vue-infinite-loading2.0 中文文档详解

12-07

该插件提供了友好的移动端支持，可与任何可滚动元素兼容，并且支持自定义加载动画，加载后能展示加载结果，同时支持双向无限滚动。 ### 安装与导入在安装Vue-Infinite-Loading2.0时，需确保你的项目是基于Vue.js ...

react-loading:用于加载动画的React组件

05-28

易于使用的为React项目加载动画。使用Brent Jackson的项目中的SVG动画。安装 npm i react-loading 或者 yarn add react-loading 演示版检查加载类型空白的球吧台气泡立方体赛龙旋转气泡辐条例子 ...

解决elementui table固定列的时候，滚动条被遮挡无法拖动的问题

yixiaojing527的博客

05-23

1135

另外解决高度错位也有样式代码,请看如下。在页面加上以上样式就OK了。

Element UI三十三Loading加载

海恩的博客

11-28

1449

简介在Element中，并没有提供组件用于加载，而是通过指令或服务的方法调用Loading。指令指的是v-loading，它需要绑定一个Boolean。默认情况下，Loading遮罩会插入到绑定元素的子节点，若添加body修饰符则可以使遮罩插入DOM中的body上。 <el-table v-loading="loading" :data="tableData" style="width: 100%;"> <el-table-column pro

vue -无限加载功能-区分滚动条的位置

weixin_38245947的博客

08-27

132

滚动条距离底部200px时，开启ajax请求 1. 出现在body的滚动条 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-sc

解决弹窗遮罩层在拉滚动条发现遮罩层没铺满屏幕的问题

yingzizizizizizzz的专栏

05-31

1万+

在做项目时，用到了弹出框，下边要有一层遮罩。写了一个简单的遮罩，拉动滚动条后发现，遮罩层只是遮住了视口，下面看不到根本没遮住，后来经过度娘后才有了解决方法。有问题的遮罩层代码 .modal .modal-shadow { opacity: 0.3; filter: alpha(opacity=30); background-color: gray; position: absolut

vue使用vue-lazyload图片懒加载并且设置loading大小

u012500054的博客

06-03

6908

npm install vue-lazyload --save import { VueLazyload } from 'vue-lazyload' vue.use(VueLazyload, { preLoad: 1.3, attempt: 2, error: require('../img/icons/error.png'), loading: require('../img/icons/loading.png') // 注意路径使用require（我这里使用相对路径） }) // img使用v

vue3——利用自定义指令实现下拉框分页懒加载

最新发布

zmy967131的博客

07-24

428

vue3——利用自定义指令实现下拉框分页懒加载

v-loading的使用

08-31

v-loading是基于Vue.js的一个指令，用于在异步加载数据时显示加载动画。使用v-loading可以提升用户体验，让用户知道数据正在加载中。以下是v-loading的基本用法： 1. 在Vue组件中，先引入v-loading的样式文件： ```html <style> .v-loading-mask { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(255, 255, 255, 0.7); display: flex; justify-content: center; align-items: center; z-index: 9999; } .v-loading-spinner { width: 40px; height: 40px; border-top: 4px solid #ccc; border-right: 4px solid transparent; border-radius: 50%; animation: rotate 1s linear infinite; } @keyframes rotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } </style> ``` 2. 在需要显示加载动画的元素上，使用v-loading指令： ```html <template> <div v-loading="loading">  </div> </template> <script> export default { data() { return { loading: false // 控制加载动画的显示与隐藏 }; }, mounted() { this.loading = true; // 在异步操作开始之前显示加载动画 // 异步操作，例如请求后端数据 fetchData() .then(() => { // 异步操作完成后隐藏加载动画 this.loading = false; }); } }; </script> ``` 在上述代码中，v-loading指令的参数为loading，loading的值为true时显示加载动画，为false时隐藏加载动画。在mounted钩子函数中可以根据实际需求控制loading的值。这样，在异步操作期间，用户将看到一个加载动画，直到异步操作完成并隐藏加载动画。