github
/
element
mirror of https://github.com/ElemeFE/element
1
0
Fork 0
Code Issues Releases Wiki Activity

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

pull/9329/merge
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> <title>Element</title>
</head> </head>
<body> <body>
<div id="app"></div><% if (process.env.NODE_ENV === 'production') { %>
<script> <script>
if (!window.Promise) { 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>') document.write('<script src="//cdn.jsdelivr.net/npm/es6-promise@4.1.1/dist/es6-promise.min.js"><\/script><script>ES6Promise.polyfill()<\/script>')
} }
</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@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><% } %> <script src="//cdn.jsdelivr.net/npm/vue-router@2.7.0/dist/vue-router.min.js"></script><% } %>
</body> </body>

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

@ -1,6 +1,7 @@
import Vue from 'vue'; import Vue from 'vue';
import Loading from './loading.vue'; import Loading from './loading.vue';
import { addClass, removeClass, getStyle } from 'element-ui/src/utils/dom'; import { addClass, removeClass, getStyle } from 'element-ui/src/utils/dom';
import afterLeave from 'element-ui/src/utils/after-leave';
const Mask = Vue.extend(Loading); const Mask = Vue.extend(Loading);
exports.install = Vue => { exports.install = Vue => {
@ -36,8 +37,7 @@ exports.install = Vue => {
} }
}); });
} else { } else {
if (el.domVisible) { afterLeave(el.instance, _ => {
el.instance.$once('after-leave', _ => {
el.domVisible = false; el.domVisible = false;
const target = binding.modifiers.fullscreen || binding.modifiers.body const target = binding.modifiers.fullscreen || binding.modifiers.body
? document.body ? document.body
@ -45,11 +45,10 @@ exports.install = Vue => {
removeClass(target, 'el-loading-parent--relative'); removeClass(target, 'el-loading-parent--relative');
removeClass(target, 'el-loading-parent--hidden'); removeClass(target, 'el-loading-parent--hidden');
el.instance.hiding = false; el.instance.hiding = false;
}); }, 300, true);
el.instance.visible = false; el.instance.visible = false;
el.instance.hiding = true; el.instance.hiding = true;
} }
}
}; };
const insertDom = (parent, el, binding) => { const insertDom = (parent, el, binding) => {
if (!el.domVisible && getStyle(el, 'display') !== 'none' && getStyle(el, 'visibility') !== 'hidden') { 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 Vue from 'vue';
import loadingVue from './loading.vue'; import loadingVue from './loading.vue';
import { addClass, removeClass, getStyle } from 'element-ui/src/utils/dom'; 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'; import merge from 'element-ui/src/utils/merge';
const LoadingConstructor = Vue.extend(loadingVue); const LoadingConstructor = Vue.extend(loadingVue);
@ -22,7 +23,7 @@ LoadingConstructor.prototype.close = function() {
if (this.fullscreen) { if (this.fullscreen) {
fullscreenLoading = undefined; fullscreenLoading = undefined;
} }
this.$on('after-leave', _ => { afterLeave(this, _ => {
const target = this.fullscreen || this.body const target = this.fullscreen || this.body
? document.body ? document.body
: this.target; : this.target;
@ -32,7 +33,7 @@ LoadingConstructor.prototype.close = function() {
this.$el.parentNode.removeChild(this.$el); this.$el.parentNode.removeChild(this.$el);
} }
this.$destroy(); this.$destroy();
}); }, 300);
this.visible = false; 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);
};