vue3自定义dialog createApp setup语法组件使用element

目录

 index.vue

mapDialog.js

import menuElement from "./index.vue";
/* myMsgBox.js */
import ElementPlus from 'element-plus';
import {
    h,
    ref,
    createApp
} from "vue";

export const addMenu = function ( title, position) {
    return new Promise((resolve, reject) => {
     
        let mymenuRef = ref();
  
        const mountNode = document.createElement('div');

        document.body.appendChild(mountNode);

        const app = createApp({
            render() {

                return h(menuElement, {
                    ref: mymenuRef,
                    // 参数
                    title: title,
                    position: position,
                    // 事件
                    onComfirm: (data) => {
                        resolve(data);
                    },
                    onClosed: () => {
                       
                        setTimeout(() => {
                            mountNode.remove();
                        }, 500);
                        reject();

                    }
                })
            }
        });
        // 由于内部使用了el-dialog所以必须挂载否则解析错误
        app.use(ElementPlus);
      
        let instance = app.mount(mountNode);

    })
}