瀏覽代碼

Loading: use popup-manager to handle fullscreen z-index

Leopoldthecoder 7 年之前
父節點
當前提交
840c4b57be
共有 3 個文件被更改,包括 6 次插入2 次删除
  1. 3 1
      packages/loading/src/directive.js
  2. 2 0
      packages/loading/src/index.js
  3. 1 1
      packages/theme-chalk/src/loading.scss

+ 3 - 1
packages/loading/src/directive.js

@@ -1,6 +1,7 @@
 import Vue from 'vue';
 import Loading from './loading.vue';
 import { addClass, removeClass, getStyle } from 'element-ui/src/utils/dom';
+import { PopupManager } from 'element-ui/src/utils/popup';
 import afterLeave from 'element-ui/src/utils/after-leave';
 const Mask = Vue.extend(Loading);
 
@@ -13,6 +14,7 @@ loadingDirective.install = Vue => {
         if (binding.modifiers.fullscreen) {
           el.originalPosition = getStyle(document.body, 'position');
           el.originalOverflow = getStyle(document.body, 'overflow');
+          el.maskStyle.zIndex = PopupManager.nextZIndex();
 
           addClass(el.mask, 'is-fullscreen');
           insertDom(document.body, el, binding);
@@ -71,7 +73,7 @@ loadingDirective.install = Vue => {
           el.instance.$emit('after-leave');
         } else {
           el.instance.visible = true;
-        };
+        }
       });
       el.domInserted = true;
     }

+ 2 - 0
packages/loading/src/index.js

@@ -1,6 +1,7 @@
 import Vue from 'vue';
 import loadingVue from './loading.vue';
 import { addClass, removeClass, getStyle } from 'element-ui/src/utils/dom';
+import { PopupManager } from 'element-ui/src/utils/popup';
 import afterLeave from 'element-ui/src/utils/after-leave';
 import merge from 'element-ui/src/utils/merge';
 
@@ -42,6 +43,7 @@ const addStyle = (options, parent, instance) => {
   if (options.fullscreen) {
     instance.originalPosition = getStyle(document.body, 'position');
     instance.originalOverflow = getStyle(document.body, 'overflow');
+    maskStyle.zIndex = PopupManager.nextZIndex();
   } else if (options.body) {
     instance.originalPosition = getStyle(document.body, 'position');
     ['top', 'left'].forEach(property => {

+ 1 - 1
packages/theme-chalk/src/loading.scss

@@ -13,7 +13,7 @@
 
 @include b(loading-mask) {
   position: absolute;
-  z-index: 10000;
+  z-index: 2000;
   background-color: rgba(255, 255, 255, .9);
   margin: 0;
   top: 0;