77 lines
1.5 KiB
Vue
77 lines
1.5 KiB
Vue
<template>
|
|
<el-dialog
|
|
:visible.sync="visible"
|
|
:title="title"
|
|
:width="width"
|
|
destroy-on-close
|
|
>
|
|
<component
|
|
v-if="dynamicComponent"
|
|
:is="dynamicComponent"
|
|
ref="dynamicComponentRef"
|
|
v-bind="componentProps"
|
|
@vue:mounted="handleComponentMount"
|
|
/>
|
|
<slot></slot>
|
|
<template #footer>
|
|
<div class="dialog-footer">
|
|
<el-button @click="onCancel"> {{ onCancelName }} </el-button>
|
|
<el-button type="primary" @click="onConfirm"> {{ onConfirmName }} </el-button>
|
|
</div>
|
|
</template>
|
|
</el-dialog>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { computed, ref, } from "vue";
|
|
const dynamicComponentRef = ref(null);
|
|
defineExpose({
|
|
dynamicComponentRef // 暴露给父组件
|
|
});
|
|
|
|
const props = defineProps({
|
|
visible: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
width: {
|
|
type: String,
|
|
default: "50%",
|
|
},
|
|
title: {
|
|
type: String,
|
|
default: "",
|
|
},
|
|
dynamicComponent: {
|
|
type: [Object, Function],
|
|
default: null,
|
|
},
|
|
componentProps: {
|
|
type: Object,
|
|
default: () => ({}),
|
|
},
|
|
onConfirm: {
|
|
type: Function,
|
|
default: () => {},
|
|
},
|
|
onCancel: {
|
|
type: Function,
|
|
default: () => {},
|
|
},
|
|
onConfirmName: {
|
|
type: String,
|
|
default: "确认",
|
|
},
|
|
onCancelName: {
|
|
type: String,
|
|
default: "取消",
|
|
}
|
|
});
|
|
|
|
const normalizedComponent = computed(() =>
|
|
props.dynamicComponent ? markRaw(props.dynamicComponent) : null
|
|
);
|
|
</script>
|
|
|
|
<style>
|
|
</style> |