Popup: allow user to set initial z-index for modals (#11257)

build/bin/build-entry.js

@@ -29,8 +29,10 @@ const install = function(Vue, opts = {}) {
 
   Vue.use(Loading.directive);
 
-  const ELEMENT = {};
-  ELEMENT.size = opts.size || '';
+  Vue.prototype.$ELEMENT = {
+    size: opts.size || '',
+    zIndex: opts.zIndex || 2000
+  };
 
   Vue.prototype.$loading = Loading.service;
   Vue.prototype.$msgbox = MessageBox;
@@ -40,7 +42,6 @@ const install = function(Vue, opts = {}) {
   Vue.prototype.$notify = Notification;
   Vue.prototype.$message = Message;
 
-  Vue.prototype.$ELEMENT = ELEMENT;
 };
 
 /* istanbul ignore if */

examples/docs/en-US/quickstart.md

@@ -230,14 +230,14 @@ Vue.prototype.$message = Message;
 
 ### Global config
 
-When importing Element, you can define a global config object. For now this object has only one property: `size`, which sets the default size for all components:
+When importing Element, you can define a global config object. For now this object has two properties: `size` and `zIndex`. The property `size` sets the default size for all components and the property `zIndex` sets the initial z-index (default: 2000) for modal boxes:
 
 Fully import Element：
 
 ```js
 import Vue from 'vue';
 import Element from 'element-ui';
-Vue.use(Element, { size: 'small' });
+Vue.use(Element, { size: 'small', zIndex: 3000 });
 ```
 
 Partial import Element：
@@ -246,11 +246,11 @@ Partial import Element：
 import Vue from 'vue';
 import { Button } from 'element-ui';
 
-Vue.prototype.$ELEMENT = { size: 'small' };
+Vue.prototype.$ELEMENT = { size: 'small', zIndex: 3000 };
 Vue.use(Button);
 ```
 
-With the above config, the default size of all components that have size attribute will be 'small'.
+With the above config, the default size of all components that have size attribute will be 'small', and the initial z-index of modal boxes is 3000.
 
 ### Start coding
 

examples/docs/es/quickstart.md

@@ -228,14 +228,14 @@ Vue.prototype.$message = Message;
 
 ### Configuración global
 
-Cuando importa Element, puede definir un objeto global de configuración. Por ahora este elemento solo contiene una propiedad: `size`, que define el tamaño por defecto de todos los componentes:
+Cuando importa Element, puede definir un objeto global de configuración. Por ahora este elemento solo contiene dos propiedades: `size`, `zIndex`. `size` define el tamaño por defecto de todos los componentes. The property `zIndex` sets the initial z-index (default: 2000) for modal boxes:
 
 Importando Element completamente：
 
 ```js
 import Vue from 'vue';
 import Element from 'element-ui';
-Vue.use(Element, { size: 'small' });
+Vue.use(Element, { size: 'small', zIndex: 3000 });
 ```
 
 Importando Element parcialmente：
@@ -244,11 +244,11 @@ Importando Element parcialmente：
 import Vue from 'vue';
 import { Button } from 'element-ui';
 
-Vue.prototype.$ELEMENT = { size: 'small' };
+Vue.prototype.$ELEMENT = { size: 'small', zIndex: 3000 };
 Vue.use(Button);
 ```
 
-Con la anterior configuración, el tamaño por defecto de todos los componentes que tienen el atributo `size` será `small`.
+Con la anterior configuración, el tamaño por defecto de todos los componentes que tienen el atributo `size` será `small`. The initial z-index of modal boxes is 3000.
 
 ### Empiece ya!
 

examples/docs/zh-CN/quickstart.md

@@ -229,14 +229,14 @@ Vue.prototype.$message = Message;
 
 ### 全局配置
 
-在引入 Element 时，可以传入一个全局配置对象。该对象目前仅支持 `size` 字段，用于改变组件的默认尺寸。按照引入 Element 的方式，具体操作如下：
+在引入 Element 时，可以传入一个全局配置对象。该对象目前支持 `size` 与 `zIndex` 字段。`size` 用于改变组件的默认尺寸，`zIndex` 设置弹框的初始 z-index（默认值：2000）。按照引入 Element 的方式，具体操作如下：
 
 完整引入 Element：
 
 ```js
 import Vue from 'vue';
 import Element from 'element-ui';
-Vue.use(Element, { size: 'small' });
+Vue.use(Element, { size: 'small', zIndex: 3000 });
 ```
 
 按需引入 Element：
@@ -245,11 +245,11 @@ Vue.use(Element, { size: 'small' });
 import Vue from 'vue';
 import { Button } from 'element-ui';
 
-Vue.prototype.$ELEMENT = { size: 'small' };
+Vue.prototype.$ELEMENT = { size: 'small', zIndex: 3000 };
 Vue.use(Button);
 ```
 
-按照以上设置，项目中所有拥有 `size` 属性的组件的默认尺寸均为 'small'。
+按照以上设置，项目中所有拥有 `size` 属性的组件的默认尺寸均为 'small'，弹框的初始 z-index 为 3000。
 
 ### 开始使用
 

src/index.js

@@ -151,8 +151,10 @@ const install = function(Vue, opts = {}) {
 
   Vue.use(Loading.directive);
 
-  const ELEMENT = {};
-  ELEMENT.size = opts.size || '';
+  Vue.prototype.$ELEMENT = {
+    size: opts.size || '',
+    zIndex: opts.zIndex || 2000
+  };
 
   Vue.prototype.$loading = Loading.service;
   Vue.prototype.$msgbox = MessageBox;
@@ -162,7 +164,6 @@ const install = function(Vue, opts = {}) {
   Vue.prototype.$notify = Notification;
   Vue.prototype.$message = Message;
 
-  Vue.prototype.$ELEMENT = ELEMENT;
 };
 
 /* istanbul ignore if */

src/utils/popup/popup-manager.js

@@ -2,6 +2,8 @@ import Vue from 'vue';
 import { addClass, removeClass } from 'element-ui/src/utils/dom';
 
 let hasModal = false;
+let hasInitZIndex = false;
+let zIndex = 2000;
 
 const getModal = function() {
   if (Vue.prototype.$isServer) return;
@@ -29,8 +31,6 @@ const getModal = function() {
 const instances = {};
 
 const PopupManager = {
-  zIndex: 2000,
-
   modalFade: true,
 
   getInstance: function(id) {
@@ -151,6 +151,20 @@ const PopupManager = {
   }
 };
 
+Object.defineProperty(PopupManager, 'zIndex', {
+  configurable: true,
+  get() {
+    if (!hasInitZIndex) {
+      zIndex = (Vue.prototype.$ELEMENT || {}).zIndex || zIndex;
+      hasInitZIndex = true;
+    }
+    return zIndex;
+  },
+  set(value) {
+    zIndex = value;
+  }
+});
+
 const getTopPopup = function() {
   if (Vue.prototype.$isServer) return;
   if (PopupManager.modalStack.length > 0) {