middle-admin-ant/src/application/mk/components/dialog/dialog.vue

58 lines
1.3 KiB
Vue

<template>
<vxe-modal class="vxe-table--ignore-clear" id="myModal" @close="modalClose" v-model="visible" :width="width" :height="height"
min-width="600" min-height="400" show-zoom resize remember storage transfer>
<template #title>
<span>{{ title }}</span>
</template>
<template #default>
<component :is="app" :dataId="dataId" :pageMode="pageMode" @callback="handleCallback"></component>
</template>
</vxe-modal>
</template>
<script>
export default {
name: "myDialog",
data() {
return {
width:800,
height:500,
visible: false,
title: "提示",
callback: null,
dataId: "",
pageMode: "", //add edit select
app: null
};
},
methods: {
open(options) {
const { page, title, callback, pageMode, dataId,width = 800,height = 500 } = options || {};
this.width = width;
this.height = height;
this.dataId = dataId;
this.pageMode = pageMode;
this.title = title;
this.app = page;
this.callback = callback;
this.visible = true;
},
handleCallback(e) {
const { callback } = this;
if (callback) {
callback(e);
this.$destroy();
}
},
modalClose() {
this.$destroy();
}
},
};
</script>