vue3定义loading对象 &react自定义loading 对象

loading.vue

index.js

import { createApp, reactive } from 'vue'

import myLoad from './loading.vue'

const msg = reactive({
    show: false,
    title: '加载中...'
})

const $loading = createApp(myLoad, { msg }).mount(document.createElement('div'))
const load = {
    show(title) { // 控制显示loading的方法
        msg.show = true
        title ? msg.title = title : ''
        document.body.appendChild($loading.$el)
    },

    hide() { // 控制loading隐藏的方法
        msg.show = false
    }
}
export { load }

导入

import { load } from "@/components/loading/index.js";

load.show('登录中...');
setTimeout(() => {
        load.hide();
    }, 5000);

react
loading.js

import React, { memo } from "react";
import { createRoot } from "react-dom/client";


const Loading = memo(() => {
    return (
        

            
        
    )
})

const JCLoading = {
    show() {
        const oWrapper = document.createElement("div")
        //此处避免重复引入div
        if (!document.getElementById('loading_dialog')) {
            oWrapper.setAttribute("id", "loading_dialog")
            oWrapper.style.position = 'absolute'
            oWrapper.style.top = '0'
            document.body.appendChild(oWrapper)
            this.wrapperRoot = createRoot(oWrapper)
            this.wrapperRoot.render()
        }
    },
    remove() {
        console.log(document.getElementById('loading_dialog'))
        if (document.getElementById('loading_dialog')) {
            document.body.removeChild(document.getElementById('loading_dialog'))
        }

    }
}

export default JCLoading

应用页面

import JCLoading from '../components/loading'

JCLoading.show()
...
JCLoading.remove()