Vue3 dialog 封装命令式Dialog组件

参考vue2封装

import {  createApp } from 'vue'
import Main from './base.vue'

/**
 * option 可传入回调方法名称
 * @param option
 * @param {Object} option.dialogOption -- dialog属性配置
 * @param {Object} option.dialogContent -- 内容组件
 * @param {Object} [option.contentOption] -- 内容组件属性配置
 */
export function FunctionDialog(option) {

    const {
        dialogOption = {},
        dialogContent,
        contentOption = {},
    } = option;

    function destroy() {
        app.unmount()
        appBox.remove()
        close()
    }

    const appBox = document.createElement('div')
    document.body.appendChild(appBox)
    const app = createApp(Main, {
        closeable,
        slotContent,
        position,
        contentProps,
        contentComponent,
        handleBeforeClose: () => {
            setTimeout(() => destroy(), 200)
            return true
        },
        handleContentComponentEmit: emitData => {
            const { name, data, callFunc } = emitData
            options?.[name]?.(data, callFunc, name)
            destroy()
        }
    })
    app.mount(appBox);
    return destroy
    
}

TIP

vue3 使用createApp 创建实例