Skip to content

B
bkunyun
Commit 8f457bea authored by chenshouchao's avatar chenshouchao
Browse files
Options

feat: 丰富loading组件使用方法

parent 036c942f
Hide whitespace changes
Inline Side-by-side
Showing with 72 additions and 26 deletions
src/components/mui/MyCircularProgress.tsx
View file @ 8f457bea
// 局部loading组件 挂载在目标块下，目标块最少要添加一个position: relative; 或者absolute // 局部loading组件
// 使用方法1 用一个div包裹children，在children上加一个蒙层和loading
// <MyCircularProgress loading={loading}>children</MyCircularProgress>
// 使用方法2 挂载在目标块下，目标块最少要添加一个position: relative; 或者absolute
// <MyCircularProgress loading={loading}/>
import CircularProgress from "@mui/material/CircularProgress"; import CircularProgress from "@mui/material/CircularProgress";
type IMyCircularProgressProps = { type IMyCircularProgressProps = {
loading: boolean; loading: boolean;
children?: React.ReactNode;
minHeight?: string; minHeight?: string;
maxHeight?: string; maxHeight?: string;
zIndex?: number; zIndex?: number;
...@@ -14,43 +21,82 @@ const MyCircularProgress = (props: IMyCircularProgressProps) => { ...@@ -14,43 +21,82 @@ const MyCircularProgress = (props: IMyCircularProgressProps) => {
minHeight = "none", minHeight = "none",
maxHeight = "100vh", maxHeight = "100vh",
zIndex = "100", zIndex = "100",
children,
} = props; } = props;
if (loading) { if (loading) {
return ( if (children) {
<div return (
style={{
minHeight: minHeight,
width: "100%",
height: "100%",
position: "absolute",
top: 0,
zIndex: zIndex,
}}
>
<div <div
style={{ style={{
width: "100%", position: "relative",
height: "100%",
position: "absolute",
top: 0,
opacity: 0.6,
background: "#fff",
}} }}
></div> >
<div
style={{
width: "100%",
height: "100%",
position: "absolute",
top: 0,
opacity: 0.6,
background: "#fff",
zIndex: zIndex,
}}
></div>
<div
style={{
width: "100%",
height: "100%",
display: "flex",
justifyContent: "center",
alignItems: "center",
position: "absolute",
top: 0,
zIndex: zIndex,
maxHeight: maxHeight,
}}
>
<CircularProgress></CircularProgress>
</div>
{children}
</div>
);
} else {
return (
<div <div
style={{ style={{
width: "100%", width: "100%",
height: "100%", height: "100%",
maxHeight: maxHeight, position: "absolute",
display: "flex", top: 0,
justifyContent: "center", zIndex: zIndex,
alignItems: "center", minHeight: minHeight,
}} }}
> >
<CircularProgress></CircularProgress> <div
style={{
width: "100%",
height: "100%",
position: "absolute",
top: 0,
opacity: 0.6,
background: "#fff",
}}
></div>
<div
style={{
width: "100%",
height: "100%",
display: "flex",
justifyContent: "center",
alignItems: "center",
maxHeight: maxHeight,
}}
>
<CircularProgress></CircularProgress>
</div>
</div> </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