ElementPlus函数式弹窗调用的实现

// useDialog.js
import { render, h } from 'vue'

export function useDialog() {
    const div = document.createElement('div')
    div.style.display = 'none'
    document.body.appendChild(div)
    
    // 进场动画
    setTimeout(() => {
        div.style.opacity = '0'
        div.style.position = 'fixed'
        div.style.zIndex = '2001'
        div.style.display = 'initial'
        div.style.transition = 'opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1)'
        
        requestAnimationFrame(() => {
            div.style.opacity = '1'
        })
    }, 10)

    // 退场动画
    const close = () => {
        const bgElement = div.querySelector('.mark-bg')
        if (bgElement) {
            bgElement.classList.add('closing')
        }
        
        setTimeout(() => {
            render(null, div)
            document.body.removeChild(div)
        }, 300)
    }

    return { div, close }
}

// dialogManager.js
import { useDialog } from './useDialog'

export function createDialog(component, props = {}) {
    return new Promise((resolve) => {
        const { div, close } = useDialog()
        
        const handleConfirm = (data) => {
            close()
            resolve({ action: 'confirm', data })
        }
        
        const handleCancel = () => {
            close()
            resolve({ action: 'cancel' })
        }

        const vNode = h(component, {
            ...props,
            onConfirm: handleConfirm,
            onCancel: handleCancel
        })
        
        render(vNode, div)
    })
}

/* dialog.css */
.mark-bg {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 2000;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: opacity 0.3s ease;
}

.mark-bg.closing {
    opacity: 0;
}

.base-popup {
    background: white;
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    max-width: 80%;
    max-height: 80%;
    overflow: auto;
}

<!-- CustomDialog.vue -->
<template>
    <div class="mark-bg" @click.self="$emit('cancel')">
        <div class="base-popup">
            <h3>自定义弹窗标题</h3>
            <div class="content">
                <!-- 你的自定义内容 -->
                <p>这是一个自定义弹窗的内容</p>
            </div>
            <div class="footer">
                <button @click="$emit('confirm', { data: '示例数据' })">确认</button>
                <button @click="$emit('cancel')">取消</button>
            </div>
        </div>
    </div>
</template>

<script setup>
defineEmits(['confirm', 'cancel'])
</script>

import { createDialog } from './dialogManager'
import CustomDialog from './CustomDialog.vue'

// 在任何地方调用
const openCustomDialog = async () => {
    const result = await createDialog(CustomDialog, {
        title: '自定义标题',
        content: '自定义内容'
    })
    
    if (result.action === 'confirm') {
        console.log('用户确认', result.data)
    } else {
        console.log('用户取消')
    }
}

// 在Vue组件中使用
const handleClick = () => {
    openCustomDialog()
}

export function createDialog(component, props = {}) {
    return new Promise((resolve) => {
        // ...同上
        
        const vNode = h(component, {
            ...props,
            onConfirm: (data) => {
                close()
                resolve({ action: 'confirm', data })
            },
            onCancel: (reason) => {
                close()
                resolve({ action: 'cancel', reason })
            }
        })
        
        render(vNode, div)
    })
}

class DialogManager {
    constructor() {
        this.queue = []
        this.currentDialog = null
    }
    
    async open(component, props) {
        return new Promise((resolve) => {
            this.queue.push({ component, props, resolve })
            this.processQueue()
        })
    }
    
    processQueue() {
        if (this.currentDialog || this.queue.length === 0) return
        
        const { component, props, resolve } = this.queue.shift()
        this.currentDialog = { component, props, resolve }
        
        const { div, close } = useDialog()
        
        const vNode = h(component, {
            ...props,
            onConfirm: (data) => {
                close()
                this.currentDialog = null
                resolve({ action: 'confirm', data })
                this.processQueue()
            },
            onCancel: (reason) => {
                close()
                this.currentDialog = null
                resolve({ action: 'cancel', reason })
                this.processQueue()
            }
        })
        
        render(vNode, div)
    }
}

export const dialogManager = new DialogManager()