[bugfix] Toast: overlay blocked by other element (#740)

packages/mixins/popup/context.js

@@ -1,5 +1,5 @@
-const PopupContext = {
-  idSeed: 1,
+export default {
+  id: 1,
   zIndex: 2000,
   stack: [],
 
@@ -11,5 +11,3 @@ const PopupContext = {
     return this.stack[this.stack.length - 1];
   }
 };
-
-export default PopupContext;

packages/mixins/popup/index.js

@@ -26,17 +26,6 @@ export default {
     }
   },
 
-  data() {
-    this._popupId = 'popup-' + context.plusKey('idSeed');
-    return {
-      opened: false,
-      pos: {
-        x: 0,
-        y: 0
-      }
-    };
-  },
-
   watch: {
     value(val) {
       this[val ? 'open' : 'close']();
@@ -44,6 +33,21 @@ export default {
 
     getContainer() {
       this.move();
+    },
+
+    overlay() {
+      this.renderOverlay();
+    }
+  },
+
+  created() {
+    this._popupId = 'popup-' + context.plusKey('id');
+    this.pos = {
+      x: 0,
+      y: 0
+    };
+    if (this.value) {
+      this.open();
     }
   },
 
@@ -51,24 +55,61 @@ export default {
     if (this.getContainer) {
       this.move();
     }
-    if (this.value) {
-      this.open();
-    }
   },
 
   beforeDestroy() {
-    this.doAfterClose();
+    this.close();
   },
 
   methods: {
-    recordPosition(e) {
+    open() {
+      /* istanbul ignore next */
+      if (this.$isServer) {
+        return;
+      }
+
+      // 如果属性中传入了`zIndex`，则覆盖`context`中对应的`zIndex`
+      if (this.zIndex !== undefined) {
+        context.zIndex = this.zIndex;
+      }
+
+      if (this.lockScroll) {
+        document.body.classList.add('van-overflow-hidden');
+        on(document, 'touchstart', this.onTouchStart);
+        on(document, 'touchmove', this.onTouchMove);
+      }
+
+      this.renderOverlay();
+      this.$emit('input', true);
+    },
+
+    close() {
+      if (this.lockScroll) {
+        document.body.classList.remove('van-overflow-hidden');
+        off(document, 'touchstart', this.onTouchStart);
+        off(document, 'touchmove', this.onTouchMove);
+      }
+
+      manager.close(this._popupId);
+      this.$emit('input', false);
+    },
+
+    move() {
+      if (this.getContainer) {
+        this.getContainer().appendChild(this.$el);
+      } else if (this.$parent) {
+        this.$parent.$el.appendChild(this.$el);
+      }
+    },
+
+    onTouchStart(e) {
       this.pos = {
         x: e.touches[0].clientX,
         y: e.touches[0].clientY
       };
     },
 
-    watchTouchMove(e) {
+    onTouchMove(e) {
       const { pos } = this;
       const dx = e.touches[0].clientX - pos.x;
       const dy = e.touches[0].clientY - pos.y;
@@ -97,64 +138,17 @@ export default {
       }
     },
 
-    open() {
-      /* istanbul ignore next */
-      if (this.opened || this.$isServer) {
-        return;
-      }
-
-      // 如果属性中传入了`zIndex`，则覆盖`context`中对应的`zIndex`
-      if (this.zIndex !== undefined) {
-        context.zIndex = this.zIndex;
-      }
-
+    renderOverlay() {
       if (this.overlay) {
         manager.open(this, {
-          id: this._popupId,
-          dom: this.$el,
           zIndex: context.plusKey('zIndex'),
           className: this.overlayClass,
           customStyle: this.overlayStyle
         });
+      } else {
+        manager.close(this._popupId);
       }
-
-      if (this.lockScroll) {
-        document.body.classList.add('van-overflow-hidden');
-        on(document, 'touchstart', this.recordPosition);
-        on(document, 'touchmove', this.watchTouchMove);
-      }
-
       this.$el.style.zIndex = context.plusKey('zIndex');
-      this.$emit('input', true);
-      this.opened = true;
-    },
-
-    close() {
-      if (!this.opened || this.$isServer) {
-        return;
-      }
-
-      this.$emit('input', false);
-      this.opened = false;
-      this.doAfterClose();
-    },
-
-    doAfterClose() {
-      manager.close(this._popupId);
-
-      if (this.lockScroll) {
-        document.body.classList.remove('van-overflow-hidden');
-        off(document, 'touchstart', this.recordPosition);
-        off(document, 'touchmove', this.watchTouchMove);
-      }
-    },
-
-    move() {
-      if (this.getContainer) {
-        this.getContainer().appendChild(this.$el);
-      } else if (this.$parent) {
-        this.$parent.$el.appendChild(this.$el);
-      }
     }
   }
 };

packages/mixins/popup/manager.js

@@ -9,13 +9,13 @@ const defaultConfig = {
 
 export default {
   open(vm, config) {
-    const { id, dom } = config;
-    const exist = context.stack.some(item => item.id === id);
+    const exist = context.stack.some(item => item.id === vm._popupId);
 
     /* istanbul ignore next */
     if (!exist) {
-      const targetNode = dom && dom.parentNode && dom.parentNode.nodeType !== 11 ? dom.parentNode : document.body;
-      context.stack.push({ vm, id, config, targetNode });
+      const el = vm.$el;
+      const targetNode = el && el.parentNode && el.parentNode.nodeType !== 11 ? el.parentNode : document.body;
+      context.stack.push({ vm, config, targetNode });
       this.update();
     };
   },
@@ -24,11 +24,11 @@ export default {
     const { stack } = context;
 
     if (stack.length) {
-      if (context.top.id === id) {
+      if (context.top.vm._popupId === id) {
         stack.pop();
         this.update();
       } else {
-        context.stack = stack.filter(item => item.id !== id);
+        context.stack = stack.filter(item => item.vm._popupId !== id);
       }
     }
   },
@@ -65,10 +65,8 @@ export default {
   onClick() {
     if (context.top) {
       const { vm } = context.top;
-      if (vm) {
-        vm.$emit('click-overlay');
-        vm.closeOnClickOverlay && vm.close();
-      }
+      vm.$emit('click-overlay');
+      vm.closeOnClickOverlay && vm.close();
     }
   }
 };