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

loading.vue

<template>
    <div class="loading" v-show="msg.show">
        <div class="load-box">
            <img src="@/assets/img/loading.gif">
            <!--<img src="@/assets/img/loading_white.png">-->
            <span>{{ msg.title }}</span>
        </div>
    </div>
</template>

<script>
export default {
    name: 'loading',
    props: {
        msg: Object,
    }
}
</script>

<style scoped lang="scss">
.loading {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;

    .load-box {
        background-color: rgba(0, 0, 0, .5);
        width: 100px;
        height: 100px;
        border-radius: 5px;
        box-shadow: 0px 1px 15px rgba(0, 0, 0, .5);
        color: #fff;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        letter-spacing: .8px;
        font-size: 13px;

        img {
            width: 30px;
            margin-bottom: 8px;
            -webkit-animation: rotate .8s linear infinite;
        }
    }
}

@keyframes rotate {
    to {
        transform: rotate(360deg);
    }
}
</style>

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 (
        <div className="absolute w-full h-full flex items-center justify-center" style={{ position: "fixed", zIndex: 9999, background: 'rgb(0,0,0,0.1)' }}>
            <img src='https://img.vis-viva.com.cn/website/audit/loading.svg'></img>
        </div>
    )
})

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(<Loading />)
        }
    },
    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()