封装的一个dialog组件

封装的一个dialog组件，基于element plus组件库，如果使用时导入import YyDialog from "./components/Dialog";，导入<dialog>这里面写你的表单</dialog>

<template >
<ElDialog
  :before-close="beforeClose"
  :center="center"
  :close-on-click-modal="closeOnClickModal"
  :close-on-press-escape="closeOnPressEscape"
  :custom-class="customClass"
  :destroy-on-close="destroyOnClose"
  :title="title"
  :width="width"
  @cancel="handleCancel"
>
  <slot />

  <span slot="footer" >
    <ElButton @click="handleCancel" >取 消</ElButton >

    <ElButton
      type="primary"
      @click="handleConfirm"
    >确 定</ElButton >
  </span >
</ElDialog >
</template >

<script setup >
// TODO: 封装dialog组件
import { defineProps } from "vue";
const props = defineProps({
  title: String,
  width: {
    type: String,
    default: "50%",
  },
  beforeClose: Function,
  center: {
    type: Boolean,
    default: true,
  },
  destroyOnClose: {
    type: Boolean,
    default: true,
  },
  customClass: String,
  closeOnClickModal: {
    type: Boolean,
    default: true,
  },
  closeOnPressEscape: {
    type: Boolean,
    default: true,
  },
  handleConfirm: Function,
  handleCancel: Function,
});
console.log(props.title);
</script >