update Modal for ESC key, and add prop z-index

examples/routers/modal.vue

@@ -1,43 +1,21 @@
 <template>
     <div>
-        <Button @click="instance('info')">Info</Button>
+        <Button @click="modal12 = true">Open the first modal</Button>
-        <Button @click="instance('success')">Success</Button>
+        <Button @click="modal13 = true">Open the second modal</Button>
-        <Button @click="instance('warning')">Warning</Button>
+        <Modal v-model="modal12" draggable scrollable title="Modal 1">
-        <Button @click="instance('error')">Error</Button>
+            <div>This is the first modal</div>
+        </Modal>
+        <Modal v-model="modal13" draggable scrollable title="Modal 2">
+            <div>This is the second modal</div>
+        </Modal>
     </div>
 </template>
 <script>
     export default {
-        methods: {
+        data () {
-            instance (type) {
+            return {
-                const title = 'Title';
+                modal12: false,
-                const content = '<p>Content of dialog</p><p>Content of dialog</p>';
+                modal13: false
-                switch (type) {
-                    case 'info':
-                        this.$Modal.info({
-                            title: title,
-                            content: content
-                        });
-                        break;
-                    case 'success':
-                        this.$Modal.success({
-                            title: title,
-                            content: content
-                        });
-                        break;
-                    case 'warning':
-                        this.$Modal.warning({
-                            title: title,
-                            content: content
-                        });
-                        break;
-                    case 'error':
-                        this.$Modal.error({
-                            title: title,
-                            content: content
-                        });
-                        break;
-                }
             }
         }
     }

src/components/modal/modal.vue

@@ -3,10 +3,10 @@
         <transition :name="transitionNames[1]">
             <div :class="maskClasses" v-show="visible" v-if="showMask" @click="handleMask"></div>
         </transition>
-        <div :class="wrapClasses" @click="handleWrapClick">
+        <div :class="wrapClasses" :style="wrapStyles" @click="handleWrapClick">
             <transition :name="transitionNames[0]" @after-leave="animationFinish">
                 <div :class="classes" :style="mainStyles" v-show="visible">
-                    <div :class="contentClasses" ref="content" :style="contentStyles">
+                    <div :class="contentClasses" ref="content" :style="contentStyles" @click="handleClickModal">
                         <a :class="[prefixCls + '-close']" v-if="closable" @click="close">
                             <slot name="close">
                                 <Icon type="ios-close"></Icon>
@@ -38,6 +38,9 @@
     import ScrollbarMixins from './mixins-scrollbar';
 
     import { on, off } from '../../utils/dom';
+    import { findComponentsDownward } from '../../utils/assist';
+
+    import { modalIndex, modalIncrease } from './q';
 
     const prefixCls = 'ivu-modal';
 
@@ -114,7 +117,11 @@
             draggable: {
                 type: Boolean,
                 default: false
-            }
+            },
+            zIndex: {
+                type: Number,
+                default: 1000
+            },
         },
         data () {
             return {
@@ -129,7 +136,8 @@
                     dragX: null,
                     dragY: null,
                     dragging: false
-                }
+                },
+                modalIndex: this.handleGetModalIndex(),  // for Esc close the top modal
             };
         },
         computed: {
@@ -143,6 +151,11 @@
                     }
                 ];
             },
+            wrapStyles () {
+                return {
+                    zIndex: this.modalIndex + this.zIndex
+                };
+            },
             maskClasses () {
                 return `${prefixCls}-mask`;
             },
@@ -247,7 +260,15 @@
             EscClose (e) {
                 if (this.visible && this.closable) {
                     if (e.keyCode === 27) {
-                        this.close();
+                        const $Modals = findComponentsDownward(this.$root, 'Modal').filter(item => item.$data.visible && item.$props.closable);
+
+                        const $TopModal = $Modals.sort((a, b) => {
+                            return a.$data.modalIndex < b.$data.modalIndex ? 1 : -1;
+                        })[0];
+
+                        setTimeout(() => {
+                            $TopModal.close();
+                        }, 0);
                     }
                 }
             },
@@ -298,6 +319,13 @@
                 this.dragData.dragging = false;
                 off(window, 'mousemove', this.handleMoveMove);
                 off(window, 'mouseup', this.handleMoveEnd);
+            },
+            handleGetModalIndex () {
+                modalIncrease();
+                return modalIndex;
+            },
+            handleClickModal () {
+                this.modalIndex = this.handleGetModalIndex();
             }
         },
         mounted () {
@@ -332,6 +360,8 @@
                         this.removeScrollEffect();
                     }, 300);
                 } else {
+                    this.modalIndex = this.handleGetModalIndex();
+
                     if (this.timer) clearTimeout(this.timer);
                     this.wrapShow = true;
                     if (!this.scrollable) {

src/components/modal/q.js

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