7a9a74697eb02a10827c5ca617b5a6243e029076d6925a497ea7597231109c93d4e4544d00f33467f644c904bf8c420fab8240ae38bb8091da9f12f190d120 4.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194
  1. import Vue from 'vue';
  2. import { addClass, removeClass } from 'element-ui/src/utils/dom';
  3. let hasModal = false;
  4. let hasInitZIndex = false;
  5. let zIndex;
  6. const getModal = function() {
  7. if (Vue.prototype.$isServer) return;
  8. let modalDom = PopupManager.modalDom;
  9. if (modalDom) {
  10. hasModal = true;
  11. } else {
  12. hasModal = false;
  13. modalDom = document.createElement('div');
  14. PopupManager.modalDom = modalDom;
  15. modalDom.addEventListener('touchmove', function(event) {
  16. event.preventDefault();
  17. event.stopPropagation();
  18. });
  19. modalDom.addEventListener('click', function() {
  20. PopupManager.doOnModalClick && PopupManager.doOnModalClick();
  21. });
  22. }
  23. return modalDom;
  24. };
  25. const instances = {};
  26. const PopupManager = {
  27. modalFade: true,
  28. getInstance: function(id) {
  29. return instances[id];
  30. },
  31. register: function(id, instance) {
  32. if (id && instance) {
  33. instances[id] = instance;
  34. }
  35. },
  36. deregister: function(id) {
  37. if (id) {
  38. instances[id] = null;
  39. delete instances[id];
  40. }
  41. },
  42. nextZIndex: function() {
  43. return PopupManager.zIndex++;
  44. },
  45. modalStack: [],
  46. doOnModalClick: function() {
  47. const topItem = PopupManager.modalStack[PopupManager.modalStack.length - 1];
  48. if (!topItem) return;
  49. const instance = PopupManager.getInstance(topItem.id);
  50. if (instance && instance.closeOnClickModal) {
  51. instance.close();
  52. }
  53. },
  54. openModal: function(id, zIndex, dom, modalClass, modalFade) {
  55. if (Vue.prototype.$isServer) return;
  56. if (!id || zIndex === undefined) return;
  57. this.modalFade = modalFade;
  58. const modalStack = this.modalStack;
  59. for (let i = 0, j = modalStack.length; i < j; i++) {
  60. const item = modalStack[i];
  61. if (item.id === id) {
  62. return;
  63. }
  64. }
  65. const modalDom = getModal();
  66. addClass(modalDom, 'v-modal');
  67. if (this.modalFade && !hasModal) {
  68. addClass(modalDom, 'v-modal-enter');
  69. }
  70. if (modalClass) {
  71. let classArr = modalClass.trim().split(/\s+/);
  72. classArr.forEach(item => addClass(modalDom, item));
  73. }
  74. setTimeout(() => {
  75. removeClass(modalDom, 'v-modal-enter');
  76. }, 200);
  77. if (dom && dom.parentNode && dom.parentNode.nodeType !== 11) {
  78. dom.parentNode.appendChild(modalDom);
  79. } else {
  80. document.body.appendChild(modalDom);
  81. }
  82. if (zIndex) {
  83. modalDom.style.zIndex = zIndex;
  84. }
  85. modalDom.tabIndex = 0;
  86. modalDom.style.display = '';
  87. this.modalStack.push({ id: id, zIndex: zIndex, modalClass: modalClass });
  88. },
  89. closeModal: function(id) {
  90. const modalStack = this.modalStack;
  91. const modalDom = getModal();
  92. if (modalStack.length > 0) {
  93. const topItem = modalStack[modalStack.length - 1];
  94. if (topItem.id === id) {
  95. if (topItem.modalClass) {
  96. let classArr = topItem.modalClass.trim().split(/\s+/);
  97. classArr.forEach(item => removeClass(modalDom, item));
  98. }
  99. modalStack.pop();
  100. if (modalStack.length > 0) {
  101. modalDom.style.zIndex = modalStack[modalStack.length - 1].zIndex;
  102. }
  103. } else {
  104. for (let i = modalStack.length - 1; i >= 0; i--) {
  105. if (modalStack[i].id === id) {
  106. modalStack.splice(i, 1);
  107. break;
  108. }
  109. }
  110. }
  111. }
  112. if (modalStack.length === 0) {
  113. if (this.modalFade) {
  114. addClass(modalDom, 'v-modal-leave');
  115. }
  116. setTimeout(() => {
  117. if (modalStack.length === 0) {
  118. if (modalDom.parentNode) modalDom.parentNode.removeChild(modalDom);
  119. modalDom.style.display = 'none';
  120. PopupManager.modalDom = undefined;
  121. }
  122. removeClass(modalDom, 'v-modal-leave');
  123. }, 200);
  124. }
  125. }
  126. };
  127. Object.defineProperty(PopupManager, 'zIndex', {
  128. configurable: true,
  129. get() {
  130. if (!hasInitZIndex) {
  131. zIndex = zIndex || (Vue.prototype.$ELEMENT || {}).zIndex || 2000;
  132. hasInitZIndex = true;
  133. }
  134. return zIndex;
  135. },
  136. set(value) {
  137. zIndex = value;
  138. }
  139. });
  140. const getTopPopup = function() {
  141. if (Vue.prototype.$isServer) return;
  142. if (PopupManager.modalStack.length > 0) {
  143. const topPopup = PopupManager.modalStack[PopupManager.modalStack.length - 1];
  144. if (!topPopup) return;
  145. const instance = PopupManager.getInstance(topPopup.id);
  146. return instance;
  147. }
  148. };
  149. if (!Vue.prototype.$isServer) {
  150. // handle `esc` key when the popup is shown
  151. window.addEventListener('keydown', function(event) {
  152. if (event.keyCode === 27) {
  153. const topPopup = getTopPopup();
  154. if (topPopup && topPopup.closeOnPressEscape) {
  155. topPopup.handleClose
  156. ? topPopup.handleClose()
  157. : (topPopup.handleAction ? topPopup.handleAction('cancel') : topPopup.close());
  158. }
  159. }
  160. });
  161. }
  162. export default PopupManager;