test/element
1
0
Fork 0
mirror of https://gitee.com/ElemeFE/element.git synced 2024-12-02 04:08:10 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

Loading: fix loading not disappear in some condition (#9313)

Browse Source
This commit is contained in:
FuryBean 2018-01-18 11:44:19 +08:00 committed by 杨奕
parent f32fe6ae72
commit 23a60a0ef6
4 changed files with 43 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
examples/index.tpl
View File

@ -8,12 +8,12 @@
<title>Element</title>
</head>
<body>
<div id="app"></div><% if (process.env.NODE_ENV === 'production') { %>
<script>
if (!window.Promise) {
document.write('<script src="//cdn.jsdelivr.net/npm/es6-promise@4.1.1/dist/es6-promise.min.js"><\/script><script>ES6Promise.polyfill()<\/script>')
}
</script>
<div id="app"></div><% if (process.env.NODE_ENV === 'production') { %>
<script src="//cdn.jsdelivr.net/npm/vue@2.5.2/dist/vue.runtime.min.js"></script>
<script src="//cdn.jsdelivr.net/npm/vue-router@2.7.0/dist/vue-router.min.js"></script><% } %>
</body>

7
packages/loading/src/directive.js
View File

@ -1,6 +1,7 @@
import Vue from 'vue';
import Loading from './loading.vue';
import { addClass, removeClass, getStyle } from 'element-ui/src/utils/dom';
import afterLeave from 'element-ui/src/utils/after-leave';
const Mask = Vue.extend(Loading);
exports.install = Vue => {
@ -36,8 +37,7 @@ exports.install = Vue => {
}
});
} else {
if (el.domVisible) {
el.instance.$once('after-leave', _ => {
afterLeave(el.instance, _ => {
el.domVisible = false;
const target = binding.modifiers.fullscreen || binding.modifiers.body
? document.body
@ -45,11 +45,10 @@ exports.install = Vue => {
removeClass(target, 'el-loading-parent--relative');
removeClass(target, 'el-loading-parent--hidden');
el.instance.hiding = false;
});
}, 300, true);
el.instance.visible = false;
el.instance.hiding = true;
}
}
};
const insertDom = (parent, el, binding) => {
if (!el.domVisible && getStyle(el, 'display') !== 'none' && getStyle(el, 'visibility') !== 'hidden') {

5
packages/loading/src/index.js
View File

@ -1,6 +1,7 @@
import Vue from 'vue';
import loadingVue from './loading.vue';
import { addClass, removeClass, getStyle } from 'element-ui/src/utils/dom';
import afterLeave from 'element-ui/src/utils/after-leave';
import merge from 'element-ui/src/utils/merge';
const LoadingConstructor = Vue.extend(loadingVue);
@ -22,7 +23,7 @@ LoadingConstructor.prototype.close = function() {
if (this.fullscreen) {
fullscreenLoading = undefined;
}
this.$on('after-leave', _ => {
afterLeave(this, _ => {
const target = this.fullscreen || this.body
? document.body
: this.target;
@ -32,7 +33,7 @@ LoadingConstructor.prototype.close = function() {
this.$el.parentNode.removeChild(this.$el);
}
this.$destroy();
});
}, 300);
this.visible = false;
};

27
src/utils/after-leave.js Normal file
View File

@ -0,0 +1,27 @@
/**
* Bind after-leave event for vue instance. Make sure after-leave is called in any browsers.
*
* @param {Vue} instance Vue instance.
* @param {Function} callback callback of after-leave event
* @param {Number} speed the speed of transition, default value is 300ms
* @param {Boolean} once weather bind after-leave once. default value is false.
*/
export default function(instance, callback, speed = 300, once = false) {
if (!instance || !callback) throw new Error('instance & callback is required');
let called = false;
const afterLeaveCallback = function() {
if (called) return;
called = true;
if (callback) {
callback.apply(null, arguments);
}
};
if (once) {
instance.$once('after-leave', afterLeaveCallback);
} else {
instance.$on('after-leave', afterLeaveCallback);
}
setTimeout(() => {
afterLeaveCallback();
}, speed + 100);
};