[bug report] loading component document description error
- Dominant language
- Vue
- Stars
- 54k
- Forks
- 14.4k
- PR merge metrics
- No merged PRs in 30d
Description
### Element UI version
2.15.5
### OS/Browsers version
win11 / Chrome 92.0.4515.159
### Vue version
2.6.14
### Reproduction Link
https://codepen.io/hellowsy/pen/KKqzEyB
### Steps to reproduce
文档上对于loading的服务方式关闭介绍如下
let loadingInstance = Loading.service(options);
this.$nextTick(() => { // 以服务的方式调用的 Loading 需要异步关闭
loadingInstance.close();
});
### What is Expected?
显示并关闭
### What is actually happening?
没有显示
查阅github上的官方源码发现
https://github.com/ElemeFE/element/blob/655d89fe0e0d9c4c7c4ca2541f5cf90437690a76/packages/loading/src/index.js
打开组件的visible = true(98行)是放在$nextTick里面的,
关闭组件的visible = false(38行)是放在是在close()方法里面的,销毁组件(27-37行)是放在下一次事件循环settimeout里面的
按照文档上的介绍说明
定义loading时,将visible放在第一次事件循环的微任务队列中,visible = true,
在nexttick中调用close方法,会把close放在第一次事件循环的微任务队列中,visible = false,同时将组件销毁放在下一次的事件循环
如上操作完成后,在第一次事件循环结束开始渲染组件的时候visible其实是false这也就导致了组件不会显示
可能官方人员的意思是要将close方法放在之后的事件循环中
但是这段话确实存在歧义,我也是在看过源码之后才发现端倪
可能理解的不是很透彻,如果我理解错误了请指正,祝越来越棒~
Contributor guide
No contributing guide indexed for this repository
Assessment
This issue has not been assessed yet.