ElemeFE / ElemeFE/element

[bug report] loading component document description error

Open
#21,284 1 comment 0 reactions 0 assignees View on GitHub
component: loading status: discussion type: bug
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.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.