Commit 54e669a0 authored by chenshouchao's avatar chenshouchao

feat: 优化局部loading组件

parent 8f457bea
...@@ -4,12 +4,14 @@ ...@@ -4,12 +4,14 @@
// <MyCircularProgress loading={loading}>children</MyCircularProgress> // <MyCircularProgress loading={loading}>children</MyCircularProgress>
// 使用方法2 挂载在目标块下,目标块最少要添加一个position: relative; 或者absolute // 使用方法2 挂载在目标块下,目标块最少要添加一个position: relative; 或者absolute
// <div style={{ position: "relative", }} >
// <MyCircularProgress loading={loading}/> // <MyCircularProgress loading={loading}/>
// </div>
import CircularProgress from "@mui/material/CircularProgress"; import CircularProgress from "@mui/material/CircularProgress";
type IMyCircularProgressProps = { type IMyCircularProgressProps = {
loading: boolean; loading: boolean; // 是否处于loading状态
children?: React.ReactNode; children?: React.ReactNode; // 包裹的子元素
minHeight?: string; minHeight?: string;
maxHeight?: string; maxHeight?: string;
zIndex?: number; zIndex?: number;
...@@ -60,6 +62,9 @@ const MyCircularProgress = (props: IMyCircularProgressProps) => { ...@@ -60,6 +62,9 @@ const MyCircularProgress = (props: IMyCircularProgressProps) => {
{children} {children}
</div> </div>
); );
} else {
if (children) {
return children;
} else { } else {
return ( return (
<div <div
...@@ -97,6 +102,7 @@ const MyCircularProgress = (props: IMyCircularProgressProps) => { ...@@ -97,6 +102,7 @@ const MyCircularProgress = (props: IMyCircularProgressProps) => {
</div> </div>
); );
} }
}
} else { } else {
return null; return null;
} }
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment