From ced94c200bb4ec471f43cbad4370da0c067ee465 Mon Sep 17 00:00:00 2001 From: cookfront Date: Wed, 5 Apr 2017 20:29:49 +0800 Subject: [PATCH] popup add context --- src/mixins/popup/index.js | 36 ++++++------------------------- src/mixins/popup/popup-context.js | 35 ++++++++++++++++++++++++++++++ src/mixins/popup/popup-manager.js | 34 +++++++++++++++-------------- 3 files changed, 60 insertions(+), 45 deletions(-) create mode 100644 src/mixins/popup/popup-context.js diff --git a/src/mixins/popup/index.js b/src/mixins/popup/index.js index a41a22392..4ecc1e418 100644 --- a/src/mixins/popup/index.js +++ b/src/mixins/popup/index.js @@ -1,27 +1,6 @@ -import Vue from 'vue'; import merge from 'src/utils/merge'; import PopupManager from './popup-manager'; - -let popupContext; -if (!window.popupContext) { - popupContext = window.popupContext = { - idSeed: 1, - zIndex: 2000, - hasModal: false, - instances: {}, - modalStack: [] - }; -} else { - popupContext = window.popupContext; -} - -const getDOM = function(dom) { - if (dom.nodeType === 3) { - dom = dom.nextElementSibling || dom.nextSibling; - getDOM(dom); - } - return dom; -}; +import PopupContext from './popup-context'; export default { props: { @@ -70,8 +49,8 @@ export default { }, beforeMount() { - this._popupId = 'popup-' + popupContext.idSeed++; - PopupManager.register(this._popupId, this, popupContext); + this._popupId = 'popup-' + PopupContext.plusKeyByOne('idSeed'); + PopupManager.register(this._popupId, this); }, data() { @@ -94,13 +73,12 @@ export default { this.$emit('input', true); - const dom = getDOM(this.$el); const props = merge({}, this, options); const zIndex = props.zIndex; // 如果属性中传入了`zIndex`，则覆盖`popupContext`中对应的`zIndex` if (zIndex) { - popupContext.zIndex = zIndex; + PopupContext.setContext('zIndex', zIndex); } // 如果显示遮罩层 @@ -109,7 +87,7 @@ export default { PopupManager.closeModal(this._popupId); this.closing = false; } - PopupManager.openModal(this._popupId, PopupManager.nextZIndex(), dom); + PopupManager.openModal(this._popupId, PopupManager.nextZIndex(), this.$el); // 如果滚动时需要锁定 if (this.lockOnScroll) { @@ -122,7 +100,7 @@ export default { } } - dom.style.zIndex = PopupManager.nextZIndex(); + this.$el.style.zIndex = PopupManager.nextZIndex(); this.opened = true; this.opening = false; }, @@ -160,7 +138,7 @@ export default { PopupManager.deregister(this._popupId); PopupManager.closeModal(this._popupId); - if (this.modal && this.bodyOverflow !== null && this.bodyOverflow !== 'hidden') { + if (this.overlay && this.bodyOverflow !== null && this.bodyOverflow !== 'hidden') { document.body.style.overflow = this.bodyOverflow; } this.bodyOverflow = null; diff --git a/src/mixins/popup/popup-context.js b/src/mixins/popup/popup-context.js new file mode 100644 index 000000000..4c6fe55eb --- /dev/null +++ b/src/mixins/popup/popup-context.js @@ -0,0 +1,35 @@ +import merge from 'src/utils/merge'; + +let context; +if (window && window.popupContext) { + context = window.popupContext +} + +const DEFAULT_CONTEXT = { + idSeed: 1, + zIndex: 2000, + hasModal: false, + instances: {}, + modalStack: [] +} + +context = window.popupContext = merge({}, DEFAULT_CONTEXT, context); + +const PopupContext = { + getContext(key) { + return context[key]; + }, + + setContext(key, value) { + context[key] = value; + }, + + plusKeyByOne(key) { + const oldVal = context[key]; + context[key] = oldVal + 1; + + return oldVal; + } +}; + +export default PopupContext; diff --git a/src/mixins/popup/popup-manager.js b/src/mixins/popup/popup-manager.js index 69b02de00..90d0bc05d 100644 --- a/src/mixins/popup/popup-manager.js +++ b/src/mixins/popup/popup-manager.js @@ -1,16 +1,16 @@ -import Vue from 'vue'; import { addClass } from 'src/utils/dom'; +import PopupContext from './popup-context'; const getModal = function() { - let modalDom = window.popupContext && window.popupContext.modalDom; + let modalDom = PopupContext.getContext('modalDom'); if (modalDom) { - window.popupContext.hasModal = true; + PopupContext.setContext('hasModal', true); } else { - window.popupContext.hasModal = false; + PopupContext.setContext('hasModal', false); modalDom = document.createElement('div'); - window.popupContext.modalDom = modalDom; + PopupContext.setContext('modalDom', modalDom); modalDom.addEventListener('touchmove', function(event) { event.preventDefault(); @@ -27,24 +27,25 @@ const getModal = function() { const PopupManager = { nextZIndex() { - return this.popupContext.zIndex++; + return PopupContext.plusKeyByOne('zIndex'); }, getInstance(id) { - return this.popupContext.instances[id]; + return PopupContext.getContext('instances')[id]; }, - register(id, instance, context) { + register(id, instance) { if (id && instance) { - this.popupContext = context; - this.popupContext.instances[id] = instance; + let instances = PopupContext.getContext('instances'); + instances[id] = instance; } }, deregister(id) { if (id) { - this.popupContext.instances[id] = null; - delete this.popupContext.instances[id]; + let instances = PopupContext.getContext('instances'); + instances[id] = null; + delete instances[id]; } }, @@ -52,7 +53,8 @@ const PopupManager = { * 遮罩层点击回调，`closeOnClickOverlay`为`true`时会关闭当前`popup` */ handleOverlayClick() { - const topModal = this.popupContext.modalStack[this.popupContext.modalStack.length - 1]; + const modalStack = PopupContext.getContext('modalStack'); + const topModal = modalStack[modalStack.length - 1]; if (!topModal) return; const instance = PopupManager.getInstance(topModal.id); @@ -64,7 +66,7 @@ const PopupManager = { openModal(id, zIndex, dom) { if (!id || zIndex === undefined) return; - const modalStack = this.popupContext.modalStack; + const modalStack = PopupContext.getContext('modalStack'); for (let i = 0, len = modalStack.length; i < len; i++) { const item = modalStack[i]; @@ -88,11 +90,11 @@ const PopupManager = { } modalDom.style.display = ''; - this.popupContext.modalStack.push({ id: id, zIndex: zIndex }); + modalStack.push({ id: id, zIndex: zIndex }); }, closeModal(id) { - const modalStack = this.popupContext.modalStack; + const modalStack = PopupContext.getContext('modalStack'); const modalDom = getModal(); if (modalStack.length > 0) {