Element: [Bug Report] The load state does not disappear after the v-loading switch under ie10/11

[povs2012]

Element UI version

2.0.8

OS/Browsers version

win10/ie10(11)

Vue version

2.5.9

Reproduction Link

https://jsfiddle.net/mmx38qxw/117/

Steps to reproduce

1、源码见链接中，但在jsfiddle中无法复现，需要在本地浏览器中打开
2、v-loading初始化为true，在created或mounted钩子函数中，10-20ms的异步函数中将loading设置为false
3、在ie浏览器中访问页面，loading状态不消失，在谷歌、firefox浏览器中无问题

What is Expected?

loading状态消失

What is actually happening?

loading状态不消失

[element-bot]

Translation of this issue:

Element UI version

2.0.8

OS/Browsers version

Win10/ie10 (11)

Vue version

2.5.9

Reproduction Link

https://jsfiddle.net/mmx38qxw/117/

Steps to reproduce

1. The source code is found in the link but can not be reproduced in jsfiddle, and it needs to be opened in the local browser

2, v-loading is initialized to true, and in the created or mounted hook function, loading is set to false in the asynchronous function of 10-20ms

1. Access to pages in IE browsers, loading status does not disappear, there is no problem in Google, Firefox browsers

What is Expected?

Loading state vanishing

What is actually happening?

Loading state does not disappear

[luozz1994]

我刚刚也遇到这个问题，求解决

[airair]

同样遇到了这个问题,IE11下这个loading无法消失,造成表格没法操作了,不知道有什么规避方案,或者官方是否已经修复了这个bug.

[cdoneshot]

大概看了下，transition的after-leave没有被触发，导致loading不能被正确关闭，我的临时解决方案是手动触发after-leave

Vue.prototype.$loader = {
  instance: null,
  open() {
    this.instance = Loading.service();
  },
  close() {
    this.instance.close();
    // ie11兼容，调用close方法后延时触发一次after-leave
    setTimeout(() => {
      this.instance.$emit('after-leave');
    }, 1000);
  }
}

[kenziD]

同遇到这个问题。而且用在了移动端的微信浏览器，iPhone没有这个问题，但安卓的一些设备会出现这种情况，时有时无，跟ajax请求加载的速度有关系。类比于上述setTimeout延时的时间

[rhinonan]

我也遇到这个问题。根本原因就是 快速的切换v-loading的值导致的。

[cdoneshot]

我也遇到这个问题。根本原因就是快速的切换v-loading的值导致的。

跟快速切换没啥关系，我用的service方式

[kevrousso]

Still have the same problem with ElementUI 2.4.6, on IE11.
Seems like the delay to hide the loading isn't enough sometimes... Works good in standard browsers (Chrome, FF)

FYI, I am using the directive approach (v-loading).

@Leopoldthecoder Any way we can fix this?

[xiaobaichiliangpi]

大概看了下，transition的after-leave没有被触发，导致loading不能被正确关闭，我的临时解决方案是手动触发after-leave

Vue.prototype.$loader = {
  instance: null,
  open() {
    this.instance = Loading.service();
  },
  close() {
    this.instance.close();
    // ie11兼容，调用close方法后延时触发一次after-leave
    setTimeout(() => {
      this.instance.$emit('after-leave');
    }, 1000);
  }
}

请问这个是加在哪儿的啊？