<template>
  <div class="BaseDialogClass">
    <el-dialog
    :title="title"
    v-model="visible"
    :width="width"
    :fullscreen="fullscreen"
    :modal="modal"
    :modal-class="modalClass"
    :show-close="showClose"
    :draggable="draggable"
    v-bind="$attrs"
  >
      <slot></slot>
      <slot name="footer" v-if="showFooter">
        <div class="dialog__footer">
          <el-button @click="closeDialog">取消</el-button>
          <el-button type="primary" @click="handleConfirm">提交</el-button>
        </div>
      </slot>
    </el-dialog>
  </div>
</template>

<script setup lang="tsx" name="BaseDialog">
import { ref, reactive, onMounted, defineEmits, computed } from "vue";

export interface BaseDialogProps {
  title: string;
  visible: boolean;
  width?: string;
  fullscreen?: boolean;
  modal?: boolean;
  modalClass?: string;
  showClose?: boolean;
  showFooter?: boolean;
  draggable?: boolean;
}
// 接受父组件参数，配置默认值
const props = withDefaults(defineProps<BaseDialogProps>(), {
  title: '标题',
  visible: false,
  width: '50%',
  fullscreen: false, // 是否全屏
  modal: true, // 是否显示遮罩层
  modalClass: '', // 遮罩的自定义类名
  showClose: true, // 是否显示关闭按钮
  showFooter: true, // 是否显示底部按钮
  draggable: false, // 为 Dialog 启用可拖拽功能
});


const emits = defineEmits(['update:visible', 'handleConfirm'])

const visible = computed({
  get: () => {
    return props.visible
  },
  set: val => emits('update:visible', val),
})

// 取消
const closeDialog = () => {
  emits('update:visible', false);
}
// 提交
const handleConfirm = () => {
  emits('handleConfirm');
}
</script>

<style scoped lang="scss">
.dialog__footer {
  box-sizing: border-box;
  text-align: right;
}
</style>

页面使用

<template>
    <div class="tableBox">
        <el-button type="primary" @click="handleAdd">新增</el-button>
        <BaseDialog
        :title="'自定义标题'"
        v-model:visible="dialogVisible"
        :width="'80%'"
        @handleConfirm="handleConfirm"
        >
        <p>自定义内容</p>
        </BaseDialog>
    </div>
</template>


<script setup lang="ts">
import { ref, reactive, onMounted } from "vue";
import BaseDialog from "@/components/BaseDialog/index.vue";

const dialogVisible = ref(false);

const handleAdd = () => {
  dialogVisible.value = true;
};
const handleConfirm = () => {
  dialogVisible.value = false;
}
</script>