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

Loading: use class to set styles

pull/7899/head
Leopoldthecoder 2017-10-31 15:19:11 +08:00 committed by 杨奕
parent 03a52ab38e
commit 633cb30d52
4 changed files with 29 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -39,14 +39,11 @@ exports.install = Vue => {
if (el.domVisible) { if (el.domVisible) {
el.instance.$on('after-leave', _ => { el.instance.$on('after-leave', _ => {
el.domVisible = false; el.domVisible = false;
if (binding.modifiers.fullscreen && el.originalOverflow !== 'hidden') { const target = binding.modifiers.fullscreen || binding.modifiers.body
document.body.style.overflow = el.originalOverflow; ? document.body
} : el;
if (binding.modifiers.fullscreen || binding.modifiers.body) { removeClass(target, 'el-loading-parent--relative');
document.body.style.position = el.originalPosition; removeClass(target, 'el-loading-parent--hidden');
} else {
el.style.position = el.originalPosition;
}
}); });
el.instance.visible = false; el.instance.visible = false;
} }
@ -59,10 +56,10 @@ exports.install = Vue => {
}); });
if (el.originalPosition !== 'absolute' && el.originalPosition !== 'fixed') { if (el.originalPosition !== 'absolute' && el.originalPosition !== 'fixed') {
parent.style.position = 'relative'; addClass(parent, 'el-loading-parent--relative');
} }
if (binding.modifiers.fullscreen && binding.modifiers.lock) { if (binding.modifiers.fullscreen && binding.modifiers.lock) {
parent.style.overflow = 'hidden'; addClass(parent, 'el-loading-parent--hidden');
} }
el.domVisible = true; el.domVisible = true;

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

@ -1,6 +1,6 @@
import Vue from 'vue'; import Vue from 'vue';
import loadingVue from './loading.vue'; import loadingVue from './loading.vue';
import { getStyle } from 'element-ui/src/utils/dom'; import { addClass, removeClass, getStyle } from 'element-ui/src/utils/dom';
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);
@ -23,14 +23,11 @@ LoadingConstructor.prototype.close = function() {
fullscreenLoading = undefined; fullscreenLoading = undefined;
} }
this.$on('after-leave', _ => { this.$on('after-leave', _ => {
if (this.fullscreen && this.originalOverflow !== 'hidden') { const target = this.fullscreen || this.body
document.body.style.overflow = this.originalOverflow; ? document.body
} : this.target;
if (this.fullscreen || this.body) { removeClass(target, 'el-loading-parent--relative');
document.body.style.position = this.originalPosition; removeClass(target, 'el-loading-parent--hidden');
} else {
this.target.style.position = this.originalPosition;
}
if (this.$el && this.$el.parentNode) { if (this.$el && this.$el.parentNode) {
this.$el.parentNode.removeChild(this.$el); this.$el.parentNode.removeChild(this.$el);
} }
@ -88,10 +85,10 @@ const Loading = (options = {}) => {
addStyle(options, parent, instance); addStyle(options, parent, instance);
if (instance.originalPosition !== 'absolute' && instance.originalPosition !== 'fixed') { if (instance.originalPosition !== 'absolute' && instance.originalPosition !== 'fixed') {
parent.style.position = 'relative'; addClass(parent, 'el-loading-parent--relative');
} }
if (options.fullscreen && options.lock) { if (options.fullscreen && options.lock) {
parent.style.overflow = 'hidden'; addClass(parent, 'el-loading-parent--hidden');
} }
parent.appendChild(instance.$el); parent.appendChild(instance.$el);
Vue.nextTick(() => { Vue.nextTick(() => {

10
packages/theme-chalk/src/loading.scss
View File

@ -1,6 +1,16 @@
@import "mixins/mixins"; @import "mixins/mixins";
@import "common/var"; @import "common/var";
@include b(loading-parent) {
@include m(relative) {
position: relative !important;
}
@include m(hidden) {
overflow: hidden !important;
}
}
@include b(loading-mask) { @include b(loading-mask) {
position: absolute; position: absolute;
z-index: 10000; z-index: 10000;

7
test/unit/specs/loading.spec.js
View File

@ -1,3 +1,4 @@
import { getStyle } from '../../../src/utils/dom';
import { createVue, destroyVM } from '../util'; import { createVue, destroyVM } from '../util';
import Vue from 'vue'; import Vue from 'vue';
import LoadingRaw from 'packages/loading'; import LoadingRaw from 'packages/loading';
@ -142,7 +143,7 @@ describe('Loading', () => {
} }
}, true); }, true);
Vue.nextTick(() => { Vue.nextTick(() => {
expect(document.body.style.overflow).to.equal('hidden'); expect(getStyle(document.body, 'overflow')).to.equal('hidden');
vm.loading = false; vm.loading = false;
document.body.removeChild(document.querySelector('.el-loading-mask')); document.body.removeChild(document.querySelector('.el-loading-mask'));
document.body.removeChild(vm.$el); document.body.removeChild(vm.$el);
@ -197,7 +198,7 @@ describe('Loading', () => {
expect(mask.parentNode).to.equal(container); expect(mask.parentNode).to.equal(container);
loadingInstance.close(); loadingInstance.close();
setTimeout(() => { setTimeout(() => {
expect(container.style.position).to.equal('relative'); expect(getStyle(container, 'position')).to.equal('relative');
done(); done();
}, 200); }, 200);
}); });
@ -243,7 +244,7 @@ describe('Loading', () => {
it('lock', () => { it('lock', () => {
loadingInstance = Loading({ lock: true }); loadingInstance = Loading({ lock: true });
expect(document.body.style.overflow).to.equal('hidden'); expect(getStyle(document.body, 'overflow')).to.equal('hidden');
}); });
it('text', () => { it('text', () => {