bxztApp/packages/screen/src/component/MyDialog/index.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">取消</el-button>
        <el-button type="primary" @click="onConfirm"> 确认 </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: () => {},
  },
});

const normalizedComponent = computed(() =>
  props.dynamicComponent ? markRaw(props.dynamicComponent) : null
);
</script>

<style>
</style>