[bugfix] Popup should remove event handler when destroyed (#477)

packages/mixins/popup/context.js

@@ -1,10 +1,9 @@
 const PopupContext = {
   idSeed: 1,
   zIndex: 2000,
-  instances: {},
   stack: [],
 
-  plusKeyByOne(key) {
+  plusKey(key) {
     return this[key]++;
   },
 

packages/mixins/popup/index.js

@@ -1,5 +1,5 @@
-import manager from './popup-manager';
-import context from './popup-context';
+import manager from './manager';
+import context from './context';
 import scrollUtils from '../../utils/scroll';
 
 export default {
@@ -32,8 +32,7 @@ export default {
   },
 
   beforeMount() {
-    this._popupId = 'popup-' + context.plusKeyByOne('idSeed');
-    context.instances[this._popupId] = this;
+    this._popupId = 'popup-' + context.plusKey('idSeed');
   },
 
   data() {
@@ -55,14 +54,12 @@ export default {
     },
 
     watchTouchMove(e) {
-      const pos = this.pos;
+      const { pos } = this;
       const dx = e.touches[0].clientX - pos.x;
       const dy = e.touches[0].clientY - pos.y;
       const direction = dy > 0 ? '10' : '01';
       const el = scrollUtils.getScrollEventTarget(e.target, this.$el);
-      const scrollTop = el.scrollTop;
-      const scrollHeight = el.scrollHeight;
-      const offsetHeight = el.offsetHeight;
+      const { scrollHeight, offsetHeight, scrollTop } = el;
       const isVertical = Math.abs(dx) < Math.abs(dy);
 
       let status = '11';
@@ -92,10 +89,10 @@ export default {
       }
 
       if (this.overlay) {
-        manager.openModal({
+        manager.openModal(this, {
           id: this._popupId,
-          zIndex: context.plusKeyByOne('zIndex'),
           dom: this.$el,
+          zIndex: context.plusKey('zIndex'),
           className: this.overlayClass,
           customStyle: this.overlayStyle
         });
@@ -105,12 +102,12 @@ export default {
         }
       }
 
-      this.$el.style.zIndex = context.plusKeyByOne('zIndex');
+      this.$el.style.zIndex = context.plusKey('zIndex');
       this.opened = true;
 
       if (this.preventScroll) {
-        document.addEventListener('touchstart', this.recordPosition, false);
-        document.addEventListener('touchmove', this.watchTouchMove, false);
+        document.addEventListener('touchstart', this.recordPosition);
+        document.addEventListener('touchmove', this.watchTouchMove);
       }
     },
 
@@ -120,11 +117,6 @@ export default {
       }
 
       this.$emit('input', false);
-
-      if (this.lockOnScroll) {
-        document.body.classList.remove('van-overflow-hidden');
-      }
-
       this.opened = false;
       this.doAfterClose();
     },
@@ -132,18 +124,18 @@ export default {
     doAfterClose() {
       manager.closeModal(this._popupId);
 
+      if (this.lockOnScroll) {
+        document.body.classList.remove('van-overflow-hidden');
+      }
+
       if (this.preventScroll) {
-        document.removeEventListener('touchstart', this.recordPosition, false);
-        document.removeEventListener('touchmove', this.watchTouchMove, false);
+        document.removeEventListener('touchstart', this.recordPosition);
+        document.removeEventListener('touchmove', this.watchTouchMove);
       }
     }
   },
 
   beforeDestroy() {
-    context.instances[this._popupId] = null;
-    manager.closeModal(this._popupId);
-    if (this.lockOnScroll) {
-      document.body.classList.remove('van-overflow-hidden');
-    }
+    this.doAfterClose();
   }
 };

packages/mixins/popup/manager.js

@@ -1,13 +1,13 @@
 import Vue from 'vue';
 import Modal from './Modal';
-import context from './popup-context';
+import context from './context';
 
 const modalDefaultConfig = {
   className: '',
   customStyle: {}
 };
 
-const PopupManager = {
+const manager = {
   getModal() {
     let { modal } = context;
 
@@ -17,7 +17,7 @@ const PopupManager = {
         el: document.createElement('div')
       });
       modal.$on('click', () => {
-        PopupManager.handleOverlayClick();
+        manager.onClickOverlay();
       });
 
       context.modal = modal;
@@ -27,23 +27,23 @@ const PopupManager = {
   },
 
   // close popup when click modal && closeOnClickOverlay is true
-  handleOverlayClick() {
+  onClickOverlay() {
     const { top } = context;
     if (top) {
-      const instance = context.instances[top.id];
+      const { instance } = top;
       if (instance && instance.closeOnClickOverlay) {
         instance.close();
       }
     }
   },
 
-  openModal(config) {
+  openModal(instance, config) {
     const { id, dom } = config;
     const exist = context.stack.some(item => item.id === id);
 
     if (!exist) {
       const targetNode = dom && dom.parentNode && dom.parentNode.nodeType !== 11 ? dom.parentNode : document.body;
-      context.stack.push({ id, config, targetNode });
+      context.stack.push({ instance, id, config, targetNode });
       this.updateModal();
     };
   },
@@ -63,16 +63,15 @@ const PopupManager = {
 
   updateModal() {
     const modal = this.getModal();
-    const el = modal.$el;
 
-    if (el.parentNode) {
+    if (modal.$el.parentNode) {
       modal.visible = false;
     }
 
     if (context.top) {
       const { targetNode, config } = context.top;
 
-      targetNode.appendChild(el);
+      targetNode.appendChild(modal.$el);
       Object.assign(modal, {
         ...modalDefaultConfig,
         ...config,
@@ -82,4 +81,4 @@ const PopupManager = {
   }
 };
 
-export default PopupManager;
+export default manager;