Loading:fix hidden dom loading bug

packages/loading/src/directive.js

@@ -1,111 +1,111 @@
-import Vue from 'vue'
-import { addClass, removeClass, getStyle } from 'element-ui/src/utils/dom'
-let Mask = Vue.extend(require('./loading.vue'))
+import Vue from 'vue';
+import { addClass, removeClass, getStyle } from 'element-ui/src/utils/dom';
+let Mask = Vue.extend(require('./loading.vue'));
 
 exports.install = Vue => {
-  if (Vue.prototype.$isServer) return
+  if (Vue.prototype.$isServer) return;
   let toggleLoading = (el, binding) => {
     if (binding.value) {
       Vue.nextTick(() => {
         if (binding.modifiers.fullscreen) {
-          el.originalPosition = document.body.style.position
-          el.originalOverflow = document.body.style.overflow
+          el.originalPosition = document.body.style.position;
+          el.originalOverflow = document.body.style.overflow;
 
-          addClass(el.mask, 'is-fullscreen')
-          insertDom(document.body, el, binding)
+          addClass(el.mask, 'is-fullscreen');
+          insertDom(document.body, el, binding);
         } else {
-          removeClass(el.mask, 'is-fullscreen')
+          removeClass(el.mask, 'is-fullscreen');
 
           if (binding.modifiers.body) {
             el.originalPosition = document.body.style.position;
 
             ['top', 'left'].forEach(property => {
-              let scroll = property === 'top' ? 'scrollTop' : 'scrollLeft'
-              el.maskStyle[property] = el.getBoundingClientRect()[property] + document.body[scroll] + document.documentElement[scroll] + 'px'
+              let scroll = property === 'top' ? 'scrollTop' : 'scrollLeft';
+              el.maskStyle[property] = el.getBoundingClientRect()[property] + document.body[scroll] + document.documentElement[scroll] + 'px';
             });
             ['height', 'width'].forEach(property => {
-              el.maskStyle[property] = el.getBoundingClientRect()[property] + 'px'
-            })
+              el.maskStyle[property] = el.getBoundingClientRect()[property] + 'px';
+            });
 
-            insertDom(document.body, el, binding)
+            insertDom(document.body, el, binding);
           } else {
-            el.originalPosition = el.style.position
-            insertDom(el, el, binding)
+            el.originalPosition = el.style.position;
+            insertDom(el, el, binding);
           }
         }
-      })
+      });
     } else {
       if (el.domVisible) {
         el.instance.$on('after-leave', _ => {
-          el.domVisible = false
+          el.domVisible = false;
           if (binding.modifiers.fullscreen && el.originalOverflow !== 'hidden') {
-            document.body.style.overflow = el.originalOverflow
+            document.body.style.overflow = el.originalOverflow;
           }
           if (binding.modifiers.fullscreen || binding.modifiers.body) {
-            document.body.style.position = el.originalPosition
+            document.body.style.position = el.originalPosition;
           } else {
-            el.style.position = el.originalPosition
-          }
-        })
-        el.instance.visible = false
+            el.style.position = el.originalPosition;
           }
+        });
+        el.instance.visible = false;
       }
     }
+  };
   let insertDom = (parent, el, binding) => {
     if (!el.domVisible && getStyle(el, 'display') !== 'none' && getStyle(el, 'visibility') !== 'hidden') {
       Object.keys(el.maskStyle).forEach(property => {
-        el.mask.style[property] = el.maskStyle[property]
-      })
+        el.mask.style[property] = el.maskStyle[property];
+      });
 
       if (el.originalPosition !== 'absolute') {
-        parent.style.position = 'relative'
+        parent.style.position = 'relative';
       }
       if (binding.modifiers.fullscreen && binding.modifiers.lock) {
-        parent.style.overflow = 'hidden'
+        parent.style.overflow = 'hidden';
       }
-      el.domVisible = true
+      el.domVisible = true;
 
-      parent.appendChild(el.mask)
+      parent.appendChild(el.mask);
       Vue.nextTick(() => {
-        el.instance.visible = true
-      })
-      el.domInserted = true
-    }
+        el.instance.visible = true;
+      });
+      el.domInserted = true;
     }
+  };
 
   Vue.directive('loading', {
-    bind: function (el, binding) {
+    bind: function(el, binding) {
       let mask = new Mask({
         el: document.createElement('div'),
         data: {
           text: el.getAttribute('element-loading-text'),
           fullscreen: !!binding.modifiers.fullscreen
         }
-      })
-      el.instance = mask
-      el.mask = mask.$el
-      el.maskStyle = {}
+      });
+      el.instance = mask;
+      el.mask = mask.$el;
+      el.maskStyle = {};
 
-      toggleLoading(el, binding)
+      toggleLoading(el, binding);
     },
 
-    update: function (el, binding) {
-      el.instance.setText(el.getAttribute('element-loading-text'))
+    update: function(el, binding) {
+      el.instance.setText(el.getAttribute('element-loading-text'));
       if (binding.oldValue !== binding.value) {
-        toggleLoading(el, binding)
+        toggleLoading(el, binding);
       }
     },
 
-    unbind: function (el, binding) {
+    unbind: function(el, binding) {
       if (el.domInserted) {
         if (binding.modifiers.fullscreen || binding.modifiers.body) {
-          document.body.removeChild(el.mask)
+          document.body.removeChild(el.mask);
         } else {
           el.mask &&
           el.mask.parentNode &&
-          el.mask.parentNode.removeChild(el.mask)
+          el.mask.parentNode.removeChild(el.mask);
         }
       }
     }
-  })
-}
+  });
+};