uicore-web/packages/components/Dialog/popup-manager.js

web ui core

import Vue from 'vue';
import { addClass, removeClass } from 'element-ui/src/utils/dom';

let hasModal = false;
let hasInitZIndex = false;
let zIndex;

const getModal = function(id) {
  if (Vue.prototype.$isServer) return;
  let modalDom = modalInstances[id];
  if (modalDom) {
    hasModal = true;
  } else {
    hasModal = false;
    modalDom = document.createElement('div');
    modalDom.id=id;
    modalInstances[id]=modalDom;
    modalDom.addEventListener('touchmove', function(event) {
      event.preventDefault();
      event.stopPropagation();
    });
    modalDom.addEventListener('click', function(e) {
      PopupManager.doOnModalClick && PopupManager.doOnModalClick(e);
    });
  }
  return modalDom;
};
const instances = {};
const modalInstances={};
const PopupManager = {
  modalFade: true,
  getInstance: function(id) {
    return instances[id];
  },
  register: function(id, instance) {
    if (id && instance) {
      instances[id] = instance;
    }
  },
  deregister: function(id) {
    if (id) {
      instances[id] = null;
      delete instances[id];
    }
  },
  nextZIndex: function() {
    return PopupManager.zIndex++;
  },
  doOnModalClick: function(e) {
    //需要能够获取到自己的id
    const instance = PopupManager.getInstance(e.target.$el.id);
    if (instance && instance.closeOnClickModal) {
      instance.close();
    }
  },
  openModal: function(id, zIndex, dom, modalClass, modalFade) {
    if (Vue.prototype.$isServer) return;
    if (!id || zIndex === undefined) return;
    this.modalFade = modalFade;
    const modalDom = getModal(id);
    addClass(modalDom, 'v-modal');
    if (this.modalFade && !hasModal) {
      addClass(modalDom, 'v-modal-enter');
    }
    if (modalClass) {
      let classArr = modalClass.trim().split(/\s+/);
      classArr.forEach(item => addClass(modalDom, item));
    }
    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.tabIndex = 0;
    modalDom.style.display = '';
  },
  closeModal: function(id) {
    const modalDom = getModal(id);
    if(modalDom) {
      if (modalDom.modalClass) {
        let classArr = modalDom.modalClass.trim().split(/\s+/);
        classArr.forEach(item => removeClass(modalDom, item));
      }
      if (this.modalFade) {
        addClass(modalDom, 'v-modal-leave');
      }
      setTimeout(() => {
        if (modalDom.parentNode) modalDom.parentNode.removeChild(modalDom);
        modalDom.style.display = 'none';
        PopupManager.deregister(id);
        removeClass(modalDom, 'v-modal-leave');
      }, 200);
    }
  }
};

Object.defineProperty(PopupManager, 'zIndex', {
  configurable: true,
  get() {
    if (!hasInitZIndex) {
      zIndex = zIndex || 100;
      hasInitZIndex = true;
    }
    return zIndex;
  },
  set(value) {
    zIndex = value;
  }
});


export default PopupManager;