首页 > 其他分享 >react 使用 antd 创建全局loading

react 使用 antd 创建全局loading

时间:2023-12-01 16:01:30浏览次数:33  
标签:loading const dom react antd document 255

代码如下:

import ReactDOM from 'react-dom';
import { Spin } from 'antd';

export const showGlobalLoading = () => {
    const dom = document.createElement('div')
    dom.id = 'globalLoading'
    dom.style = 'width: 100%; height: 100%; position: fixed; top: 0; left: 0; background-color: rgba(255, 255, 255, 0.45); display: flex; justify-content: center; align-items: center; z-index: 2;';
    document.body.appendChild(dom)
    ReactDOM.render(<Spin fullscreen />, dom)
}

export const hideGlobalLoading = () => {
    const dom = document.getElementById('globalLoading')
    if (dom) {
        document.body.removeChild(dom)
    }
}

使用:
显示 showGlobalLoading(); 隐藏 hideGlobalLoading();

标签:loading,const,dom,react,antd,document,255
From: https://www.cnblogs.com/ZerlinM/p/17869901.html

相关文章

  • 关于解决vue报错"Problems loading reference 'https://schemastore.azurewebsites.ne
    打开setting时会看到有一条三角形的警告信息 看问题描述:无法从该网站加载解决方法:打开设置,找到扩展下的json项 设置之后可以在settings.json文件中看到新增加一项 "json.schemaDownload.enable":false可以直接在界面上设置: "json.schemaDownload.enable":false......
  • 当多个使用弹窗类组件,可使用这种方式封装组件。(以下使用antd-vue、vue3)
    1.代码点击查看代码<template><slot:openDialog="openDialog":closDialog="modalCancel"></slot><a-modalv-model:open="open"title="BasicModal"@cancel="modalCancel"><templat......
  • antd 表单外提交进行规则校验
    import{Form,Input,Button}from'antd';constMyForm=()=>{constonFinish=(values)=>{console.log('Formvalues:',values);};constvalidateFields=()=>{form.validateFields().then(()=>......
  • v-loading 对滚动轴部分遮盖不全
    问题场景给有滚动轴的盒子添加了v-loading遮罩层,但发现:当盒子内容滚动到底部,刷新页面时,遮罩层无法覆盖盒子底部的区域。如下图所示:模板代码<divclass="content"v-loading="defLoading"> <el-formclass="form"> <!--此处代码省略--> </el-form></div&g......
  • 更新react版本号
    [求更新react版本号·Issue#52·DataV-Team/DataV-React](https://github.com/DataV-Team/DataV-React/issues/52)package.json设置overrides可以解决这个问题"overrides":{"@jiaminghi/data-view-react":{"react":"^18......
  • 2023-11-30 记录实用小案例 —— react监听页面返回时执行事件
    useEffect(()=>{consthandlePageBack=()=>{//此处写你想要触发的事件};//监听浏览器的popstate事件,即页面返回事件window.addEventListener('popstate',handlePageBack);//在组件卸载时移除事件监听return()=>{......
  • React 受控和非受控组件
    无论你做什么,都要相信自己可以做到,因为你的潜力是无限的。把父组件的状态变成属性传递给子组件,子组件接受这个属性,听命于父组件。这个子组件就是叫做受控组件。在受控与非受控组件有两种理解方案,第一:狭义上的受控与非受控,就是我们在表单中的受控与非受控组件。第二:广义上的受控......
  • React 中 Ref 引用
    不要因为别人的评价而改变自己的想法,因为你的生活是你自己的。1.React中Ref的应用1.1给标签设置ref给标签设置ref,ref="username",通过this.refs.username可以获取引用的标签,ref可以获取到应用的真实Dom节点。但是this.refs已被废弃。importReact,{Compone......
  • vue3 reactive对象的watch
    代码<scriptsetup>import{ref,reactive,watch}from'vue'constobj=reactive({count:0})constyourKnow0=ref('')constyourKnow1=ref('')letcnt=0watch(obj,(newValue,oldValue)=>{//在嵌套的属性变更时触发......
  • react native FlatList 下拉加载更多分页数据
    一.官方文档flatlist文档onendreached方法二、相关代码importReact,{useState,useEffect}from'react';import{View,FlatList,Text,ActivityIndicator}from'react-native';constMyFlatListWithLoadMore=()=>{const[data,setData]=u......