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

简介: 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组件的参数和事件没有考虑到。以后有空再完善了。

目录
相关文章
|
7月前
|
前端开发
elementui解决el-dialog不清空内容的问题,el-dialog关闭时销毁子组件
elementui解决el-dialog不清空内容的问题,el-dialog关闭时销毁子组件
|
7月前
使用element clickoutside自定义指令事件,点击元素外部触发(element-ui/src/utils/clickoutside)
使用element clickoutside自定义指令事件,点击元素外部触发(element-ui/src/utils/clickoutside)
|
JavaScript
element-ui(vue版)使用switch时change回调函数中的形参传值问题
element-ui(vue版)使用switch时change回调函数中的形参传值问题
154 0
|
5月前
|
JavaScript API
【Element-UI】vue使用 this.$confirm区分取消与关闭,vue给this.$confirm设置多个按钮
【Element-UI】vue使用 this.$confirm区分取消与关闭,vue给this.$confirm设置多个按钮
767 0
|
JavaScript
Element UI报错:Unknown custom element: <el-menu>
Element UI报错:Unknown custom element: <el-menu>
177 0
element-ui的upload组件的clearFiles方法的调用
element-ui的upload组件的clearFiles方法的调用
494 0
|
JavaScript
组件toast(类似于element-ui的message组件)的实现
组件toast(类似于element-ui的message组件)的实现
169 0
element-ui 控制台 『 Prop being mutated: "placement" 』的报错~
element-ui 控制台 『 Prop being mutated: "placement" 』的报错~
element-ui 控制台 『 Prop being mutated: "placement" 』的报错~
|
JavaScript
解决 Element-ui中 对话框 (Dialog)中含子组件时,使用 refs 调用该子组件为 undefined 的问题
解决 Element-ui中 对话框 (Dialog)中含子组件时,使用 refs 调用该子组件为 undefined 的问题
758 0
解决 Element-ui中 对话框 (Dialog)中含子组件时,使用 refs 调用该子组件为 undefined 的问题