如何在body末尾生成支持通信的Vue弹窗组件？

核心思路 #

借助Vue的手动实例创建与挂载能力，将弹窗组件独立挂载到body元素上，同时在组件卸载时自动清理DOM节点，通过props传递参数、自定义事件或Promise实现组件间通信。

实现步骤 #

1. 编写基础弹窗组件（Modal.vue） #

<template>
  <div class="modal-overlay" @click.self="handleClose">
    <div class="modal-content">
      <h3>{{ title }}</h3>
      <p>{{ content }}</p>
      <button @click="handleConfirm">确认</button>
      <button @click="handleClose">取消</button>
    </div>
  </div>
</template>

<script setup>
import { defineProps, defineEmits } from 'vue'

const props = defineProps({
  title: {
    type: String,
    default: '提示'
  },
  content: {
    type: String,
    required: true
  }
})

const emit = defineEmits(['confirm', 'close'])

const handleConfirm = () => {
  emit('confirm')
  handleClose()
}

const handleClose = () => {
  emit('close')
}
</script>

<style scoped>
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.5);
  display: flex;
  justify-content: center;
  align-items: center;
}

.modal-content {
  background: white;
  padding: 24px;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.15);
}
</style>

2. 编写弹窗挂载工具函数（useModal.js） #

import { createApp, h } from 'vue'
import Modal from './Modal.vue'

export function openModal(options) {
  return new Promise((resolve, reject) => {
    // 创建临时容器
    const container = document.createElement('div')
    document.body.appendChild(container)

    // 创建并挂载组件
    const app = createApp({
      render() {
        return h(Modal, {
          ...options,
          onConfirm: () => {
            resolve('confirm')
            cleanUp()
          },
          onClose: () => {
            reject('close')
            cleanUp()
          }
        })
      }
    })

    app.mount(container)

    // 卸载组件并清理DOM
    function cleanUp() {
      app.unmount()
      document.body.removeChild(container)
    }
  })
}

3. 在业务组件中调用弹窗 #

import { openModal } from './useModal.js'

// 触发弹窗示例
async function showConfirmModal() {
  try {
    await openModal({
      title: '删除确认',
      content: '确定要删除这条数据吗？'
    })
    console.log('用户确认删除')
    // 执行删除逻辑
  } catch (err) {
    console.log('用户取消操作')
  }
}

关键细节说明 #

• DOM管理：手动创建容器并添加到body，组件卸载时主动移除容器，避免残留DOM节点和内存泄漏。
• 参数传递：通过h函数的props参数传递自定义标题、内容等数据，支持组件自定义配置。
• 事件通信：用Promise封装弹窗的确认/关闭操作，简化调用端的逻辑处理；也可直接通过监听自定义事件实现通信。
• 样式隔离：使用固定定位的遮罩层，确保弹窗不受父组件的布局、overflow等样式影响，始终全屏显示。

内容的提问来源于stack exchange，提问作者Relow