index.js 7.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291
  1. 'use strict';
  2. exports.__esModule = true;
  3. exports.PopupManager = undefined;
  4. var _vue = require('vue');
  5. var _vue2 = _interopRequireDefault(_vue);
  6. var _merge = require('element-ui/lib/utils/merge');
  7. var _merge2 = _interopRequireDefault(_merge);
  8. var _popupManager = require('element-ui/lib/utils/popup/popup-manager');
  9. var _popupManager2 = _interopRequireDefault(_popupManager);
  10. var _scrollbarWidth = require('../scrollbar-width');
  11. var _scrollbarWidth2 = _interopRequireDefault(_scrollbarWidth);
  12. var _dom = require('../dom');
  13. function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
  14. var idSeed = 1;
  15. var transitions = [];
  16. var hookTransition = function hookTransition(transition) {
  17. if (transitions.indexOf(transition) !== -1) return;
  18. var getVueInstance = function getVueInstance(element) {
  19. var instance = element.__vue__;
  20. if (!instance) {
  21. var textNode = element.previousSibling;
  22. if (textNode.__vue__) {
  23. instance = textNode.__vue__;
  24. }
  25. }
  26. return instance;
  27. };
  28. _vue2.default.transition(transition, {
  29. afterEnter: function afterEnter(el) {
  30. var instance = getVueInstance(el);
  31. if (instance) {
  32. instance.doAfterOpen && instance.doAfterOpen();
  33. }
  34. },
  35. afterLeave: function afterLeave(el) {
  36. var instance = getVueInstance(el);
  37. if (instance) {
  38. instance.doAfterClose && instance.doAfterClose();
  39. }
  40. }
  41. });
  42. };
  43. var scrollBarWidth = void 0;
  44. var getDOM = function getDOM(dom) {
  45. if (dom.nodeType === 3) {
  46. dom = dom.nextElementSibling || dom.nextSibling;
  47. getDOM(dom);
  48. }
  49. return dom;
  50. };
  51. exports.default = {
  52. props: {
  53. visible: {
  54. type: Boolean,
  55. default: false
  56. },
  57. transition: {
  58. type: String,
  59. default: ''
  60. },
  61. openDelay: {},
  62. closeDelay: {},
  63. zIndex: {},
  64. modal: {
  65. type: Boolean,
  66. default: false
  67. },
  68. modalFade: {
  69. type: Boolean,
  70. default: true
  71. },
  72. modalClass: {},
  73. modalAppendToBody: {
  74. type: Boolean,
  75. default: false
  76. },
  77. lockScroll: {
  78. type: Boolean,
  79. default: true
  80. },
  81. closeOnPressEscape: {
  82. type: Boolean,
  83. default: false
  84. },
  85. closeOnClickModal: {
  86. type: Boolean,
  87. default: false
  88. }
  89. },
  90. created: function created() {
  91. if (this.transition) {
  92. hookTransition(this.transition);
  93. }
  94. },
  95. beforeMount: function beforeMount() {
  96. this._popupId = 'popup-' + idSeed++;
  97. _popupManager2.default.register(this._popupId, this);
  98. },
  99. beforeDestroy: function beforeDestroy() {
  100. _popupManager2.default.deregister(this._popupId);
  101. _popupManager2.default.closeModal(this._popupId);
  102. if (this.modal && this.bodyOverflow !== null && this.bodyOverflow !== 'hidden') {
  103. document.body.style.overflow = this.bodyOverflow;
  104. document.body.style.paddingRight = this.bodyPaddingRight;
  105. }
  106. this.bodyOverflow = null;
  107. this.bodyPaddingRight = null;
  108. },
  109. data: function data() {
  110. return {
  111. opened: false,
  112. bodyOverflow: null,
  113. bodyPaddingRight: null,
  114. rendered: false
  115. };
  116. },
  117. watch: {
  118. visible: function visible(val) {
  119. var _this = this;
  120. if (val) {
  121. if (this._opening) return;
  122. if (!this.rendered) {
  123. this.rendered = true;
  124. _vue2.default.nextTick(function () {
  125. _this.open();
  126. });
  127. } else {
  128. this.open();
  129. }
  130. } else {
  131. this.close();
  132. }
  133. }
  134. },
  135. methods: {
  136. open: function open(options) {
  137. var _this2 = this;
  138. if (!this.rendered) {
  139. this.rendered = true;
  140. }
  141. var props = (0, _merge2.default)({}, this.$props || this, options);
  142. if (this._closeTimer) {
  143. clearTimeout(this._closeTimer);
  144. this._closeTimer = null;
  145. }
  146. clearTimeout(this._openTimer);
  147. var openDelay = Number(props.openDelay);
  148. if (openDelay > 0) {
  149. this._openTimer = setTimeout(function () {
  150. _this2._openTimer = null;
  151. _this2.doOpen(props);
  152. }, openDelay);
  153. } else {
  154. this.doOpen(props);
  155. }
  156. },
  157. doOpen: function doOpen(props) {
  158. if (this.$isServer) return;
  159. if (this.willOpen && !this.willOpen()) return;
  160. if (this.opened) return;
  161. this._opening = true;
  162. var dom = getDOM(this.$el);
  163. var modal = props.modal;
  164. var zIndex = props.zIndex;
  165. if (zIndex) {
  166. _popupManager2.default.zIndex = zIndex;
  167. }
  168. if (modal) {
  169. if (this._closing) {
  170. _popupManager2.default.closeModal(this._popupId);
  171. this._closing = false;
  172. }
  173. _popupManager2.default.openModal(this._popupId, _popupManager2.default.nextZIndex(), this.modalAppendToBody ? undefined : dom, props.modalClass, props.modalFade);
  174. if (props.lockScroll) {
  175. if (!this.bodyOverflow) {
  176. this.bodyPaddingRight = document.body.style.paddingRight;
  177. this.bodyOverflow = document.body.style.overflow;
  178. }
  179. scrollBarWidth = (0, _scrollbarWidth2.default)();
  180. var bodyHasOverflow = document.documentElement.clientHeight < document.body.scrollHeight;
  181. var bodyOverflowY = (0, _dom.getStyle)(document.body, 'overflowY');
  182. if (scrollBarWidth > 0 && (bodyHasOverflow || bodyOverflowY === 'scroll')) {
  183. document.body.style.paddingRight = scrollBarWidth + 'px';
  184. }
  185. document.body.style.overflow = 'hidden';
  186. }
  187. }
  188. if (getComputedStyle(dom).position === 'static') {
  189. dom.style.position = 'absolute';
  190. }
  191. dom.style.zIndex = _popupManager2.default.nextZIndex();
  192. this.opened = true;
  193. this.onOpen && this.onOpen();
  194. if (!this.transition) {
  195. this.doAfterOpen();
  196. }
  197. },
  198. doAfterOpen: function doAfterOpen() {
  199. this._opening = false;
  200. },
  201. close: function close() {
  202. var _this3 = this;
  203. if (this.willClose && !this.willClose()) return;
  204. if (this._openTimer !== null) {
  205. clearTimeout(this._openTimer);
  206. this._openTimer = null;
  207. }
  208. clearTimeout(this._closeTimer);
  209. var closeDelay = Number(this.closeDelay);
  210. if (closeDelay > 0) {
  211. this._closeTimer = setTimeout(function () {
  212. _this3._closeTimer = null;
  213. _this3.doClose();
  214. }, closeDelay);
  215. } else {
  216. this.doClose();
  217. }
  218. },
  219. doClose: function doClose() {
  220. var _this4 = this;
  221. this._closing = true;
  222. this.onClose && this.onClose();
  223. if (this.lockScroll) {
  224. setTimeout(function () {
  225. if (_this4.modal && _this4.bodyOverflow !== 'hidden') {
  226. document.body.style.overflow = _this4.bodyOverflow;
  227. document.body.style.paddingRight = _this4.bodyPaddingRight;
  228. }
  229. _this4.bodyOverflow = null;
  230. _this4.bodyPaddingRight = null;
  231. }, 200);
  232. }
  233. this.opened = false;
  234. if (!this.transition) {
  235. this.doAfterClose();
  236. }
  237. },
  238. doAfterClose: function doAfterClose() {
  239. _popupManager2.default.closeModal(this._popupId);
  240. this._closing = false;
  241. }
  242. }
  243. };
  244. exports.PopupManager = _popupManager2.default;