ElementPlus函數(shù)式彈窗調(diào)用的實現(xiàn)

更新時間：2025年09月22日 09:56:43 作者：_AaronWong

在前端開發(fā)中,彈窗組件是必不可少的交互元素,本文就來詳細的介紹一下ElementPlus函數(shù)式彈窗調(diào)用,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧

在前端開發(fā)中，彈窗組件是必不可少的交互元素。雖然 ElementPlus 提供了優(yōu)秀的 Dialog 組件，但有時我們需要更靈活、更自定義的調(diào)用方式。本文將介紹如何實現(xiàn)一個類似 ElementPlus 的函數(shù)式彈窗調(diào)用方案，讓你的彈窗使用更加優(yōu)雅便捷。

核心實現(xiàn)

1. 彈窗容器管理 Hook

首先我們創(chuàng)建一個管理彈窗容器和動畫的 Hook：

// 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 }
}

2. 函數(shù)式調(diào)用封裝

// 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)
    })
}

3. 基礎彈窗組件樣式

/* 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;
}

使用示例

1. 創(chuàng)建自定義彈窗組件

<!-- CustomDialog.vue -->
<template>
    <div class="mark-bg" @click.self="$emit('cancel')">
        <div class="base-popup">
            <h3>自定義彈窗標題</h3>
            <div class="content">
                <!-- 你的自定義內(nèi)容 -->
                <p>這是一個自定義彈窗的內(nèi)容</p>
            </div>
            <div class="footer">
                <button @click="$emit('confirm', { data: '示例數(shù)據(jù)' })">確認</button>
                <button @click="$emit('cancel')">取消</button>
            </div>
        </div>
    </div>
</template>

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

2. 函數(shù)式調(diào)用

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

// 在任何地方調(diào)用
const openCustomDialog = async () => {
    const result = await createDialog(CustomDialog, {
        title: '自定義標題',
        content: '自定義內(nèi)容'
    })
    
    if (result.action === 'confirm') {
        console.log('用戶確認', result.data)
    } else {
        console.log('用戶取消')
    }
}

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

高級功能擴展

1. 支持傳參和返回值

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)
    })
}

2. 多個彈窗隊列管理

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()