web_dist/src/components/cy/iframe/useIframe.ts

import {Ref, ref, nextTick, onDeactivated, onActivated} from "vue";
import {useResizeObserver} from "@vueuse/core";
import sleep from "@/utils/sleep";

export const iframeList: Ref<IframeOption[]> = ref([])

export declare type IframeOption = {
    src: string;
    show?: boolean,
    ref?: Ref<HTMLIFrameElement>,
    style?: any
}

export function useIframe(div: Ref<HTMLDivElement>, opt: IframeOption) {
    opt.show = true
    opt.style = {}
    const index = iframeList.value.push(opt) - 1

    useResizeObserver(div, (entries) => {
        const entry = entries[0]
        const {width, height} = entry.contentRect
        if (width === 0 && height === 0) {
            iframeList.value[index].show = false
            return
        }
        iframeList.value[index].style.width = width + 'px';
        iframeList.value[index].style.height = height + 'px';

        nextTick(async () => {
            await sleep(300)
            const rect = div.value.getBoundingClientRect();
            if (rect.top === 0 && rect.left === 0) {
                iframeList.value[index].show = false
                return
            }
            iframeList.value[index].style.top = rect.top + 'px';
            iframeList.value[index].style.left = rect.left + 'px';
            iframeList.value[index].show = true
        })
    })

    onActivated(() => {
        iframeList.value[index].show = true
    })

    onDeactivated(() => {
        iframeList.value[index].show = false
    })

    function stop() {
        iframeList.value.splice(index, 1)
    }

    return {
        stop
    }
}