You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 

130 lines
3.9 KiB

import Vue from 'vue';
import { VxeUI } from '@vxe-ui/core';
import XEUtils from 'xe-utils';
import VxeModalComponent, { allActiveModals } from './src/modal';
import { dynamicApp, dynamicStore, checkDynamic } from '../dynamics';
function handleModal(options) {
// 使用动态组件渲染动态弹框
checkDynamic();
return new Promise(resolve => {
const opts = Object.assign({}, options);
if (opts.id && allActiveModals.some(comp => comp.id === opts.id)) {
resolve('exist');
}
else {
const events = Object.assign({}, opts.events);
const modalOpts = {
key: XEUtils.uniqueId(),
props: Object.assign(opts, {
value: true
}),
on: Object.assign(Object.assign({}, events), { hide(params) {
const modalList = dynamicStore.modals;
if (events.hide) {
events.hide.call(this, params);
}
dynamicStore.modals = modalList.filter(item => item.key !== modalOpts.key);
resolve(params.type);
} })
};
dynamicStore.modals.push(modalOpts);
}
});
}
function getModal(id) {
return XEUtils.find(allActiveModals, $modal => $modal.id === id);
}
/**
* 全局关闭动态的活动窗口(只能用于关闭动态的创建的活动窗口)
* 如果传 id 则关闭指定的窗口
* 如果不传则关闭所有窗口
*/
function closeModal(id) {
const modals = id ? [getModal(id)] : allActiveModals;
const restPromises = [];
modals.forEach($modal => {
if ($modal) {
restPromises.push($modal.close());
}
});
return Promise.all(restPromises);
}
function handleOpen(defOpts, content, title, options) {
let opts;
if (XEUtils.isObject(content)) {
opts = content;
}
else {
opts = { content: XEUtils.toValueString(content), title };
}
return handleModal(Object.assign(Object.assign(Object.assign({}, defOpts), options), opts));
}
function openModal(options) {
return handleOpen({
type: 'modal'
}, options);
}
function openAlert(content, title, options) {
return handleOpen({
type: 'alert',
lockScroll: true,
showHeader: true,
showFooter: true
}, content, title, options);
}
function openConfirm(content, title, options) {
return handleOpen({
type: 'confirm',
status: 'question',
lockScroll: true,
showHeader: true,
showFooter: true
}, content, title, options);
}
function openMessage(content, options) {
return handleOpen({
type: 'message',
mask: false,
lockView: false,
lockScroll: false,
showHeader: false
}, content, '', options);
}
function openNotification(content, title, options) {
return handleOpen({
type: 'notification',
mask: false,
lockView: false,
lockScroll: false,
showHeader: true,
draggable: false,
position: 'top-right',
width: 320
}, content, title, options);
}
export const ModalController = {
get: getModal,
close: closeModal,
open: openModal,
alert: openAlert,
confirm: openConfirm,
message: openMessage,
notification: openNotification
};
export const VxeModal = Object.assign(VxeModalComponent, {
install: function (app) {
app.component(VxeModalComponent.name, VxeModalComponent);
// 兼容老版本
if (!Vue.prototype.$vxe) {
Vue.prototype.$vxe = { modal: ModalController };
}
else {
Vue.prototype.$vxe.modal = ModalController;
}
}
});
VxeUI.modal = ModalController;
dynamicApp.use(VxeModal);
VxeUI.component(VxeModalComponent);
export const Modal = VxeModal;
export default VxeModal;