init
This commit is contained in:
梁朝伟
233
public/static/libs/element-ui/lib/utils/popup/index.js
Normal file
233
public/static/libs/element-ui/lib/utils/popup/index.js
Normal file
@@ -0,0 +1,233 @@
|
||||
'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;
|
||||
205
public/static/libs/element-ui/lib/utils/popup/popup-manager.js
Normal file
205
public/static/libs/element-ui/lib/utils/popup/popup-manager.js
Normal file
@@ -0,0 +1,205 @@
|
||||
'use strict';
|
||||
|
||||
exports.__esModule = true;
|
||||
|
||||
var _vue = require('vue');
|
||||
|
||||
var _vue2 = _interopRequireDefault(_vue);
|
||||
|
||||
var _dom = require('element-ui/lib/utils/dom');
|
||||
|
||||
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
||||
|
||||
var hasModal = false;
|
||||
var hasInitZIndex = false;
|
||||
var zIndex = void 0;
|
||||
|
||||
var getModal = function getModal() {
|
||||
if (_vue2.default.prototype.$isServer) return;
|
||||
var modalDom = PopupManager.modalDom;
|
||||
if (modalDom) {
|
||||
hasModal = true;
|
||||
} else {
|
||||
hasModal = false;
|
||||
modalDom = document.createElement('div');
|
||||
PopupManager.modalDom = modalDom;
|
||||
|
||||
modalDom.addEventListener('touchmove', function (event) {
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
});
|
||||
|
||||
modalDom.addEventListener('click', function () {
|
||||
PopupManager.doOnModalClick && PopupManager.doOnModalClick();
|
||||
});
|
||||
}
|
||||
|
||||
return modalDom;
|
||||
};
|
||||
|
||||
var instances = {};
|
||||
|
||||
var PopupManager = {
|
||||
modalFade: true,
|
||||
|
||||
getInstance: function getInstance(id) {
|
||||
return instances[id];
|
||||
},
|
||||
|
||||
register: function register(id, instance) {
|
||||
if (id && instance) {
|
||||
instances[id] = instance;
|
||||
}
|
||||
},
|
||||
|
||||
deregister: function deregister(id) {
|
||||
if (id) {
|
||||
instances[id] = null;
|
||||
delete instances[id];
|
||||
}
|
||||
},
|
||||
|
||||
nextZIndex: function nextZIndex() {
|
||||
return PopupManager.zIndex++;
|
||||
},
|
||||
|
||||
modalStack: [],
|
||||
|
||||
doOnModalClick: function doOnModalClick() {
|
||||
var topItem = PopupManager.modalStack[PopupManager.modalStack.length - 1];
|
||||
if (!topItem) return;
|
||||
|
||||
var instance = PopupManager.getInstance(topItem.id);
|
||||
if (instance && instance.closeOnClickModal) {
|
||||
instance.close();
|
||||
}
|
||||
},
|
||||
|
||||
openModal: function openModal(id, zIndex, dom, modalClass, modalFade) {
|
||||
if (_vue2.default.prototype.$isServer) return;
|
||||
if (!id || zIndex === undefined) return;
|
||||
this.modalFade = modalFade;
|
||||
|
||||
var modalStack = this.modalStack;
|
||||
|
||||
for (var i = 0, j = modalStack.length; i < j; i++) {
|
||||
var item = modalStack[i];
|
||||
if (item.id === id) {
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
var modalDom = getModal();
|
||||
|
||||
(0, _dom.addClass)(modalDom, 'v-modal');
|
||||
if (this.modalFade && !hasModal) {
|
||||
(0, _dom.addClass)(modalDom, 'v-modal-enter');
|
||||
}
|
||||
if (modalClass) {
|
||||
var classArr = modalClass.trim().split(/\s+/);
|
||||
classArr.forEach(function (item) {
|
||||
return (0, _dom.addClass)(modalDom, item);
|
||||
});
|
||||
}
|
||||
setTimeout(function () {
|
||||
(0, _dom.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 = '';
|
||||
|
||||
this.modalStack.push({ id: id, zIndex: zIndex, modalClass: modalClass });
|
||||
},
|
||||
|
||||
closeModal: function closeModal(id) {
|
||||
var modalStack = this.modalStack;
|
||||
var modalDom = getModal();
|
||||
|
||||
if (modalStack.length > 0) {
|
||||
var topItem = modalStack[modalStack.length - 1];
|
||||
if (topItem.id === id) {
|
||||
if (topItem.modalClass) {
|
||||
var classArr = topItem.modalClass.trim().split(/\s+/);
|
||||
classArr.forEach(function (item) {
|
||||
return (0, _dom.removeClass)(modalDom, item);
|
||||
});
|
||||
}
|
||||
|
||||
modalStack.pop();
|
||||
if (modalStack.length > 0) {
|
||||
modalDom.style.zIndex = modalStack[modalStack.length - 1].zIndex;
|
||||
}
|
||||
} else {
|
||||
for (var i = modalStack.length - 1; i >= 0; i--) {
|
||||
if (modalStack[i].id === id) {
|
||||
modalStack.splice(i, 1);
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (modalStack.length === 0) {
|
||||
if (this.modalFade) {
|
||||
(0, _dom.addClass)(modalDom, 'v-modal-leave');
|
||||
}
|
||||
setTimeout(function () {
|
||||
if (modalStack.length === 0) {
|
||||
if (modalDom.parentNode) modalDom.parentNode.removeChild(modalDom);
|
||||
modalDom.style.display = 'none';
|
||||
PopupManager.modalDom = undefined;
|
||||
}
|
||||
(0, _dom.removeClass)(modalDom, 'v-modal-leave');
|
||||
}, 200);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
Object.defineProperty(PopupManager, 'zIndex', {
|
||||
configurable: true,
|
||||
get: function get() {
|
||||
if (!hasInitZIndex) {
|
||||
zIndex = zIndex || (_vue2.default.prototype.$ELEMENT || {}).zIndex || 2000;
|
||||
hasInitZIndex = true;
|
||||
}
|
||||
return zIndex;
|
||||
},
|
||||
set: function set(value) {
|
||||
zIndex = value;
|
||||
}
|
||||
});
|
||||
|
||||
var getTopPopup = function getTopPopup() {
|
||||
if (_vue2.default.prototype.$isServer) return;
|
||||
if (PopupManager.modalStack.length > 0) {
|
||||
var topPopup = PopupManager.modalStack[PopupManager.modalStack.length - 1];
|
||||
if (!topPopup) return;
|
||||
var instance = PopupManager.getInstance(topPopup.id);
|
||||
|
||||
return instance;
|
||||
}
|
||||
};
|
||||
|
||||
if (!_vue2.default.prototype.$isServer) {
|
||||
// handle `esc` key when the popup is shown
|
||||
window.addEventListener('keydown', function (event) {
|
||||
if (event.keyCode === 27) {
|
||||
var topPopup = getTopPopup();
|
||||
|
||||
if (topPopup && topPopup.closeOnPressEscape) {
|
||||
topPopup.handleClose ? topPopup.handleClose() : topPopup.handleAction ? topPopup.handleAction('cancel') : topPopup.close();
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
exports.default = PopupManager;
|
||||
Reference in New Issue
Block a user