Loading: use class to set styles

packages/loading/src/directive.js

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

packages/loading/src/index.js

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

packages/theme-chalk/src/loading.scss

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

test/unit/specs/loading.spec.js

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