dz-app/hooks/useSingletonComponent.js

import {createApp} from 'vue'

import MxBuyVip from "@/components/mx-buy-vip/mx-buy-vip.vue";
import MxQuestionCorrectPopup from "@/components/mx-question/components/mx-question-correct-popup.vue";

const container = new Map()

export function useSingletonComponent(component) {
    if (container.has(component)) return container.get(component)

    const div = document.createElement("div");
    document.body.appendChild(div);

    const app = createApp(component)
    const instance = app.mount(div)
    container.set(component, instance)

    // TODO：不确定是否需要完成注销时的操作

    return instance
}

export function useSingletonCorrectQuestion() {
    return useSingletonComponent(MxQuestionCorrectPopup)
}

export function useSingletonBuyVip() {
    return useSingletonComponent(MxBuyVip)
}