改造antd Spin，实现方法调用出现全局加载遮罩 |
您所在的位置：网站首页 › Div遮罩层部分 › 改造antd Spin，实现方法调用出现全局加载遮罩 |
改造antd Spin，实现方法调用出现全局加载遮罩
|
封装 Spin 组件，可以跟 Modal.method() 一样，调用静态方法，实现全局加载遮罩。 实现前台请求相关处理逻辑过于复杂时，加载状态传递困难的问题。 实现代码 import React from 'react'; import ReactDOM from 'react-dom'; import { Spin } from 'antd'; import 'antd/dist/reset.css'; /** 样式 */ const style = { loadingContainer: { position: 'fixed', top: 0, left: 0, right: 0, bottom: 0, zIndex: 9999, display: 'none', }, LoadingMask: { position: 'absolute', top: 0, left: 0, right: 0, bottom: 0, zIndex: 9999, display: 'flex', justifyContent: 'center', alignItems: 'center', backgroundColor: '#ffffffb3', } } /** 默认的一些自定义配置，如设置过全局config可忽略 */ const defaultConfig = { tip: '加载中……', size: 'large', } /** 全局遮罩，提供方法调用实现视口遮罩 */ function globalLoadingMask() { if (!document.getElementById('loading-container')) { const loadingContainer = document.createElement('div'); loadingContainer.id = 'loading-container'; loadingContainer.style = 'display: none;'; for (const key in style.loadingContainer) { loadingContainer.style[key] = style.loadingContainer[key] } document.body.appendChild(loadingContainer); } const loadingContainer = document.getElementById('loading-container') /** 渲染方法 */ function render(config = {}) { const { zIndex, tip, size, ...resetProps } = { ...defaultConfig, ...config }; // 允许自定义zIndex，避免多层弹窗场景下出现误遮罩以及未遮罩问题 if (zIndex) loadingContainer.style.zIndex = zIndex; ReactDOM.render( , loadingContainer ) } /** 出现遮罩 */ function show(defaultConfig = {}) { loadingContainer.style.display = 'block'; render(defaultConfig) } /** 隐藏遮罩 */ function hide() { loadingContainer.style.style = 'none'; ReactDOM.unmountComponentAtNode(loadingContainer); } /** 更新遮罩配置 */ function update(newConfig = {}) { render(newConfig) } return { show, hide, update } }; /** 使用Spin即注入所需API配置 */ function PackingSpin(props = {}) { return {props.children} } /** 挂载静态方法 */ let loadingFunc = globalLoadingMask(); for (const key in loadingFunc) { PackingSpin[key] = loadingFunc[key] } export default PackingSpin; 使用 import React from 'react' import SpinFunc from './SpinFunc'; import { Table } from 'antd'; export default function App() { return ( {/* 标签使用 */} { // 方法使用 SpinFunc.show({ zIndex: 10 })// 可以传参修改配置 setTimeout(() => { SpinFunc.hide() }, 1000); }}>loading ) } 效果 |
【本文地址】
今日新闻 |
推荐新闻 |