vue3+ts+element-plus实际开发之统一掉用弹窗封装

在Vue3+TypeScript项目中，你可以创建一个自定义组件来封装Element Plus中的对话框（Dialog）。以下是一个简单的示例：

1. 创建一个新的组件UnifiedDialog.vue：

<template>
  <el-dialog
    :title="title"
    :visible.sync="visible"
    width="30%"
    :before-close="handleClose"
  >
    <slot></slot>
    <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 } from 'vue';
import type { PropType } from 'vue';
 
interface UnifiedDialogProps {
  title: string;
  visible: boolean;
}
 
const props = defineProps<UnifiedDialogProps>();
 
const emit = defineEmits(['update:visible', 'confirm']);
 
const handleClose = () => {
  emit('update:visible', false);
};
 
const handleConfirm = () => {
  emit('confirm');
};
</script>

2. 在父组件中使用封装的UnifiedDialog组件：

<template>
  <UnifiedDialog
    :title="dialogTitle"
    :visible="dialogVisible"
    @update:visible="dialogVisible = $event"
    @confirm="handleConfirm"
  >
    <!-- 这里放置对话框内容 -->
    <p>这是一个对话框示例</p>
  </UnifiedDialog>
</template>
 
<script setup lang="ts">
import UnifiedDialog from './UnifiedDialog.vue';
import { ref } from 'vue';
 
const dialogTitle = '提示';
const dialogVisible = ref(false);
 
const handleConfirm = () => {
  // 处理确认事件
  console.log('确认操作');
};
 
// 触发对话框显示的逻辑
const showDialog = () => {
  dialogVisible.value = true;
};
</script>

在这个例子中，UnifiedDialog组件接收title和visible属性，并定义了一个confirm事件。父组件通过update:visible来控制对话框的显示，通过confirm事件处理用户的确认操作。这样，你就可以在多个地方重用这个封装的对话框组件，减少重复的代码。