关于Loading指令里对Position的处理

来源：2-12 v-loading 自定义指令的优化

VyingGao

2021-08-26

跟着老师敲了基本功能代码以后，去测试了下，发现因为我的Loading组件样式和老师源码不一样，导致Loading组件插入的时候，是插入在后面的，前面的Scroll组件占据了整个屏幕了，所以导致Loading组件不可见。然后我就觉得，设置Loading组件全屏，盖住前面的内容就可以了。我不是很理解，Loading里为什么要做对Position的处理？

写回答

2回答

ustbhuangyi

2021-08-29

Loading 指令是一个通用的指令，需要考虑各种场景，比如

//img.mukewang.com/szimg/612a5ed409be9eb206160436.jpg

显然，当指令用在这个下拉框的时候，由于 Loading 组件本身是绝对定位，显然需要作用的元素是一个非 Static 的定位。

ustbhuangyi

2021-08-26

Loading 指令主要就是要相对于作用指令的元素居中的，但你不能保证作用指令的元素的 Position 不为 static，所以要设置它。

VyingGao

我测试了下，如果不用Scroll组件，就是原生滚动，Recommend什么样式也不设，然后对Loading组件设置样式：position:absolute; top:0; left:0; width:100%; height:100%; ，加上又是追加在最后，就基本可以做到占满全屏，感觉没有什么异常。就算使用了Scroll组件，把Recommend和Scroll样式都干掉，或者就把Position样式去掉，感觉也没啥异常。我实在看不出有什么潜在的Bug，也不是很理解跟目标元素的Position有什么直接影响。

2021-08-28

共1条回复

Vue3开发企业级音乐Web App 明星讲师带你学大厂代码

慕课网明星讲师黄轶深度讲解 Vue3.0 ，提升的不止是Vue代码能力

2223 学习 · 1002 问题

查看课程

相似问题

自定义指令触发多次

回答 1

关于loading 定义

回答 1

多个自定义指令问题！

回答 1

关于接口的错误处理

回答 1

loading显示时机问题如何优化

回答 1

打开慕课网App查看更多内容