123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233 |
- 'use strict';
- exports.__esModule = true;
- exports.PopupManager = undefined;
- var _vue = require('vue');
- var _vue2 = _interopRequireDefault(_vue);
- var _merge = require('element-ui/lib/utils/merge');
- var _merge2 = _interopRequireDefault(_merge);
- var _popupManager = require('element-ui/lib/utils/popup/popup-manager');
- var _popupManager2 = _interopRequireDefault(_popupManager);
- var _scrollbarWidth = require('../scrollbar-width');
- var _scrollbarWidth2 = _interopRequireDefault(_scrollbarWidth);
- var _dom = require('../dom');
- function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
- var idSeed = 1;
- var scrollBarWidth = void 0;
- exports.default = {
- props: {
- visible: {
- type: Boolean,
- default: false
- },
- openDelay: {},
- closeDelay: {},
- zIndex: {},
- modal: {
- type: Boolean,
- default: false
- },
- modalFade: {
- type: Boolean,
- default: true
- },
- modalClass: {},
- modalAppendToBody: {
- type: Boolean,
- default: false
- },
- lockScroll: {
- type: Boolean,
- default: true
- },
- closeOnPressEscape: {
- type: Boolean,
- default: false
- },
- closeOnClickModal: {
- type: Boolean,
- default: false
- }
- },
- beforeMount: function beforeMount() {
- this._popupId = 'popup-' + idSeed++;
- _popupManager2.default.register(this._popupId, this);
- },
- beforeDestroy: function beforeDestroy() {
- _popupManager2.default.deregister(this._popupId);
- _popupManager2.default.closeModal(this._popupId);
- this.restoreBodyStyle();
- },
- data: function data() {
- return {
- opened: false,
- bodyPaddingRight: null,
- computedBodyPaddingRight: 0,
- withoutHiddenClass: true,
- rendered: false
- };
- },
- watch: {
- visible: function visible(val) {
- var _this = this;
- if (val) {
- if (this._opening) return;
- if (!this.rendered) {
- this.rendered = true;
- _vue2.default.nextTick(function () {
- _this.open();
- });
- } else {
- this.open();
- }
- } else {
- this.close();
- }
- }
- },
- methods: {
- open: function open(options) {
- var _this2 = this;
- if (!this.rendered) {
- this.rendered = true;
- }
- var props = (0, _merge2.default)({}, this.$props || this, options);
- if (this._closeTimer) {
- clearTimeout(this._closeTimer);
- this._closeTimer = null;
- }
- clearTimeout(this._openTimer);
- var openDelay = Number(props.openDelay);
- if (openDelay > 0) {
- this._openTimer = setTimeout(function () {
- _this2._openTimer = null;
- _this2.doOpen(props);
- }, openDelay);
- } else {
- this.doOpen(props);
- }
- },
- doOpen: function doOpen(props) {
- if (this.$isServer) return;
- if (this.willOpen && !this.willOpen()) return;
- if (this.opened) return;
- this._opening = true;
- var dom = this.$el;
- var modal = props.modal;
- var zIndex = props.zIndex;
- if (zIndex) {
- _popupManager2.default.zIndex = zIndex;
- }
- if (modal) {
- if (this._closing) {
- _popupManager2.default.closeModal(this._popupId);
- this._closing = false;
- }
- _popupManager2.default.openModal(this._popupId, _popupManager2.default.nextZIndex(), this.modalAppendToBody ? undefined : dom, props.modalClass, props.modalFade);
- if (props.lockScroll) {
- this.withoutHiddenClass = !(0, _dom.hasClass)(document.body, 'el-popup-parent--hidden');
- if (this.withoutHiddenClass) {
- this.bodyPaddingRight = document.body.style.paddingRight;
- this.computedBodyPaddingRight = parseInt((0, _dom.getStyle)(document.body, 'paddingRight'), 10);
- }
- scrollBarWidth = (0, _scrollbarWidth2.default)();
- var bodyHasOverflow = document.documentElement.clientHeight < document.body.scrollHeight;
- var bodyOverflowY = (0, _dom.getStyle)(document.body, 'overflowY');
- if (scrollBarWidth > 0 && (bodyHasOverflow || bodyOverflowY === 'scroll') && this.withoutHiddenClass) {
- document.body.style.paddingRight = this.computedBodyPaddingRight + scrollBarWidth + 'px';
- }
- (0, _dom.addClass)(document.body, 'el-popup-parent--hidden');
- }
- }
- if (getComputedStyle(dom).position === 'static') {
- dom.style.position = 'absolute';
- }
- dom.style.zIndex = _popupManager2.default.nextZIndex();
- this.opened = true;
- this.onOpen && this.onOpen();
- this.doAfterOpen();
- },
- doAfterOpen: function doAfterOpen() {
- this._opening = false;
- },
- close: function close() {
- var _this3 = this;
- if (this.willClose && !this.willClose()) return;
- if (this._openTimer !== null) {
- clearTimeout(this._openTimer);
- this._openTimer = null;
- }
- clearTimeout(this._closeTimer);
- var closeDelay = Number(this.closeDelay);
- if (closeDelay > 0) {
- this._closeTimer = setTimeout(function () {
- _this3._closeTimer = null;
- _this3.doClose();
- }, closeDelay);
- } else {
- this.doClose();
- }
- },
- doClose: function doClose() {
- this._closing = true;
- this.onClose && this.onClose();
- if (this.lockScroll) {
- setTimeout(this.restoreBodyStyle, 200);
- }
- this.opened = false;
- this.doAfterClose();
- },
- doAfterClose: function doAfterClose() {
- _popupManager2.default.closeModal(this._popupId);
- this._closing = false;
- },
- restoreBodyStyle: function restoreBodyStyle() {
- if (this.modal && this.withoutHiddenClass) {
- document.body.style.paddingRight = this.bodyPaddingRight;
- (0, _dom.removeClass)(document.body, 'el-popup-parent--hidden');
- }
- this.withoutHiddenClass = true;
- }
- }
- };
- exports.PopupManager = _popupManager2.default;
|