popup manager fix

This commit is contained in:
cookfront 2017-03-10 16:51:08 +08:00
parent 66db79484d
commit 5e1d604c11
2 changed files with 37 additions and 16 deletions

View File

@ -34,6 +34,7 @@
<script> <script>
import MobileComputed from 'components/mobile-computed'; import MobileComputed from 'components/mobile-computed';
import Dialog from 'packages/dialog';
export default { export default {
mixins: [MobileComputed], mixins: [MobileComputed],
@ -55,6 +56,19 @@ export default {
}, 2000); }, 2000);
} }
} }
},
methods: {
showDialog() {
Dialog.confirm({
title: 'confirm标题',
message: '弹窗提示文字左右始终距离边20PX上下距离20PX文字左对齐。弹窗提示文字左右始终距离边20PX上下距离20PX文字左对齐。'
}).then((action) => {
console.log(action);
}, (error) => {
console.log(error);
});
}
} }
}; };
</script> </script>
@ -69,7 +83,7 @@ export default {
<zan-button @click="popupShow1 = true;">从下方弹出popup</zan-button> <zan-button @click="popupShow1 = true;">从下方弹出popup</zan-button>
</div> </div>
<zan-popup v-model="popupShow1" position="bottom" class="zan-popup-1"> <zan-popup v-model="popupShow1" position="bottom" class="zan-popup-1">
更新成功 <zan-button @click="showDialog">弹出dialog</zan-button>
</zan-popup> </zan-popup>
<div class="zan-row"> <div class="zan-row">

View File

@ -1,13 +1,24 @@
import Vue from 'vue';
import { addClass } from 'src/utils/dom'; import { addClass } from 'src/utils/dom';
let hasModal = false; // eslint-disable-line let popupContext = {
hasModal: false,
instances: {},
modalStack: []
};
if (Vue.prototype.$isServer) {
global.popupContext = popupContext;
} else {
window.popupContext = popupContext;
}
const getModal = function() { const getModal = function() {
let modalDom = PopupManager.modalDom; let modalDom = PopupManager.modalDom;
if (modalDom) { if (modalDom) {
hasModal = true; popupContext.hasModal = true;
} else { } else {
hasModal = false; popupContext.hasModal = false;
modalDom = document.createElement('div'); modalDom = document.createElement('div');
PopupManager.modalDom = modalDom; PopupManager.modalDom = modalDom;
@ -24,31 +35,27 @@ const getModal = function() {
return modalDom; return modalDom;
}; };
const instances = {};
const PopupManager = { const PopupManager = {
zIndex: 2000, zIndex: 2000,
modalStack: [],
nextZIndex() { nextZIndex() {
return this.zIndex++; return this.zIndex++;
}, },
getInstance(id) { getInstance(id) {
return instances[id]; return popupContext.instances[id];
}, },
register(id, instance) { register(id, instance) {
if (id && instance) { if (id && instance) {
instances[id] = instance; popupContext.instances[id] = instance;
} }
}, },
deregister(id) { deregister(id) {
if (id) { if (id) {
instances[id] = null; popupContext.instances[id] = null;
delete instances[id]; delete popupContext.instances[id];
} }
}, },
@ -56,7 +63,7 @@ const PopupManager = {
* 遮罩层点击回调`closeOnClickOverlay``true`时会关闭当前`popup` * 遮罩层点击回调`closeOnClickOverlay``true`时会关闭当前`popup`
*/ */
handleOverlayClick() { handleOverlayClick() {
const topModal = PopupManager.modalStack[PopupManager.modalStack.length - 1]; const topModal = popupContext.modalStack[popupContext.modalStack.length - 1];
if (!topModal) return; if (!topModal) return;
const instance = PopupManager.getInstance(topModal.id); const instance = PopupManager.getInstance(topModal.id);
@ -68,7 +75,7 @@ const PopupManager = {
openModal(id, zIndex, dom) { openModal(id, zIndex, dom) {
if (!id || zIndex === undefined) return; if (!id || zIndex === undefined) return;
const modalStack = this.modalStack; const modalStack = popupContext.modalStack;
for (let i = 0, len = modalStack.length; i < len; i++) { for (let i = 0, len = modalStack.length; i < len; i++) {
const item = modalStack[i]; const item = modalStack[i];
@ -88,11 +95,11 @@ const PopupManager = {
} }
modalDom.style.display = ''; modalDom.style.display = '';
this.modalStack.push({ id: id, zIndex: zIndex }); popupContext.modalStack.push({ id: id, zIndex: zIndex });
}, },
closeModal(id) { closeModal(id) {
const modalStack = this.modalStack; const modalStack = popupContext.modalStack;
const modalDom = getModal(); const modalDom = getModal();
if (modalStack.length > 0) { if (modalStack.length > 0) {