主要文件：

Dialog.vue 弹窗组件，可以直接在vue中以<Dialog></Dialog>组件嵌入的形式使用，使用Teleport将组件挂载至外层body中（Teleport在不使用函数方式调起弹窗时有用，如果只使用Dialog.ts，则可以不要）

Dialog.ts函数式调用的封装，可以直接使用函数调起弹窗。弹窗函数式调起（动态创建）一般有（createApp+monted） 和 （render+h）两种方案。

区别

createApp和mount用于创建和挂载整个Vue应用，而render和h函数用于渲染单个组件。
createApp和mount：
1.创建应用实例：使用createApp创建一个Vue应用实例
2.挂载到dom：使用mount方法将这个应用实例挂载到DOM中的一个元素上。
render+h：
1.创建虚拟节点：使用h函数手动创建一个虚拟节点（VNode），这个虚拟节点代表你想要渲染的组件。
2.渲染到DOM：使用render方法将这个虚拟节点渲染到DOM中的一个元素上。

下文采用createApp+mounted方案

具体代码：

//Dialog.vue
<template>
    <Teleport to="body">
        <div class="popModel" :style="{ backgroundColor: bg }">
            <div class="popContent" ref="el" :style="{ left: x + 'px', top: y + 'px' }">
                <div class="head">
                    <span>{{ title }}</span>
                    <img src="@/assets/imgs/close.png" alt="关闭" @click="cancel()">
                </div>
                <div class="content">
                    <slot></slot>
                </div>
            </div>
        </div>
    </Teleport>
</template>
<script setup lang="ts">
import { ref, onMounted, nextTick } from 'vue';
import { useDraggable } from '@vueuse/core'  //使用vueuse的拖拽

const props = defineProps<{
    title: string,  //弹窗标题
    bg?: string,    //蒙层背景
    x?: number,    //弹窗初始left位置，未设置默认为窗口中间
    y?: number,   //弹窗初top始位置，未设置默认为窗口中间
    cancel: Function    //关闭弹窗的回调
}>()

const el = ref<HTMLElement | null>(null)

const { x, y, style } = useDraggable(el, {
    initialValue: { x: document.body.clientWidth / 2, y: document.body.clientHeight / 2 },
})

onMounted(() => {
    if (el.value) {
        x.value = props.x ?? x.value - el.value.offsetWidth / 2    //设置弹窗初始居中
        y.value = props.y ?? y.value - el.value.offsetHeight / 2 //设置弹窗初始居中
        setTimeout(() => {
            el.value.style.transition = 'unset'    //为了使得弹窗出现时有动画，而拖拽时取消动画
        });
    }
})

</script>

<style scoped>
.popModel {
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100vh;
}

.popContent {
    background: linear-gradient(to right, rgba(21, 40, 65, 0.9) 60%, rgba(21, 40, 65, 0.6));
    position: fixed;
    border-radius: 5px;
    padding: 20px;
    box-sizing: border-box;
    transition: all .2s ease-in;

    >.head {
        display: flex;
        justify-content: space-between;
        align-items: center;
        user-select: none;

        >span {
            font-weight: bold;
            font-size: 18px;
            color: #21A6FF;
            background: linear-gradient(90deg, #3BE1F6 0%, #21A6FF 100%);
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        >img {
            width: 14px;
            height: 14px;
            object-fit: cover;
            cursor: pointer;
        }
    }
}
</style>

//Dialog.ts
import { createApp, h, type VNode } from "vue";
import DialogVue from "./Dialog.vue";

//也可以直接创建一个函数，而不是在DialogVue对象上加方法
DialogVue.open = (props: any, content: VNode) => {
    const mountDom = document.createElement('div')
    document.body.appendChild(mountDom)

    return new Promise((resolve, reject) => {
        const dialogInstance = createApp(h(DialogVue, {
            ...props,
            cancel,
        }, content))    //content作为Dialog.vue中的slot

        dialogInstance.mount(mountDom)  //挂载

        /**
         * 关闭
         */
        function cancel() {
            //卸载实例
            dialogInstance.unmount()
            //卸载容器
            mountDom.remove()
            //执行回调
            resolve(null)
        }
    })
}

export default DialogVue

函数式调用示例

import Dialog from '@/components/Dialog.js';

//ChildVue为弹窗中嵌入的slot
Dialog.open({ title: '弹窗标题' }, h(ChildVue, props)).then(()=>{console.log('弹窗关闭了')})