popup add context

src/mixins/popup/index.js

@@ -1,27 +1,6 @@
-import Vue from 'vue';
 import merge from 'src/utils/merge';
 import PopupManager from './popup-manager';
-
+import PopupContext from './popup-context';
-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;
-};
 
 export default {
   props: {
@@ -70,8 +49,8 @@ export default {
   },
 
   beforeMount() {
-    this._popupId = 'popup-' + popupContext.idSeed++;
+    this._popupId = 'popup-' + PopupContext.plusKeyByOne('idSeed');
-    PopupManager.register(this._popupId, this, popupContext);
+    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;

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;

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;
+      let instances = PopupContext.getContext('instances');
-      this.popupContext.instances[id] = instance;
+      instances[id] = instance;
     }
   },
 
   deregister(id) {
     if (id) {
-      this.popupContext.instances[id] = null;
+      let instances = PopupContext.getContext('instances');
-      delete this.popupContext.instances[id];
+      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) {