From 707a3d825d7c2ce6a12fed5e72a2df7f73dcbeb2 Mon Sep 17 00:00:00 2001
From: 梁灏 <admin@aresn.com>
Date: Wed, 29 Aug 2018 17:03:45 +0800
Subject: [PATCH] update Modal for ESC key, and add prop z-index
---
examples/routers/modal.vue | 46 ++++++++++++----------------------------------
src/components/modal/modal.vue | 40 +++++++++++++++++++++++++++++++++++-----
src/components/modal/q.js | 7 +++++++
3 files changed, 54 insertions(+), 39 deletions(-)
create mode 100644 src/components/modal/q.js
diff --git a/examples/routers/modal.vue b/examples/routers/modal.vue
index 94c328a..08c43c4 100644
--- a/examples/routers/modal.vue
+++ b/examples/routers/modal.vue
@@ -1,43 +1,21 @@
<template>
<div>
- <Button @click="instance('info')">Info</Button>
- <Button @click="instance('success')">Success</Button>
- <Button @click="instance('warning')">Warning</Button>
- <Button @click="instance('error')">Error</Button>
+ <Button @click="modal12 = true">Open the first modal</Button>
+ <Button @click="modal13 = true">Open the second modal</Button>
+ <Modal v-model="modal12" draggable scrollable title="Modal 1">
+ <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: {
- instance (type) {
- const title = 'Title';
- const content = '<p>Content of dialog</p><p>Content of dialog</p>';
- 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;
- }
+ data () {
+ return {
+ modal12: false,
+ modal13: false
}
}
}
diff --git a/src/components/modal/modal.vue b/src/components/modal/modal.vue
index b5fc106..42acbc2 100644
--- a/src/components/modal/modal.vue
+++ b/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) {
diff --git a/src/components/modal/q.js b/src/components/modal/q.js
new file mode 100644
index 0000000..c72b70f
--- /dev/null
+++ b/src/components/modal/q.js
@@ -0,0 +1,7 @@
+let modalIndex = 0;
+
+function modalIncrease() {
+ modalIndex++;
+}
+
+export {modalIndex, modalIncrease};
\ No newline at end of file
--
libgit2 0.21.4