<template>
  <el-dialog :visible.sync="visible" :title="title" :width="width">
    <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>
const props = defineProps({
  visible: {
    type: Boolean,
    default: false,
  },
  width: {
    type: String,
    default: "50%",
  },
  title: {
    type: String,
    default: "",
  },
  onConfirm: {
    type: Function,
    default: () => {},
  },
  onCancel: {
    type: Function,
    default: () => {},
  },
});
</script>

<style>
</style>