vue+react 项目全局loading 封装

努力的白熊

已于 2024-05-19 19:47:24 修改

阅读量89

点赞数

分类专栏：项目必备技术文章标签： vue.js 前端 javascript reactjs

于 2024-01-20 19:08:29 首次发布

本文链接：https://blog.csdn.net/m0_62323931/article/details/135720121

版权

项目必备技术专栏收录该内容

5 篇文章 0 订阅

订阅专栏

本文介绍如何在vue+react项目中封装全局Loading组件，并提供了在antd+react+ts以及vue3+element plus+ts环境下的使用示例。通常，这个组件会与ajax或axios请求结合使用，加载样式可根据实际项目需求进行定制。

摘要由CSDN通过智能技术生成

这里讲的是封装loading，封装完后可以直接使用，一般配合封装的ajax或axios等请求使用

antd+react+ts

import React from 'react';
import { Spin } from 'antd';
import { createRoot } from 'react-dom/client';

let loadingCount = 0;
let root:any;

const startLoading = () => {
  if (loadingCount === 0) {
    const div = document.createElement('div');
    div.setAttribute('id', 'loading-container');
    document.body.appendChild(div);

    root = createRoot(div);
    root.render(<Spin size="large" />);
  }

  loadingCount++;
};

const endLoading = () => {
  loadingCount--;

  if (loadingCount === 0 && root) {
    const div = document.getElementById('loading-container');
    if (div) {
      root.unmount();
      document.body.removeChild(div);
    }
  }
};

export  {
  startLoading,
  endLoading,
};

这里需要配合样式一起使用，样式可以直接写到全局样式中（具体按照你的实际项目中来）

#loading-container {
    position: absolute;
    top: 0;
    left: 0;
    background-color:  rgba(255, 255, 255, .9); /* 半透明灰色背景 */
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 9999;
}

#loading-container .ant-spin {
    position: absolute;
    top: 45%;
    left: 50%;
}

使用示例

import { startLoading,endLoading, } from './loading';

//在需要显示loading的地方调用

startLoading()

//在需要隐藏loading的地方调用

endLoading()

vue3 + element plus +ts

import { ElLoading } from "element-plus";

/* 全局请求 loading */
let loadingInstance: ReturnType<typeof ElLoading.service>;

/**
 * @description 开启 Loading
 * */
   const startLoading = () => {
    loadingInstance = ElLoading.service({
    fullscreen: true,
    lock: true,
    text: "Loading",
    // background: "rgba(0, 0, 0, 0.7)"
    });
   };

/**
 * @description 结束 Loading
 * */
   const endLoading = () => {
    loadingInstance.close();
   };

/**
 * @description 显示全屏加载
 * */
   let needLoadingRequestCount = 0;
   export const showFullScreenLoading = () => {
    if (needLoadingRequestCount === 0) {
    startLoading();
    }
    needLoadingRequestCount++;
   };

/**
 * @description 隐藏全屏加载
 * */
   export const tryHideFullScreenLoading = () => {
    if (needLoadingRequestCount <= 0) return;
    needLoadingRequestCount--;
    if (needLoadingRequestCount === 0) {
    endLoading();
    }
   };

使用示例

import { showFullScreenLoading, tryHideFullScreenLoading } from './loading';

//在需要显示loading的地方调用
showFullScreenLoading();

//在需要隐藏loading的地方调用
tryHideFullScreenLoading()

element plus中的loading有自己的样式，一般不需要自定义样式，具体可以参考element plus官网