关于javascript: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()