diff --git a/build/bin/build-entry.js b/build/bin/build-entry.js index cd4a63d95..3fb9e4e03 100644 --- a/build/bin/build-entry.js +++ b/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 */ diff --git a/examples/docs/en-US/quickstart.md b/examples/docs/en-US/quickstart.md index 777d44c49..363f69a9e 100644 --- a/examples/docs/en-US/quickstart.md +++ b/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 diff --git a/examples/docs/es/quickstart.md b/examples/docs/es/quickstart.md index d65a1179d..dfacc9f9e 100644 --- a/examples/docs/es/quickstart.md +++ b/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! diff --git a/examples/docs/zh-CN/quickstart.md b/examples/docs/zh-CN/quickstart.md index b118ab9be..b5d94d8df 100644 --- a/examples/docs/zh-CN/quickstart.md +++ b/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。 ### 开始使用 diff --git a/src/index.js b/src/index.js index 5f6676642..6d7b0a22c 100644 --- a/src/index.js +++ b/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 */ diff --git a/src/utils/popup/popup-manager.js b/src/utils/popup/popup-manager.js index 877ac0459..2d18ef18f 100644 --- a/src/utils/popup/popup-manager.js +++ b/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) {