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"
    />
    <slot></slot>
    <template #footer>
      <div class="dialog-footer">
        <el-button class="button" size="large" type="primary" @click="onConfirm"> {{ onConfirmName }} </el-button>
        <el-button class="button" size="large" @click="onCancel"> {{ onCancelName }} </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 lang="scss" scoped>
.dialog-footer {
  display: flex;
  justify-content: center;

  .button {
    width: 150px;
  }
}
</style>