基于 `component` 的弹窗组件统一管理方案

基于 component 的弹窗组件统一管理方案

🎯 应用场景

当 Vue 应用中需要管理多个不同类型的弹窗组件时（如用户信息弹窗、编辑表单弹窗、删除确认弹窗等），传统方式需要为每个弹窗维护独立的状态和引用，导致代码冗余且难以维护。此方案通过动态组件实现弹窗的集中化管理。

📋 必须实现的规范

每个业务弹窗组件都需要遵循以下规范：

0. 必须实现 @close="handleClose" - 处理弹窗遮罩层点击关闭
1. 必须暴露 dialogShow 方法 - 用于接收外部传入的参数
2. 必须通过 emit('close') 通知管理器关闭弹窗

🏗️ 完整实现方案

1️⃣ 弹窗管理中心组件 (DynamicDialogManager.vue)

<!-- DynamicDialogManager.vue -->
<script setup>
import { ref } from 'vue'
​
const currentDialogComponent = ref(null)
const dialogRef = ref(null)
​
// 提供关闭方法
const closeDialog = () => {
  currentDialogComponent.value = null
}
​
// 开放打开接口
const openDialog = async (component) => {
  currentDialogComponent.value = component
  await nextTick()
  return dialogRef.value
}
​
defineExpose({ openDialog, closeDialog })
</script>
​
<template>
  <component
    :is="currentDialogComponent"
    v-if="currentDialogComponent"
    ref="dialogRef"
  />
</template>

2️⃣ 业务弹窗组件规范 (UserDialog.vue)

<!-- UserDialog.vue -->
<template>
  <el-dialog 
    :model-value="true"
    title="用户信息"
    width="500px"
    @close="handleClose"
  >
    <div class="user-info-content">
      <p>用户名: {{ userData.name }}</p>
      <p>邮箱: {{ userData.email }}</p>
    </div>
    
    <template #footer>
      <el-button @click="handleCancel">取消</el-button>
      <el-button type="primary" @click="handleConfirm">确定</el-button>
    </template>
  </el-dialog>
</template>
​
<script setup>
import { ref } from 'vue'
​
const userData = ref({})
const emit = defineEmits(['close'])
​
// 必须实现：对外暴露的方法，用于接收参数
const dialogShow = (data) => {
  userData.value = data
}
​
// 必须实现：处理关闭事件
const handleClose = () => {
  console.log('弹窗关闭了')
  // 通知管理器关闭弹窗
  emit('close')
}
​
const handleCancel = () => {
  handleClose()
}
​
const handleConfirm = () => {
  if (validateData()) {
    console.log('保存数据')
    handleClose()
  }
}
​
const validateData = () => {
  return true
}
​
// 必须实现：暴露 dialogShow 方法
defineExpose({ dialogShow })
</script>

🚀 使用方式

<!-- MainComponent.vue -->
<template>
  <div>
    <el-button @click="openUserDialog">打开用户弹窗</el-button>
    <DynamicDialogManager ref="dialogManager" />
  </div>
</template>
​
<script setup>
import { ref } from 'vue'
import DynamicDialogManager from './DynamicDialogManager.vue'
import UserDialog from './UserDialog.vue'
​
const dialogManager = ref()
​
const openUserDialog = async () => {
  // 打开弹窗并传参
  const instance = await dialogManager.value?.openDialog(UserDialog)
  instance?.dialogShow({ 
    name: '张三', 
    email: 'zhangsan@example.com' 
  })
}
</script>

⭐ 方案优势

• 状态管理简化: 从 N 个弹窗状态 → 1 个统一状态
• 代码结构清晰: 每个组件职责明确，易于理解和维护
• 易于扩展: 新增弹窗只需遵循规范，无需修改管理器
• 实用性强: 满足绝大多数弹窗使用场景

🔄 工作流程

1. 调用 openDialog(UserDialog)
       ↓
2. DynamicDialogManager 设置 currentDialogComponent
       ↓
3. <component> 动态渲染 UserDialog
       ↓
4. UserDialog 通过 dialogShow 接收参数
       ↓
5. 用户操作触发 handleClose
       ↓
6. UserDialog emit('close') 通知管理器
       ↓
7. DynamicDialogManager 执行 closeDialog 清空状态
       ↓
8. 弹窗消失，完成生命周期