Loading: remove unnecessary inline styles

packages/loading/src/directive.js

@@ -1,4 +1,5 @@
 import Vue from 'vue';
+import { addClass, removeClass } from 'wind-dom/src/class';
 let Spinner = Vue.extend(require('./spinner.vue'));
 
 exports.install = Vue => {
@@ -9,14 +10,14 @@ exports.install = Vue => {
           el.originalPosition = document.body.style.position;
           el.originalOverflow = document.body.style.overflow;
 
-          ['top', 'right', 'bottom', 'left'].forEach(property => {
-            el.maskStyle[property] = '0';
-          });
-          el.maskStyle.position = 'fixed';
-          el.spinnerStyle.position = 'fixed';
+          addClass(el.mask, 'is-fullscreen');
+          addClass(el.spinner, 'is-fullscreen');
 
           insertDom(document.body, el, binding);
         } else {
+          removeClass(el.mask, 'is-fullscreen');
+          removeClass(el.spinner, 'is-fullscreen');
+
           if (binding.modifiers.body) {
             el.originalPosition = document.body.style.position;
 
@@ -31,11 +32,6 @@ exports.install = Vue => {
             insertDom(document.body, el, binding);
           } else {
             el.originalPosition = el.style.position;
-
-            ['top', 'right', 'bottom', 'left'].forEach(property => {
-              el.maskStyle[property] = '0';
-            });
-
             insertDom(el, el, binding);
           }
         }
@@ -63,10 +59,6 @@ exports.install = Vue => {
         directive.mask.style[property] = directive.maskStyle[property];
       });
 
-      Object.keys(directive.spinnerStyle).forEach(property => {
-        directive.spinner.style[property] = directive.spinnerStyle[property];
-      });
-
       if (directive.originalPosition !== 'absolute') {
         parent.style.position = 'relative';
       }
@@ -87,12 +79,7 @@ exports.install = Vue => {
     bind: function(el, binding) {
       el.mask = document.createElement('div');
       el.mask.className = 'el-loading-mask';
-      el.maskStyle = {
-        position: 'absolute',
-        zIndex: '10000',
-        backgroundColor: 'rgba(255, 255, 255, .9)',
-        margin: '0'
-      };
+      el.maskStyle = {};
 
       let spinner = new Spinner({
         data: {
@@ -102,9 +89,6 @@ exports.install = Vue => {
       });
       spinner.$mount(el.mask);
       el.spinner = spinner.$el;
-      el.spinnerStyle = {
-        position: 'absolute'
-      };
       toggleLoading(el, binding);
     },