前端开发攻略---在Vue3中对ElementPlus中的dialog组件进行二次封装

<template>
  <el-dialog
    :title="title"
    :visible="visible"
    :width="width"
    :top="top"
    :close-on-click-modal="closeOnClickModal"
    :close-on-press-escape="closeOnPressEscape"
    @close="handleClose"
  >
    <template #default>
      <slot></slot>
    </template>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="handleClose">取 消</el-button>
        <el-button type="primary" @click="handleConfirm">确 定</el-button>
      </span>
    </template>
  </el-dialog>
</template>
 
<script setup lang="ts">
import { ref, watchEffect } from 'vue';
import type { PropType } from 'vue';
 
interface DialogProps {
  title?: string;
  visible?: boolean;
  width?: string;
  top?: string;
  closeOnClickModal?: boolean;
  closeOnPressEscape?: boolean;
}
 
const props = defineProps<DialogProps>();
 
const emit = defineEmits(['update:visible', 'confirm']);
 
const handleClose = () => {
  emit('update:visible', false);
};
 
const handleConfirm = () => {
  emit('confirm');
};
</script>
 
<style scoped>
.dialog-footer {
  display: flex;
  justify-content: end;
}
</style>

这段代码展示了如何在Vue3中使用ElementPlus的el-dialog组件进行二次封装。它定义了一个可复用的对话框组件，其中包含标题、内容区域和页脚按钮。通过<script setup>和Composition API的使用，代码变得更加简洁和易于理解。