fixes #4453 #4480 #4462

src/components/base/notification/notification.vue

@@ -1,5 +1,5 @@
 <template>
-    <div :class="classes" :style="styles">
+    <div :class="classes" :style="wrapStyles">
         <Notice
             v-for="notice in notices"
             :key="notice.name"
@@ -21,6 +21,8 @@
 <script>
     import Notice from './notice.vue';
 
+    import { transferIndex, transferIncrease } from '../../../utils/transfer-queue';
+
     const prefixCls = 'ivu-notification';
     let seed = 0;
     const now = Date.now();
@@ -54,7 +56,8 @@
         },
         data () {
             return {
-                notices: []
+                notices: [],
+                tIndex: this.handleGetIndex()
             };
         },
         computed: {
@@ -65,6 +68,12 @@
                         [`${this.className}`]: !!this.className
                     }
                 ];
+            },
+            wrapStyles () {
+                let styles = Object.assign({}, this.styles);
+                styles['z-index'] = 1010 + this.tIndex;
+
+                return styles;
             }
         },
         methods: {
@@ -82,6 +91,7 @@
                 }, notice);
 
                 this.notices.push(_notice);
+                this.tIndex = this.handleGetIndex();
             },
             close (name) {
                 const notices = this.notices;
@@ -94,7 +104,11 @@
             },
             closeAll () {
                 this.notices = [];
-            }
+            },
+            handleGetIndex () {
+                transferIncrease();
+                return transferIndex;
+            },
         }
     };
 </script>

src/components/base/popper.js

@@ -60,6 +60,7 @@ export default {
         },
         visible(val) {
             if (val) {
+                this.handleIndexIncrease();  // just use for Poptip
                 this.updatePopper();
                 this.$emit('on-popper-show');
             } else {

src/components/cascader/cascader.vue

@@ -26,6 +26,7 @@
                 :class="{ [prefixCls + '-transfer']: transfer }"
                 ref="drop"
                 :data-transfer="transfer"
+                :transfer="transfer"
                 v-transfer-dom>
                 <div>
                     <Caspanel

src/components/color-picker/color-picker.vue

@@ -40,6 +40,7 @@
                 ref="drop"
                 :placement="placement"
                 :data-transfer="transfer"
+                :transfer="transfer"
                 :class="dropClasses"
             >
                 <transition name="fade">

src/components/date-picker/picker.vue

@@ -39,6 +39,7 @@
                 :placement="placement"
                 ref="drop"
                 :data-transfer="transfer"
+                :transfer="transfer"
                 v-transfer-dom>
                 <div>
                     <component

src/components/dropdown/dropdown.vue

@@ -14,6 +14,7 @@
                 @mouseenter.native="handleMouseenter"
                 @mouseleave.native="handleMouseleave"
                 :data-transfer="transfer"
+                :transfer="transfer"
                 v-transfer-dom><slot name="list"></slot></Drop>
         </transition>
     </div>

src/components/modal/modal.vue

@@ -40,7 +40,7 @@
     import { on, off } from '../../utils/dom';
     import { findComponentsDownward } from '../../utils/assist';
 
-    import { modalIndex, modalIncrease } from './q';
+    import { transferIndex as modalIndex, transferIncrease as modalIncrease } from '../../utils/transfer-queue';
 
     const prefixCls = 'ivu-modal';
 
@@ -325,7 +325,9 @@
                 return modalIndex;
             },
             handleClickModal () {
-                this.modalIndex = this.handleGetModalIndex();
+                if (this.draggable) {
+                    this.modalIndex = this.handleGetModalIndex();
+                }
             }
         },
         mounted () {

src/components/modal/q.js

@@ -1,7 +0,0 @@
-let modalIndex = 0;
-
-function modalIncrease() {
-    modalIndex++;
-}
-
-export {modalIndex, modalIncrease};

src/components/poptip/poptip.vue

@@ -52,6 +52,7 @@
     import {directive as clickOutside} from 'v-click-outside-x';
     import TransferDom from '../../directives/transfer-dom';
     import { oneOf } from '../../utils/assist';
+    import { transferIndex, transferIncrease } from '../../utils/transfer-queue';
     import Locale from '../../mixins/locale';
 
     const prefixCls = 'ivu-poptip';
@@ -118,6 +119,7 @@
                 showTitle: true,
                 isInput: false,
                 disableCloseUnderTransfer: false,  // transfer 模式下，点击 slot 也会触发关闭
+                tIndex: this.handleGetIndex()
             };
         },
         computed: {
@@ -144,6 +146,9 @@
                 if (this.width) {
                     style.width = `${this.width}px`;
                 }
+
+                if (this.transfer) style['z-index'] = 1060 + this.tIndex;
+
                 return style;
             },
             localeOkText () {
@@ -172,7 +177,7 @@
                 const styles = {};
                 if (this.padding !== '') styles['padding'] = this.padding;
                 return styles;
-            }
+            },
         },
         methods: {
             handleClick () {
@@ -254,6 +259,13 @@
                 }
 
                 return $children;
+            },
+            handleGetIndex () {
+                transferIncrease();
+                return transferIndex;
+            },
+            handleIndexIncrease () {
+                this.tIndex = this.handleGetIndex();
             }
         },
         mounted () {

src/components/select/dropdown.vue

@@ -7,6 +7,8 @@
     import { getStyle } from '../../utils/assist';
     const Popper = isServer ? function() {} : require('popper.js/dist/umd/popper.js');  // eslint-disable-line
 
+    import { transferIndex, transferIncrease } from '../../utils/transfer-queue';
+
     export default {
         name: 'Drop',
         props: {
@@ -16,19 +18,26 @@
             },
             className: {
                 type: String
+            },
+            transfer: {
+                type: Boolean
             }
         },
         data () {
             return {
                 popper: null,
                 width: '',
-                popperStatus: false
+                popperStatus: false,
+                tIndex: this.handleGetIndex()
             };
         },
         computed: {
             styles () {
                 let style = {};
                 if (this.width) style.minWidth = `${this.width}px`;
+
+                if (this.transfer) style['z-index'] = 1060 + this.tIndex;
+
                 return style;
             }
         },
@@ -66,6 +75,7 @@
                 if (this.$parent.$options.name === 'iSelect') {
                     this.width = parseInt(getStyle(this.$parent.$el, 'width'));
                 }
+                this.tIndex = this.handleGetIndex();
             },
             destroy () {
                 if (this.popper) {
@@ -89,7 +99,11 @@
                 if(!leftOrRight){
                     this.popper.popper.style.transformOrigin = placementStart==='bottom' || ( placementStart !== 'top' && placementEnd === 'start') ? 'center top' : 'center bottom';
                 }
-            }
+            },
+            handleGetIndex () {
+                transferIncrease();
+                return transferIndex;
+            },
         },
         created () {
             this.$on('on-update-popper', this.update);

src/components/select/select.vue

@@ -54,6 +54,7 @@
                 :placement="placement"
                 ref="dropdown"
                 :data-transfer="transfer"
+                :transfer="transfer"
                 v-transfer-dom
             >
                 <ul v-show="showNotFoundLabel" :class="[prefixCls + '-not-found']"><li>{{ localeNotFoundText }}</li></ul>

src/components/spin/spin.js

@@ -1,6 +1,15 @@
 import Vue from 'vue';
 import Spin from './spin.vue';
 
+import { transferIndex, transferIncrease } from '../../utils/transfer-queue';
+
+function handleGetIndex() {
+    transferIncrease();
+    return transferIndex;
+}
+
+let tIndex = handleGetIndex();
+
 Spin.newInstance = properties => {
     const _props = properties || {};
 
@@ -27,7 +36,10 @@ Spin.newInstance = properties => {
                 });
             }
             return h('div', {
-                'class': 'ivu-spin-fullscreen ivu-spin-fullscreen-wrapper'
+                'class': 'ivu-spin-fullscreen ivu-spin-fullscreen-wrapper',
+                'style': {
+                    'z-index': 2010 + tIndex
+                }
             }, [vnode]);
         }
     });
@@ -39,6 +51,7 @@ Spin.newInstance = properties => {
     return {
         show () {
             spin.visible = true;
+            tIndex = handleGetIndex();
         },
         remove (cb) {
             spin.visible = false;

src/components/tooltip/tooltip.vue

@@ -6,6 +6,7 @@
         <transition name="fade">
             <div
                 :class="[prefixCls + '-popper', prefixCls + '-' + theme]"
+                :style="dropStyles"
                 ref="popper"
                 v-show="!disabled && (visible || always)"
                 @mouseenter="handleShowPopper"
@@ -24,6 +25,7 @@
     import Popper from '../base/popper';
     import TransferDom from '../../directives/transfer-dom';
     import { oneOf } from '../../utils/assist';
+    import { transferIndex, transferIncrease } from '../../utils/transfer-queue';
 
     const prefixCls = 'ivu-tooltip';
 
@@ -76,7 +78,8 @@
         },
         data () {
             return {
-                prefixCls: prefixCls
+                prefixCls: prefixCls,
+                tIndex: this.handleGetIndex()
             };
         },
         computed: {
@@ -92,6 +95,12 @@
                         [`${prefixCls}-inner-with-width`]: !!this.maxWidth
                     }
                 ];
+            },
+            dropStyles () {
+                let styles = {};
+                if (this.transfer) styles['z-index'] = 1060 + this.tIndex;
+
+                return styles;
             }
         },
         watch: {
@@ -105,6 +114,7 @@
                 this.timeout = setTimeout(() => {
                     this.visible = true;
                 }, this.delay);
+                this.tIndex = this.handleGetIndex();
             },
             handleClosePopper() {
                 if (this.timeout) {
@@ -115,7 +125,11 @@
                         }, 100);
                     }
                 }
-            }
+            },
+            handleGetIndex () {
+                transferIncrease();
+                return transferIndex;
+            },
         },
         mounted () {
             if (this.always) {