index.js 5.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233
  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 scrollBarWidth = void 0;
  16. exports.default = {
  17. props: {
  18. visible: {
  19. type: Boolean,
  20. default: false
  21. },
  22. openDelay: {},
  23. closeDelay: {},
  24. zIndex: {},
  25. modal: {
  26. type: Boolean,
  27. default: false
  28. },
  29. modalFade: {
  30. type: Boolean,
  31. default: true
  32. },
  33. modalClass: {},
  34. modalAppendToBody: {
  35. type: Boolean,
  36. default: false
  37. },
  38. lockScroll: {
  39. type: Boolean,
  40. default: true
  41. },
  42. closeOnPressEscape: {
  43. type: Boolean,
  44. default: false
  45. },
  46. closeOnClickModal: {
  47. type: Boolean,
  48. default: false
  49. }
  50. },
  51. beforeMount: function beforeMount() {
  52. this._popupId = 'popup-' + idSeed++;
  53. _popupManager2.default.register(this._popupId, this);
  54. },
  55. beforeDestroy: function beforeDestroy() {
  56. _popupManager2.default.deregister(this._popupId);
  57. _popupManager2.default.closeModal(this._popupId);
  58. this.restoreBodyStyle();
  59. },
  60. data: function data() {
  61. return {
  62. opened: false,
  63. bodyPaddingRight: null,
  64. computedBodyPaddingRight: 0,
  65. withoutHiddenClass: true,
  66. rendered: false
  67. };
  68. },
  69. watch: {
  70. visible: function visible(val) {
  71. var _this = this;
  72. if (val) {
  73. if (this._opening) return;
  74. if (!this.rendered) {
  75. this.rendered = true;
  76. _vue2.default.nextTick(function () {
  77. _this.open();
  78. });
  79. } else {
  80. this.open();
  81. }
  82. } else {
  83. this.close();
  84. }
  85. }
  86. },
  87. methods: {
  88. open: function open(options) {
  89. var _this2 = this;
  90. if (!this.rendered) {
  91. this.rendered = true;
  92. }
  93. var props = (0, _merge2.default)({}, this.$props || this, options);
  94. if (this._closeTimer) {
  95. clearTimeout(this._closeTimer);
  96. this._closeTimer = null;
  97. }
  98. clearTimeout(this._openTimer);
  99. var openDelay = Number(props.openDelay);
  100. if (openDelay > 0) {
  101. this._openTimer = setTimeout(function () {
  102. _this2._openTimer = null;
  103. _this2.doOpen(props);
  104. }, openDelay);
  105. } else {
  106. this.doOpen(props);
  107. }
  108. },
  109. doOpen: function doOpen(props) {
  110. if (this.$isServer) return;
  111. if (this.willOpen && !this.willOpen()) return;
  112. if (this.opened) return;
  113. this._opening = true;
  114. var dom = this.$el;
  115. var modal = props.modal;
  116. var zIndex = props.zIndex;
  117. if (zIndex) {
  118. _popupManager2.default.zIndex = zIndex;
  119. }
  120. if (modal) {
  121. if (this._closing) {
  122. _popupManager2.default.closeModal(this._popupId);
  123. this._closing = false;
  124. }
  125. _popupManager2.default.openModal(this._popupId, _popupManager2.default.nextZIndex(), this.modalAppendToBody ? undefined : dom, props.modalClass, props.modalFade);
  126. if (props.lockScroll) {
  127. this.withoutHiddenClass = !(0, _dom.hasClass)(document.body, 'el-popup-parent--hidden');
  128. if (this.withoutHiddenClass) {
  129. this.bodyPaddingRight = document.body.style.paddingRight;
  130. this.computedBodyPaddingRight = parseInt((0, _dom.getStyle)(document.body, 'paddingRight'), 10);
  131. }
  132. scrollBarWidth = (0, _scrollbarWidth2.default)();
  133. var bodyHasOverflow = document.documentElement.clientHeight < document.body.scrollHeight;
  134. var bodyOverflowY = (0, _dom.getStyle)(document.body, 'overflowY');
  135. if (scrollBarWidth > 0 && (bodyHasOverflow || bodyOverflowY === 'scroll') && this.withoutHiddenClass) {
  136. document.body.style.paddingRight = this.computedBodyPaddingRight + scrollBarWidth + 'px';
  137. }
  138. (0, _dom.addClass)(document.body, 'el-popup-parent--hidden');
  139. }
  140. }
  141. if (getComputedStyle(dom).position === 'static') {
  142. dom.style.position = 'absolute';
  143. }
  144. dom.style.zIndex = _popupManager2.default.nextZIndex();
  145. this.opened = true;
  146. this.onOpen && this.onOpen();
  147. this.doAfterOpen();
  148. },
  149. doAfterOpen: function doAfterOpen() {
  150. this._opening = false;
  151. },
  152. close: function close() {
  153. var _this3 = this;
  154. if (this.willClose && !this.willClose()) return;
  155. if (this._openTimer !== null) {
  156. clearTimeout(this._openTimer);
  157. this._openTimer = null;
  158. }
  159. clearTimeout(this._closeTimer);
  160. var closeDelay = Number(this.closeDelay);
  161. if (closeDelay > 0) {
  162. this._closeTimer = setTimeout(function () {
  163. _this3._closeTimer = null;
  164. _this3.doClose();
  165. }, closeDelay);
  166. } else {
  167. this.doClose();
  168. }
  169. },
  170. doClose: function doClose() {
  171. this._closing = true;
  172. this.onClose && this.onClose();
  173. if (this.lockScroll) {
  174. setTimeout(this.restoreBodyStyle, 200);
  175. }
  176. this.opened = false;
  177. this.doAfterClose();
  178. },
  179. doAfterClose: function doAfterClose() {
  180. _popupManager2.default.closeModal(this._popupId);
  181. this._closing = false;
  182. },
  183. restoreBodyStyle: function restoreBodyStyle() {
  184. if (this.modal && this.withoutHiddenClass) {
  185. document.body.style.paddingRight = this.bodyPaddingRight;
  186. (0, _dom.removeClass)(document.body, 'el-popup-parent--hidden');
  187. }
  188. this.withoutHiddenClass = true;
  189. }
  190. }
  191. };
  192. exports.PopupManager = _popupManager2.default;