element-plus使用h和render函数，实现Service弹出Dialog

在element-plus中，Messagebox和Message都实现了全局方法。但是Dialog就没有实现。

本着自己动手丰衣足食的原则。自己动手写一个。

定义一个ModalService.ts文件

import { h, render } from 'vue'

class ModalService {

    /**
     * 创建一个弹出框
     * @param component 组件
     * @param opt 配置
     */
    static Create(component: any, props: any, opt?: ModalOption,) {
        return new Promise((resolve, reject) => {

            const close = () => {
                render(null, container)
                document.body.removeChild(container);
                resolve(true)
            }

            const modelValue = true

            const dialogProps = {
                modelValue: modelValue,
                title: opt?.title,
                draggable: opt?.draggable,
                destroyOnClose: true,
                onClosed: close,
            }

            const closeHandler = () => {
                if (vNode.component?.props.modelValue) {
                    vNode.component!.props.modelValue = false
                }

            }

            const container = document.createElement('div')
            document.body.appendChild(container)
            var vNode = h(ElDialog, dialogProps, {
                default: () => {
                    let type = typeof component;
                    if (type == 'string' || type == 'number') {
                        return h('div', component)
                    } else {
                        return h(component, {
                            ...props,
                            onClose: closeHandler
                        })
                    }
                },
                header: () => {
                    if (dialogProps) {
                        let type = typeof dialogProps.title
                        if (type == 'string' || type == 'number') {
                            return h('span', dialogProps.title)
                        }
                        return h(dialogProps.title, null)
                    }
                }
            });

            render(vNode, container)
            return vNode.component;
        })


    }
}

使用

import HelloWorld from "../../../components/HelloWorld.vue"

const test = () => {
    ModalService.Create(HelloWorld, { msg: '传递参数' }, { title: '卧槽' }).then(() => {
        console.log('成功关闭')
    });
}

当然这只是一个demo，很多el-dialog组件的参数和事件没有考虑到。以后有空再完善了。