vue3封装el-dialog组件

<template>
  <el-dialog
    v-model="dialog"
    append-to-body
    :modal="props.dialogModal"
    :close-on-click-modal="props.dialogClickModalClose"
    :close-on-press-escape="props.dialogESCModalClose"
    :draggable="props.dialogDraggable"
    :show-close="props.dialogShowClose"
    :title="props.dialogTitle"
    :width="props.dialogWidth"
    :align-center="props.dialogAlignCenter"
    :center="props.dialogContentCenter"
    @open="open"
    @close="close"
  >
    <slot name="content"> </slot>
    <template #footer v-if="props.dialogFooterBtn">
      <el-button type="primary" @click="SaveSubmit">保存提交</el-button>
      <el-button type="info" @click="CloseSubmit">取消保存</el-button>
    </template>
  </el-dialog>
</template>
 
<script  setup>
import { defineProps, ref, defineEmits, watch } from 'vue';
const emits = defineEmits(['save', 'cancellation', 'open', 'close']);
const props = defineProps({
  visible: {       //模态框显示隐藏
    type: Boolean,
    default: false
  },
  dialogTitle: {   //模态框标题名称
    type: String,
    default: '默认标题'
  },
  dialogWidth: {  //模态框弹窗宽度
    type: String,
    default: '40%'
  },
  dialogShowClose: { //是否显示关闭按钮
    type: Boolean,
    default: true
  },
  dialogModal: { //是否需要模态框(遮罩层)
    type: Boolean,
    default: true
  },
  dialogAlignCenter: { //是否水平垂直对齐模态框
    type: Boolean,
    default: false
  },
  dialogContentCenter: { //模态框header和footer内容是否居中对齐
    type: Boolean,
    default: false
  },
  dialogFullscreen: { //模态框是否为全屏
    type: Boolean,
    default: true
  },
  dialogClickModalClose: { //是否可以通过点击遮罩层关闭Dialog
    type: Boolean,
    default: false
  },
  dialogESCModalClose: { //是否可以通过按下ESC关闭Dialog
    type: Boolean,
    default: false
  },
  dialogDraggable: { //是否开启模态框拖拽功能
    type: Boolean,
    default: false
  },
  dialogFooterBtn: { //是否开启底部操作按钮
    type: Boolean,
    default: true
  },

})
const dialog = ref(props.visible);

// watch监听
watch(
  () => props.visible,
  (newValue, oldValue) => {
    dialog.value = newValue;
  },
  { deep: true, immediate: true }
);

// 保存提交回调函数
const SaveSubmit = () => {
  emits('save', false); //emit方法供父级组件调用
};
// 取消保存回调函数
const CloseSubmit = () => {
  emits('cancellation', false); //emit方法供父级组件调用
};

// 打开事件回调函数
const open = () => {
  emits('open', true); //emit方法供父级组件调用
};

// 关闭事件回调函数(当显示头部关闭按钮时需调用该回调函数方法 -> dialogShowClose = true 反之)
const close = () => {
  emits('close', false); //emit方法供父级组件调用
};
</script>
 
<style scoped lang="scss"></style>