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()