popup component

src/index.js

@@ -5,6 +5,7 @@ import Radio from '../packages/radio/index.js';
 import Cell from '../packages/cell/index.js';
 import Icon from '../packages/icon/index.js';
 import CellGroup from '../packages/cell-group/index.js';
+import Popup from '../packages/popup/index.js';
 // zanui
 import '../packages/zanui/src/index.pcss';
 
@@ -18,6 +19,7 @@ const install = function(Vue) {
   Vue.component(Cell.name, Cell);
   Vue.component(Icon.name, Icon);
   Vue.component(CellGroup.name, CellGroup);
+  Vue.component(Popup.name, Popup);
 };
 
 // auto install
@@ -34,5 +36,6 @@ module.exports = {
   Radio,
   Cell,
   Icon,
-  CellGroup
+  CellGroup,
+  Popup
 };

src/mixins/popup/index.js

@@ -0,0 +1,194 @@
+import Vue from 'vue';
+import merge from 'src/utils/merge';
+import PopupManager from './popup-manager';
+
+let idSeed = 1;
+
+const getDOM = function(dom) {
+  if (dom.nodeType === 3) {
+    dom = dom.nextElementSibling || dom.nextSibling;
+    getDOM(dom);
+  }
+  return dom;
+};
+
+let scrollBarWidth;
+const getScrollBarWidth = () => {
+  if (Vue.prototype.$isServer) return;
+  if (scrollBarWidth !== undefined) return scrollBarWidth;
+
+  const outer = document.createElement('div');
+  outer.style.visibility = 'hidden';
+  outer.style.width = '100px';
+  outer.style.position = 'absolute';
+  outer.style.top = '-9999px';
+  document.body.appendChild(outer);
+
+  const widthNoScroll = outer.offsetWidth;
+  outer.style.overflow = 'scroll';
+
+  const inner = document.createElement('div');
+  inner.style.width = '100%';
+  outer.appendChild(inner);
+
+  const widthWithScroll = inner.offsetWidth;
+  outer.parentNode.removeChild(outer);
+
+  return widthNoScroll - widthWithScroll;
+};
+
+export default {
+  props: {
+    /**
+     * popup当前显示状态
+     */
+    value: {
+      type: Boolean,
+      default: false
+    },
+    /**
+     * 是否显示遮罩层
+     */
+    overlay: {
+      type: Boolean,
+      default: false
+    },
+    /**
+     * 点击遮罩层是否关闭popup
+     */
+    closeOnClickOverlay: {
+      type: Boolean,
+      default: false
+    },
+    zIndex: [String, Number],
+    /**
+     * popup滚动时是否body内容也滚动
+     * 默认为不滚动
+     */
+    lockOnScroll: {
+      type: Boolean,
+      default: true
+    }
+  },
+
+  watch: {
+    value(val) {
+      if (val) {
+        if (this.opening) return;
+
+        if (!this.rendered) {
+          this.rendered = true;
+          Vue.nextTick(() => {
+            this.open();
+          });
+        } else {
+          this.open();
+        }
+      } else {
+        this.close();
+      }
+    }
+  },
+
+  beforeMount() {
+    this._popupId = 'popup-' + idSeed++;
+    PopupManager.register(this._popupId, this);
+  },
+
+  data() {
+    return {
+      opening: false,
+      opened: false,
+      closing: false,
+      bodyOverflow: null,
+      bodyPaddingRight: null
+    };
+  },
+
+  methods: {
+    /**
+     * 显示popup
+     */
+    open(options) {
+      if (this.opened) return;
+
+      this.opening = true;
+
+      this.$emit('input', true);
+
+      const dom = getDOM(this.$el);
+      const props = merge({}, this, options);
+      const overlay = props.overlay;
+      const zIndex = props.zIndex;
+
+      // 如果属性中传入了`zIndex`，则覆盖`PopupManager`中对应的`zIndex`
+      if (zIndex) {
+        PopupManager.zIndex = zIndex;
+      }
+
+      // 如果显示遮罩层
+      if (overlay) {
+        if (this.closing) {
+          PopupManager.closeModal(this._popupId);
+          this.closing = false;
+        }
+        PopupManager.openModal(this._popupId, PopupManager.nextZIndex(), dom);
+        if (props.lockOnScroll) {
+          // 将原来的`bodyOverflow`和`bodyPaddingRight`存起来
+          if (!this.bodyOverflow) {
+            this.bodyPaddingRight = document.body.style.paddingRight;
+            this.bodyOverflow = document.body.style.overflow;
+          }
+          scrollBarWidth = getScrollBarWidth();
+          let bodyHasOverflow = document.documentElement.clientHeight < document.body.scrollHeight;
+          if (scrollBarWidth > 0 && bodyHasOverflow) {
+            document.body.style.paddingRight = scrollBarWidth + 'px';
+          }
+          document.body.style.overlay = 'hidden';
+        }
+      }
+
+      dom.style.zIndex = PopupManager.nextZIndex();
+      this.opened = true;
+      this.opening = false;
+    },
+
+    /**
+     * 关闭popup
+     */
+    close() {
+      if (this.closing) return;
+
+      this.closing = true;
+
+      this.$emit('input', false);
+
+      if (this.lockOnScroll) {
+        setTimeout(() => {
+          if (this.modal && this.bodyOverflow !== 'hidden') {
+            document.body.style.overflow = this.bodyOverflow;
+            document.body.style.paddingRight = this.bodyPaddingRight;
+          }
+          this.bodyOverflow = null;
+          this.bodyPaddingRight = null;
+        }, 200);
+      }
+
+      PopupManager.closeModal(this._popupId);
+      this.opened = false;
+      this.closing = false;
+    }
+  },
+
+  beforeDestroy() {
+    PopupManager.deregister(this._popupId);
+    PopupManager.closeModal(this._popupId);
+
+    if (this.modal && this.bodyOverflow !== null && this.bodyOverflow !== 'hidden') {
+      document.body.style.overflow = this.bodyOverflow;
+      document.body.style.paddingRight = this.bodyPaddingRight;
+    }
+    this.bodyOverflow = null;
+    this.bodyPaddingRight = null;
+  }
+};

src/mixins/popup/popup-manager.js

@@ -0,0 +1,133 @@
+import { addClass, removeClass } from 'src/utils/dom';
+
+let hasModal = false;
+
+const getModal = function() {
+  let modalDom = PopupManager.modalDom;
+  if (modalDom) {
+    hasModal = true;
+  } else {
+    hasModal = false;
+    modalDom = document.createElement('div');
+    PopupManager.modalDom = modalDom;
+
+    modalDom.addEventListener('touchmove', function(event) {
+      event.preventDefault();
+      event.stopPropagation();
+    });
+
+    modalDom.addEventListener('click', function() {
+      PopupManager.handleOverlayClick && PopupManager.handleOverlayClick();
+    });
+  }
+
+  return modalDom;
+};
+
+const instances = {};
+
+const PopupManager = {
+  zIndex: 2000,
+
+  modalStack: [],
+
+  nextZIndex() {
+    return this.zIndex++;
+  },
+
+  getInstance(id) {
+    return instances[id];
+  },
+
+  register(id, instance) {
+    if (id && instance) {
+      instances[id] = instance;
+    }
+  },
+
+  deregister(id) {
+    if (id) {
+      instances[id] = null;
+      delete instances[id];
+    }
+  },
+
+  handleOverlayClick() {
+    const topModal = PopupManager.modalStack[PopupManager.modalStack.length - 1];
+    if (!topModal) return;
+
+    const instance = PopupManager.getInstance(topModal.id);
+    if (instance && instance.closeOnClickOverlay) {
+      instance.close();
+    }
+  },
+
+  openModal(id, zIndex, dom) {
+    if (!id || zIndex === undefined) return;
+
+    const modalStack = this.modalStack;
+
+    for (let i = 0, j = modalStack.length; i < j; i++) {
+      const item = modalStack[i];
+      if (item.id === id) {
+        return;
+      }
+    }
+
+    const modalDom = getModal();
+
+    addClass(modalDom, 'v-modal');
+    setTimeout(() => {
+      removeClass(modalDom, 'v-modal-enter');
+    }, 200);
+
+    if (dom && dom.parentNode && dom.parentNode.nodeType !== 11) {
+      dom.parentNode.appendChild(modalDom);
+    } else {
+      document.body.appendChild(modalDom);
+    }
+
+    if (zIndex) {
+      modalDom.style.zIndex = zIndex;
+    }
+    modalDom.style.display = '';
+
+    this.modalStack.push({ id: id, zIndex: zIndex });
+  },
+
+  closeModal(id) {
+    const modalStack = this.modalStack;
+    const modalDom = getModal();
+
+    if (modalStack.length > 0) {
+      const topItem = modalStack[modalStack.length - 1];
+      if (topItem.id === id) {
+        modalStack.pop();
+        if (modalStack.length > 0) {
+          modalDom.style.zIndex = modalStack[modalStack.length - 1].zIndex;
+        }
+      } else {
+        for (let i = modalStack.length - 1; i >= 0; i--) {
+          if (modalStack[i].id === id) {
+            modalStack.splice(i, 1);
+            break;
+          }
+        }
+      }
+    }
+
+    if (modalStack.length === 0) {
+      setTimeout(() => {
+        if (modalStack.length === 0) {
+          if (modalDom.parentNode) modalDom.parentNode.removeChild(modalDom);
+
+          modalDom.style.display = 'none';
+          this.modalDom = undefined;
+        }
+        removeClass(modalDom, 'v-modal-leave');
+      }, 200);
+    }
+  }
+};
+
+export default PopupManager;

src/utils/dom.js

@@ -0,0 +1,45 @@
+/* istanbul ignore next */
+export function addClass(el, cls) {
+  if (!el) return;
+  var curClass = el.className;
+  var classes = (cls || '').split(' ');
+
+  for (var i = 0, j = classes.length; i < j; i++) {
+    var clsName = classes[i];
+    if (!clsName) continue;
+
+    if (el.classList) {
+      el.classList.add(clsName);
+    } else {
+      if (!hasClass(el, clsName)) {
+        curClass += ' ' + clsName;
+      }
+    }
+  }
+  if (!el.classList) {
+    el.className = curClass;
+  }
+};
+
+/* istanbul ignore next */
+export function removeClass(el, cls) {
+  if (!el || !cls) return;
+  var classes = cls.split(' ');
+  var curClass = ' ' + el.className + ' ';
+
+  for (var i = 0, j = classes.length; i < j; i++) {
+    var clsName = classes[i];
+    if (!clsName) continue;
+
+    if (el.classList) {
+      el.classList.remove(clsName);
+    } else {
+      if (hasClass(el, clsName)) {
+        curClass = curClass.replace(' ' + clsName + ' ', ' ');
+      }
+    }
+  }
+  if (!el.classList) {
+    el.className = trim(curClass);
+  }
+};

src/utils/merge.js

@@ -0,0 +1,15 @@
+export default function(target, ...sources) {
+  for (let i = 1, j = sources.length; i < j; i++) {
+    let source = arguments[i] || {};
+    for (let prop in source) {
+      if (source.hasOwnProperty(prop)) {
+        let value = source[prop];
+        if (value !== undefined) {
+          target[prop] = value;
+        }
+      }
+    }
+  }
+
+  return target;
+};