[bugfix] Popup modal display error

packages/mixins/popup/index.js

@@ -1,9 +1,9 @@
-import PopupManager from './popup-manager';
+import manager from './popup-manager';
-import PopupContext from './popup-context';
+import context from './popup-context';
 
 export default {
   props: {
-    // popup当前显示状态
+    // popup 当前显示状态
     value: {
       type: Boolean,
       default: false
@@ -13,16 +13,13 @@ export default {
       type: Boolean,
       default: false
     },
-    /**
+    // 点击遮罩层是否关闭 popup
-     * 点击遮罩层是否关闭popup
-     */
     closeOnClickOverlay: {
       type: Boolean,
       default: false
     },
     zIndex: [String, Number],
-    // popup滚动时是否body内容也滚动
+    // popup 滚动时是否禁用 body 滚动
-    // 默认为不滚动
     lockOnScroll: {
       type: Boolean,
       default: true
@@ -36,27 +33,18 @@ export default {
 
   watch: {
     value(val) {
-      if (val) {
+      this[val ? 'open' : 'close']();
-        if (this.opening) return;
-        this.open();
-      } else {
-        if (this.closing) return;
-        this.close();
-      }
     }
   },
 
   beforeMount() {
-    this._popupId = 'popup-' + PopupContext.plusKeyByOne('idSeed');
+    this._popupId = 'popup-' + context.plusKeyByOne('idSeed');
-    PopupManager.register(this._popupId, this);
+    context.instances[this._popupId] = this;
   },
 
   data() {
     return {
-      opening: false,
       opened: false,
-      closing: false,
-      bodyOverflow: null,
       pos: {
         x: 0,
         y: 0
@@ -71,6 +59,7 @@ export default {
         y: e.touches[0].clientY
       };
     },
+
     watchTouchMove(e) {
       const pos = this.pos;
       const dx = e.touches[0].clientX - pos.x;
@@ -95,47 +84,28 @@ export default {
         e.stopPropagation();
       }
     },
-    /**
-     * 显示popup
-     */
-    open() {
-      /* istanbul ignore if */
-      if (this.$isServer) return;
-      if (this.opened) return;
 
-      this.opening = true;
+    open() {
+      if (this.opened || this.$isServer) {
+        return;
+      }
 
       this.$emit('input', true);
 
-      const zIndex = this.zIndex;
+      // 如果属性中传入了`zIndex`，则覆盖`context`中对应的`zIndex`
-
+      if (this.zIndex !== undefined) {
-      // 如果属性中传入了`zIndex`，则覆盖`popupContext`中对应的`zIndex`
+        context.zIndex = this.zIndex;
-      if (zIndex) {
-        PopupContext.setContext('zIndex', zIndex);
       }
 
-      // 如果显示遮罩层
       if (this.overlay) {
-        if (this.closing) {
+        manager.openModal(this._popupId, context.plusKeyByOne('zIndex'), this.$el);
-          PopupManager.closeModal(this._popupId);
-          this.closing = false;
-        }
-        PopupManager.openModal(this._popupId, PopupManager.nextZIndex(), this.$el);
-
-        // 如果滚动时需要锁定
         if (this.lockOnScroll) {
-          // 将原来的`bodyOverflow`存起来
+          document.body.classList.add('van-overflow-hidden');
-          if (!this.bodyOverflow) {
-            this.bodyOverflow = document.body.style.overflow;
-          }
-
-          document.body.style.overflow = 'hidden';
         }
       }
 
-      this.$el.style.zIndex = PopupManager.nextZIndex();
+      this.$el.style.zIndex = context.plusKeyByOne('zIndex');
       this.opened = true;
-      this.opening = false;
 
       if (this.preventScroll) {
         document.addEventListener('touchstart', this.recordPosition, false);
@@ -143,23 +113,15 @@ export default {
       }
     },
 
-    /**
-     * 关闭popup
-     */
     close() {
-      if (this.closing) return;
+      if (!this.opened || this.$isServer) {
-
+        return;
-      this.closing = true;
+      }
 
       this.$emit('input', false);
 
       if (this.lockOnScroll) {
-        setTimeout(() => {
+        document.body.classList.remove('van-overflow-hidden');
-          if (this.overlay && this.bodyOverflow !== 'hidden') {
-            document.body.style.overflow = this.bodyOverflow;
-          }
-          this.bodyOverflow = null;
-        }, 200);
       }
 
       this.opened = false;
@@ -167,8 +129,7 @@ export default {
     },
 
     doAfterClose() {
-      this.closing = false;
+      manager.closeModal(this._popupId);
-      PopupManager.closeModal(this._popupId);
 
       if (this.preventScroll) {
         document.removeEventListener('touchstart', this.recordPosition, false);
@@ -178,12 +139,10 @@ export default {
   },
 
   beforeDestroy() {
-    PopupManager.deregister(this._popupId);
+    context.instances[this._popupId] = null;
-    PopupManager.closeModal(this._popupId);
+    manager.closeModal(this._popupId);
-
+    if (this.lockOnScroll) {
-    if (this.overlay && this.bodyOverflow !== null && this.bodyOverflow !== 'hidden') {
+      document.body.classList.remove('van-overflow-hidden');
-      document.body.style.overflow = this.bodyOverflow;
     }
-    this.bodyOverflow = null;
   }
 };

packages/mixins/popup/popup-context.js

@@ -1,35 +1,15 @@
-import Vue from 'vue';
+const PopupContext = {
-
-const _global = Vue.prototype.$isServer ? global : window;
-
-const DEFAULT_CONTEXT = {
   idSeed: 1,
   zIndex: 2000,
-  hasModal: false,
   instances: {},
-  modalStack: []
+  modalStack: [],
-};
-
-if (!_global.popupContext) {
-  _global.popupContext = {
-    ...DEFAULT_CONTEXT
-  };
-}
-
-const PopupContext = {
-  getContext(key) {
-    return _global.popupContext[key];
-  },
-
-  setContext(key, value) {
-    _global.popupContext[key] = value;
-  },
 
   plusKeyByOne(key) {
-    const oldVal = +_global.popupContext[key];
+    return this[key]++;
-    _global.popupContext[key] = oldVal + 1;
+  },
 
-    return oldVal;
+  get topModal() {
+    return this.modalStack[this.modalStack.length - 1];
   }
 };
 

packages/mixins/popup/popup-manager.js

@@ -1,133 +1,68 @@
-import Vue from 'vue';
+import context from './popup-context';
-import PopupContext from './popup-context';
-
-const getModal = function() {
-  if (Vue.prototype.$isServer) return;
-  let modalDom = PopupContext.getContext('modalDom');
-
-  if (modalDom) {
-    PopupContext.setContext('hasModal', true);
-  } else {
-    PopupContext.setContext('hasModal', false);
-
-    modalDom = document.createElement('div');
-    PopupContext.setContext('modalDom', modalDom);
-
-    modalDom.addEventListener('touchmove', function(event) {
-      event.preventDefault();
-      event.stopPropagation();
-    });
-
-    modalDom.addEventListener('click', function() {
-      PopupManager.handleOverlayClick && PopupManager.handleOverlayClick();
-    });
-  }
-
-  return modalDom;
-};
 
 const PopupManager = {
-  nextZIndex() {
+  getModal() {
-    return PopupContext.plusKeyByOne('zIndex');
+    let { modal } = context;
-  },
 
-  getInstance(id) {
+    if (!modal) {
-    return PopupContext.getContext('instances')[id];
+      modal = document.createElement('div');
-  },
+      modal.classList.add('van-modal');
+      modal.addEventListener('touchmove', event => {
+        event.preventDefault();
+        event.stopPropagation();
+      });
+      modal.addEventListener('click', () => {
+        PopupManager.handleOverlayClick();
+      });
 
-  register(id, instance) {
+      context.modal = modal;
-    if (id && instance) {
-      const instances = PopupContext.getContext('instances');
-      instances[id] = instance;
     }
+
+    return modal;
   },
 
-  deregister(id) {
+  // close popup when click modal && closeOnClickOverlay is true
-    if (id) {
-      const instances = PopupContext.getContext('instances');
-      instances[id] = null;
-      delete instances[id];
-    }
-  },
-
-  /**
-   * 遮罩层点击回调，`closeOnClickOverlay`为`true`时会关闭当前`popup`
-   */
   handleOverlayClick() {
-    const modalStack = PopupContext.getContext('modalStack');
+    const { topModal } = context;
-    const topModal = modalStack[modalStack.length - 1];
+    if (topModal) {
-    if (!topModal) return;
+      const instance = context.instances[topModal.id];
-
+      if (instance && instance.closeOnClickOverlay) {
-    const instance = PopupManager.getInstance(topModal.id);
+        instance.close();
-    if (instance && instance.closeOnClickOverlay) {
+      }
-      instance.close();
     }
   },
 
   openModal(id, zIndex, dom) {
-    if (!id || zIndex === undefined) return;
+    const { modalStack } = context;
+    const exist = modalStack.some(item => item.id === id);
 
-    const modalStack = PopupContext.getContext('modalStack');
+    if (!exist) {
+      const modal = this.getModal();
+      modal.style.zIndex = zIndex;
 
-    for (let i = 0, len = modalStack.length; i < len; i++) {
+      const parentNode = dom && dom.parentNode && dom.parentNode.nodeType !== 11 ? dom.parentNode : document.body;
-      const item = modalStack[i];
+      parentNode.appendChild(modal);
-      if (item.id === id) {
+      modalStack.push({ id, zIndex, parentNode });
-        return;
+    };
-      }
-    }
-
-    const modalDom = getModal();
-
-    modalDom.classList.add('van-modal');
-
-    let domParentNode;
-    if (dom && dom.parentNode && dom.parentNode.nodeType !== 11) {
-      domParentNode = dom.parentNode;
-    } else {
-      domParentNode = document.body;
-    }
-    domParentNode.appendChild(modalDom);
-
-    if (zIndex) {
-      modalDom.style.zIndex = zIndex;
-    }
-    modalDom.style.display = '';
-
-    modalStack.push({ id: id, zIndex: zIndex, parentNode: domParentNode });
   },
 
   closeModal(id) {
-    const modalStack = PopupContext.getContext('modalStack');
+    const { modalStack } = context;
-    const modalDom = getModal();
 
-    if (modalStack.length > 0) {
+    if (modalStack.length) {
-      const topItem = modalStack[modalStack.length - 1];
+      if (context.topModal.id === id) {
-      if (topItem.id === id) {
+        const modal = this.getModal();
         modalStack.pop();
-        if (modalStack.length > 0) {
+        modal.parentNode.removeChild(modal);
-          modalDom.style.zIndex = modalStack[modalStack.length - 1].zIndex;
+        if (modalStack.length) {
-          modalDom.parentNode.removeChild(modalDom);
+          const { topModal } = context;
-          const currModalParent = modalStack[0].parentNode;
+          modal.style.zIndex = topModal.zIndex;
-          currModalParent && currModalParent.appendChild(modalDom);
+          topModal.parentNode.appendChild(modal);
         }
       } else {
-        for (let i = modalStack.length - 1; i >= 0; i--) {
+        context.modalStack = modalStack.filter(item => item.id !== id);
-          if (modalStack[i].id === id) {
-            modalStack.splice(i, 1);
-            break;
-          }
-        }
       }
     }
-
-    if (modalStack.length === 0) {
-      setTimeout(() => {
-        if (modalDom.parentNode) modalDom.parentNode.removeChild(modalDom);
-
-        modalDom.style.display = 'none';
-        this.modalDom = null;
-      }, 200);
-    }
   }
 };
 

packages/popup/index.vue

@@ -1,6 +1,6 @@
 <template>
   <transition :name="currentTransition">
-    <div v-show="currentValue" class="van-popup" :class="[position ? 'van-popup--' + position : '']">
+    <div v-show="value" class="van-popup" :class="[position ? 'van-popup--' + position : '']">
       <slot></slot>
     </div>
   </transition>
@@ -8,29 +8,23 @@
 
 <script>
 import Popup from '../mixins/popup';
+
 export default {
   name: 'van-popup',
 
   mixins: [Popup],
 
   props: {
+    transition: String,
     overlay: {
       default: true
     },
-
     lockOnScroll: {
       default: false
     },
-
     closeOnClickOverlay: {
       default: true
     },
-
-    transition: {
-      type: String,
-      default: 'popup-slide'
-    },
-
     position: {
       type: String,
       default: ''
@@ -38,31 +32,15 @@ export default {
   },
 
   data() {
+    const transition = this.transition || (this.position === '' ? 'popup-fade' : `popup-slide-${this.position}`);
     return {
       currentValue: false,
-      currentTransition: this.transition
+      currentTransition: transition
     };
   },
 
-  watch: {
-    currentValue(val) {
-      this.$emit('input', val);
-    },
-
-    value(val) {
-      this.currentValue = val;
-    }
-  },
-
-  beforeMount() {
-    if (this.transition !== 'popup-fade') {
-      this.currentTransition = `popup-slide-${this.position}`;
-    }
-  },
-
   mounted() {
     if (this.value) {
-      this.currentValue = true;
       this.open();
     }
   }

packages/vant-css/src/common/animation.css

@@ -10,6 +10,15 @@
   }
 }
 
+@keyframes van-fade-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
 .van-slide-bottom {
   &-enter-active {
     animation: van-slide-bottom-enter .3s both ease;

packages/vant-css/src/popup.css

@@ -8,7 +8,11 @@
     top: 0;
     left: 0;
     background-color: rgba(0, 0, 0, 0.7);
-    transition: .5s ease-out;
+    animation: van-fade-in .3s both;
+  }
+
+  &-overflow-hidden {
+    overflow: hidden !important;
   }
 
   &-popup {

test/unit/specs/popup.spec.js

@@ -27,12 +27,11 @@ describe('Popup', () => {
     });
 
     const eventStub = sinon.stub(wrapper.vm, '$emit');
-    expect(wrapper.data().currentValue).to.be.false;
+    expect(wrapper.element.style.display).to.equal('none');
 
     wrapper.vm.value = true;
-    wrapper.update();
     wrapper.vm.$nextTick(() => {
-      expect(wrapper.data().currentValue).to.be.true;
+      expect(wrapper.element.style.display).to.equal('');
       expect(eventStub.calledWith('input'));
       done();
     });
@@ -45,7 +44,7 @@ describe('Popup', () => {
       }
     });
 
-    expect(wrapper.data().currentValue).to.be.true;
+    expect(wrapper.element.style.display).to.equal('');
   });
 
   it('create a popup-fade transition popup', () => {
@@ -70,7 +69,7 @@ describe('Popup', () => {
     expect(wrapper.hasClass('van-popup')).to.be.true;
 
     setTimeout(() => {
-      expect(wrapper.data().currentValue).to.be.true;
+      expect(wrapper.element.style.display).to.equal('');
       wrapper.vm.value = false;
       triggerTouch(document, 'touchstart', 0, 0);
       triggerTouch(document, 'touchmove', 0, 10);
@@ -78,7 +77,7 @@ describe('Popup', () => {
       triggerTouch(document, 'touchmove', 0, -30);
 
       setTimeout(() => {
-        expect(wrapper.data().currentValue).to.be.false;
+        expect(wrapper.element.style.display).to.equal('none');
         done();
       }, 300);
     }, 300);