Vue3中通过JS全局调用弹窗组件的实现方案

<template>
    <div class="self-dialog">
        <el-dialog
            v-model="dialogData.show"
            :title="dialogData.title"
            :close-on-click-modal="false"
            :close-on-press-escape="false"
            destroy-on-close
            :width="dialogData.width"
            :before-close="handleClose"
        >
            <span>{{ dialogData.content }}</span>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="handleClose">取消</el-button>
                    <el-button type="primary" @click="handleConfirm">确定</el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>

<script setup>
import { inject, getCurrentInstance, computed } from 'vue'
const config = inject('config')
const { proxy } = getCurrentInstance()
const dialogData = computed(() => {
    let defaultData = {
        show: false,
        content: '',
        width: '800px',
        title: '弹窗',
        onConfirm: () => {},
        onCancel: () => {}
    }
    return {
        ...defaultData,
        ...config
    }
})
const handleClose = () => {
    dialogData.value.onCancel()
    document.body.removeChild(proxy.$el.parentNode)
}

const handleConfirm = () => {
    dialogData.value.onConfirm()
    document.body.removeChild(proxy.$el.parentNode)
}
</script>

import { createApp } from 'vue'
import dialog from './Dialog.vue'

class Dialog {
    constructor() {
        this.instance = null
        this.mountDom = document.createElement('div')
    }
    show(options) {
        this.instance && this.instance.unmount()
        this.instance = createApp(dialog)
        this.instance.provide('config', options)
        this.instance.mount(this.mountDom)
        document.body.appendChild(this.mountDom)
    }
    hide() {
        this.instance && this.instance.unmount()
    }
}

export default new Dialog()

// js调用全局弹窗
import Dialog from './components/dialog/index.js'
app.config.globalProperties.$dialog = Dialog