xiaoyu
355 lines
11 KiB
JavaScript
355 lines
11 KiB
JavaScript
import { LicenseMixin } from "../utils/license-util";
|
|
import { screenWidth } from "../utils/core";
|
|
import { resizableClass, multipleClass, fullscreenClass, closedClass, hideClass, innerClass, innerMaskClass, collapseClass, navCollapseClass, bodyFullscreenClass, showTabsClass, sideMixClass, sideMixSingleClass, layoutTopClass, contentFullscreenClass, mobileClass, centeredClass, bindMovableEvent, bindResizableEvent, bindAutoSetTopEvent, getModalContainer, resetModalStyle, setInitPosition, setModalTop, responsiveClass, movableClass, moveOutClass, moveOutPositiveClass } from "./util";
|
|
import props from "./props";
|
|
function normalizeComponent(scriptExports, render2, staticRenderFns, functionalTemplate, injectStyles, scopeId, moduleIdentifier, shadowMode) {
|
|
var options = typeof scriptExports === "function" ? scriptExports.options : scriptExports;
|
|
if (render2) {
|
|
options.render = render2;
|
|
options.staticRenderFns = staticRenderFns;
|
|
options._compiled = true;
|
|
}
|
|
if (functionalTemplate) {
|
|
options.functional = true;
|
|
}
|
|
if (scopeId) {
|
|
options._scopeId = "data-v-" + scopeId;
|
|
}
|
|
var hook;
|
|
if (moduleIdentifier) {
|
|
hook = function(context) {
|
|
context = context || this.$vnode && this.$vnode.ssrContext || this.parent && this.parent.$vnode && this.parent.$vnode.ssrContext;
|
|
if (!context && typeof __VUE_SSR_CONTEXT__ !== "undefined") {
|
|
context = __VUE_SSR_CONTEXT__;
|
|
}
|
|
if (injectStyles) {
|
|
injectStyles.call(this, context);
|
|
}
|
|
if (context && context._registeredComponents) {
|
|
context._registeredComponents.add(moduleIdentifier);
|
|
}
|
|
};
|
|
options._ssrRegister = hook;
|
|
} else if (injectStyles) {
|
|
hook = shadowMode ? function() {
|
|
injectStyles.call(
|
|
this,
|
|
(options.functional ? this.parent : this).$root.$options.shadowRoot
|
|
);
|
|
} : injectStyles;
|
|
}
|
|
if (hook) {
|
|
if (options.functional) {
|
|
options._injectStyles = hook;
|
|
var originalRender = options.render;
|
|
options.render = function renderWithStyleInjection(h, context) {
|
|
hook.call(context);
|
|
return originalRender(h, context);
|
|
};
|
|
} else {
|
|
var existing = options.beforeCreate;
|
|
options.beforeCreate = existing ? [].concat(existing, hook) : [hook];
|
|
}
|
|
}
|
|
return {
|
|
exports: scriptExports,
|
|
options
|
|
};
|
|
}
|
|
const _sfc_main = {
|
|
name: "EleModal",
|
|
mixins: [LicenseMixin],
|
|
props,
|
|
inject: {
|
|
proLayout: {
|
|
default: null
|
|
}
|
|
},
|
|
data() {
|
|
var _a;
|
|
return {
|
|
mobile: screenWidth() < 768,
|
|
isFullscreen: (_a = this.fullscreen) != null ? _a : false,
|
|
isActivated: true,
|
|
parentEl: null,
|
|
modalVisible: this.visible,
|
|
renderBody: this.destroyOnClose && !this.visible ? false : true
|
|
};
|
|
},
|
|
computed: {
|
|
layoutData() {
|
|
var _a;
|
|
return (_a = this.proLayout) != null ? _a : {};
|
|
},
|
|
isMobile() {
|
|
var _a;
|
|
return (_a = this.layoutData.isMobile) != null ? _a : this.mobile;
|
|
},
|
|
collapse() {
|
|
return this.layoutData.collapse;
|
|
},
|
|
sideNavCollapse() {
|
|
return this.layoutData.sideNavCollapse;
|
|
},
|
|
isTopMenu() {
|
|
return this.layoutData.isTopMenu;
|
|
},
|
|
isMixSideMenu() {
|
|
return this.layoutData.isMixSideMenu;
|
|
},
|
|
bodyFullscreen() {
|
|
return this.layoutData.bodyFullscreen;
|
|
},
|
|
contentFullscreen() {
|
|
return this.layoutData.contentFullscreen;
|
|
},
|
|
showTabs() {
|
|
return this.layoutData.showTabs;
|
|
},
|
|
haveSideMenuData() {
|
|
return this.layoutData.haveSideMenuData;
|
|
},
|
|
styleResponsive() {
|
|
var _a;
|
|
return (_a = this.layoutData.styleResponsive) != null ? _a : true;
|
|
},
|
|
modalClass() {
|
|
const classes = [];
|
|
if (this.styleResponsive) {
|
|
classes.push(responsiveClass);
|
|
}
|
|
if (!this.isMobile) {
|
|
if (this.movable) {
|
|
classes.push(movableClass);
|
|
}
|
|
if (this.moveOut) {
|
|
classes.push(moveOutClass);
|
|
}
|
|
if (this.moveOutPositive) {
|
|
classes.push(moveOutPositiveClass);
|
|
}
|
|
if (this.resizable) {
|
|
classes.push(resizableClass);
|
|
if (typeof this.resizable === "string") {
|
|
classes.push(resizableClass + "-" + this.resizable);
|
|
}
|
|
}
|
|
}
|
|
if (this.multiple) {
|
|
classes.push(multipleClass);
|
|
}
|
|
if (this.isFullscreen) {
|
|
classes.push(fullscreenClass);
|
|
}
|
|
if (!this.visible) {
|
|
classes.push(closedClass);
|
|
}
|
|
if (!this.isActivated && this.visible) {
|
|
classes.push(hideClass);
|
|
}
|
|
if (this.inner) {
|
|
classes.push(innerClass);
|
|
if (this.modal) {
|
|
classes.push(innerMaskClass);
|
|
}
|
|
if (this.collapse && !this.isTopMenu) {
|
|
classes.push(collapseClass);
|
|
}
|
|
if (this.sideNavCollapse && this.isMixSideMenu && !this.isTopMenu) {
|
|
classes.push(navCollapseClass);
|
|
}
|
|
if (this.bodyFullscreen) {
|
|
classes.push(bodyFullscreenClass);
|
|
}
|
|
if (this.showTabs) {
|
|
classes.push(showTabsClass);
|
|
}
|
|
if (this.isMixSideMenu && !this.isTopMenu) {
|
|
classes.push(sideMixClass);
|
|
if (!this.haveSideMenuData) {
|
|
classes.push(sideMixSingleClass);
|
|
}
|
|
}
|
|
if (this.isTopMenu) {
|
|
classes.push(layoutTopClass);
|
|
}
|
|
if (this.bodyFullscreen && this.contentFullscreen) {
|
|
classes.push(contentFullscreenClass);
|
|
}
|
|
if (this.isMobile) {
|
|
classes.push(mobileClass);
|
|
}
|
|
}
|
|
if (this.centered) {
|
|
classes.push(centeredClass);
|
|
}
|
|
return classes.join(" ");
|
|
},
|
|
dialogStyle() {
|
|
const width = typeof this.width === "number" ? `${this.width / 2}px` : `calc(${this.width} / 2)`;
|
|
return {
|
|
"--modal-centered-left": `calc(50% - ${width})`
|
|
};
|
|
},
|
|
maxIconClass() {
|
|
return [
|
|
"el-dialog__close",
|
|
"el-icon",
|
|
this.isFullscreen ? "el-icon-_compress" : "el-icon-full-screen"
|
|
].join(" ");
|
|
},
|
|
modalMask() {
|
|
if (this.multiple || this.inner) {
|
|
return false;
|
|
}
|
|
return this.modal;
|
|
},
|
|
dialogAppendToBody() {
|
|
return this.multiple ? false : this.appendToBody;
|
|
},
|
|
maskClosable() {
|
|
return this.multiple ? false : this.closeOnClickModal;
|
|
},
|
|
modalTop() {
|
|
return this.centered ? "0px" : this.top;
|
|
}
|
|
},
|
|
mounted() {
|
|
const wrapEl = this.getWrapEl();
|
|
if (this.authenticated) {
|
|
bindMovableEvent(wrapEl);
|
|
bindResizableEvent(wrapEl);
|
|
bindAutoSetTopEvent(wrapEl);
|
|
}
|
|
this.parentEl = wrapEl.parentNode;
|
|
this.updateModalContainer();
|
|
},
|
|
methods: {
|
|
getWrapEl() {
|
|
return this.$refs.modal.$el;
|
|
},
|
|
updateVisible(visible) {
|
|
this.$emit("update:visible", visible);
|
|
},
|
|
onOpen() {
|
|
if (this.destroyOnClose && !this.renderBody) {
|
|
this.renderBody = true;
|
|
}
|
|
this.$emit("open");
|
|
},
|
|
onOpened() {
|
|
this.$emit("opened");
|
|
},
|
|
onClose() {
|
|
if (this.visible === this.modalVisible) {
|
|
this.$emit("close");
|
|
}
|
|
},
|
|
onClosed() {
|
|
if (this.destroyOnClose && this.renderBody) {
|
|
this.renderBody = false;
|
|
}
|
|
if (this.visible === this.modalVisible) {
|
|
this.$emit("closed");
|
|
}
|
|
},
|
|
toggleFullscreen(fullscreen) {
|
|
if (typeof fullscreen === "undefined") {
|
|
this.isFullscreen = !this.isFullscreen;
|
|
} else {
|
|
this.isFullscreen = fullscreen;
|
|
}
|
|
this.$emit("update:fullscreen", this.isFullscreen);
|
|
},
|
|
updateModalContainer() {
|
|
const wrapEl = this.getWrapEl();
|
|
if (this.multiple) {
|
|
getModalContainer().appendChild(wrapEl);
|
|
}
|
|
}
|
|
},
|
|
activated() {
|
|
this.isActivated = true;
|
|
this.modalVisible = this.visible;
|
|
},
|
|
deactivated() {
|
|
this.isActivated = false;
|
|
if (this.modalMask) {
|
|
if (!this.maskKeepAlive) {
|
|
this.updateVisible(false);
|
|
} else if (!this.destroyOnClose) {
|
|
this.modalVisible = false;
|
|
}
|
|
}
|
|
},
|
|
watch: {
|
|
fullscreen(fullscreen) {
|
|
if (this.isFullscreen !== fullscreen) {
|
|
this.isFullscreen = fullscreen;
|
|
}
|
|
},
|
|
visible(visible) {
|
|
this.modalVisible = visible;
|
|
if (visible) {
|
|
this.$nextTick(() => {
|
|
const wrapEl = this.getWrapEl();
|
|
if (this.resetOnClose) {
|
|
resetModalStyle(wrapEl, this.width, this.modalTop);
|
|
}
|
|
if (this.position) {
|
|
setInitPosition(
|
|
wrapEl,
|
|
this.position,
|
|
this.resizable,
|
|
this.moveOut,
|
|
this.resetOnClose
|
|
);
|
|
}
|
|
setModalTop(wrapEl);
|
|
});
|
|
if (this.resetOnClose || this.destroyOnClose) {
|
|
this.isFullscreen = this.fullscreen;
|
|
}
|
|
}
|
|
},
|
|
destroyOnClose(destroyOnClose) {
|
|
if (destroyOnClose) {
|
|
if (!this.visible && this.renderBody) {
|
|
this.renderBody = false;
|
|
}
|
|
} else if (!this.renderBody) {
|
|
this.renderBody = true;
|
|
}
|
|
}
|
|
}
|
|
};
|
|
var _sfc_render = function render() {
|
|
var _vm = this, _c = _vm._self._c;
|
|
return _c("el-dialog", { ref: "modal", class: _vm.modalClass, style: _vm.dialogStyle, attrs: { "visible": _vm.modalVisible, "title": _vm.title, "width": _vm.width, "top": _vm.modalTop, "modal": _vm.modalMask, "modal-append-to-body": _vm.modalAppendToBody, "append-to-body": _vm.dialogAppendToBody, "lock-scroll": _vm.lockScroll, "custom-class": _vm.customClass, "close-on-click-modal": _vm.maskClosable, "close-on-press-escape": _vm.closeOnPressEscape, "show-close": _vm.showClose, "before-close": _vm.beforeClose, "center": _vm.center, "destroy-on-close": false }, on: { "update:visible": _vm.updateVisible, "open": _vm.onOpen, "opened": _vm.onOpened, "close": _vm.onClose, "closed": _vm.onClosed }, scopedSlots: _vm._u([_vm.renderBody ? { key: "title", fn: function() {
|
|
return [_vm._t("title", function() {
|
|
return [_c("span", { staticClass: "el-dialog__title" }, [_vm._v(_vm._s(_vm.title))])];
|
|
}), _vm.maxable ? _c("button", { staticClass: "el-dialog__headerbtn ele-modal-icon-fullscreen", attrs: { "type": "button" }, on: { "click": function($event) {
|
|
return _vm.toggleFullscreen();
|
|
} } }, [_vm._t("maxIcon", function() {
|
|
return [_c("i", { class: _vm.maxIconClass })];
|
|
}, { "fullscreen": _vm.isFullscreen })], 2) : _vm._e()];
|
|
}, proxy: true } : null, _vm.renderBody && _vm.$scopedSlots.footer ? { key: "footer", fn: function() {
|
|
return [_vm._t("footer")];
|
|
}, proxy: true } : null], null, true) }, [_vm.renderBody && _vm.$scopedSlots.default ? [_vm._t("default")] : _vm._e()], 2);
|
|
};
|
|
var _sfc_staticRenderFns = [];
|
|
var __component__ = /* @__PURE__ */ normalizeComponent(
|
|
_sfc_main,
|
|
_sfc_render,
|
|
_sfc_staticRenderFns,
|
|
false,
|
|
null,
|
|
null,
|
|
null,
|
|
null
|
|
);
|
|
const index = __component__.exports;
|
|
export {
|
|
index as default
|
|
};
|