XphDialog 层叠弹窗

基本使用

import React, { useRef, useState } from "react";
import { Input, Button } from "antd";
import { XphDialog, IXphDialogProps, IXphDialogActionType } from "xph-crud";

const ReactApp: React.FC = () => {
  const firstDialogRef = useRef<IXphDialogActionType>(null);
  const secondDialogRef = useRef<IXphDialogActionType>(null);
  const thirdDialogRef = useRef<IXphDialogActionType>(null);
  const firstDialogProps: IXphDialogProps = {
    title: "弹窗1标题",
    width: 1000,
    height: 1200,
    getPopperContainer: () => document.getElementById("docs-comp-dialog-base"),
  };

  const secondDialogProps: IXphDialogProps = {
    // mask: true,
    title: "弹窗2标题",
    width: 500,
    height: 500,
    // height: 1200,
    getPopperContainer: () => document.getElementById("docs-comp-dialog-base"),
  };

  const [thirdWidth, setThirdWidth] = useState(300);
  const thirdDialogProps: IXphDialogProps = {
    mask: false,
    title: "弹窗3标题",
    width: thirdWidth,
    height: 300,
    getPopperContainer: () => document.getElementById("docs-comp-dialog-base"),
  };

  const inputRef = useRef<any>(null);

  const onOpenFirstDialog = () => {
    firstDialogRef.current?.open();
  };

  const onOpenSecondDialog = () => {
    secondDialogRef.current?.open();
  };

  const onOpenThirdDialog = () => {
    thirdDialogRef.current?.open();
  };

  const onConsoleChildrenDom = () => {
    console.log(inputRef);
  };

  const onChangeThirdWidth = () => {
    setThirdWidth(400);
  };

  /** 弹窗1的内容组件 */
  const Content = () => {
    console.log("渲染Content");
    return (
      <div style={{ width: "1200px", height: "1200px" }}>
        <>我是弹窗1</>
        <div>
          <Input />
        </div>
      </div>
    );
  };

  return (
    <div
      id="docs-comp-dialog-base"
      style={{
        width: "100%",
        height: "100%",
        overflow: "auto",
        position: "relative",
      }}
    >
      <div style={{ display: "flex", gap: "8px", flexWrap: "wrap" }}>
        <Button onClick={onOpenFirstDialog}>点击打开XphDialog弹窗1</Button>
        <Button onClick={onOpenSecondDialog}>点击打开XphDialog弹窗2</Button>
        <Button onClick={onOpenThirdDialog}>点击打开XphDialog弹窗3</Button>
        <Button onClick={onConsoleChildrenDom}>点击打印弹窗2子元素</Button>
        <Button onClick={onChangeThirdWidth}>点击动态改变弹窗3宽度</Button>
      </div>
      {/** 用来测试父元素有滚动条的情况 */}
      {/* <div style={{ width: "1200px", height: "1200px" }}></div> */}

      <XphDialog {...firstDialogProps} ref={firstDialogRef}>
        <Content />
      </XphDialog>
      <XphDialog {...secondDialogProps} ref={secondDialogRef}>
        <Input ref={inputRef} />
      </XphDialog>
      <XphDialog {...thirdDialogProps} ref={thirdDialogRef}>
        我是弹窗3
      </XphDialog>
    </div>
  );
};

export default ReactApp;

案例

遮罩层

tips
开启遮罩层，弹窗强制挂载于 body 节点

import React, { useRef } from "react";
import { Button } from "antd";
import { XphDialog, IXphDialogProps, IXphDialogActionType } from "xph-crud";

const ReactApp: React.FC = () => {
  const dialogRef = useRef<IXphDialogActionType>(null);
  const dialogProps: IXphDialogProps = {
    title: "弹窗标题",
    mask: true,
  };

  const onClickOpenDialogBtn = () => {
    dialogRef.current?.open();
  };

  return (
    <div
      style={{
        width: "100%",
        height: "100%",
        overflow: "auto",
        position: "relative",
      }}
    >
      <div style={{ display: "flex", gap: "8px", flexWrap: "wrap" }}>
        <Button onClick={onClickOpenDialogBtn}>打开弹窗</Button>
      </div>
      <XphDialog {...dialogProps} ref={dialogRef}>
        我是弹窗内容
      </XphDialog>
    </div>
  );
};

export default ReactApp;

宽度

import React, { useRef } from "react";
import { Button } from "antd";
import { XphDialog, IXphDialogProps, IXphDialogActionType } from "xph-crud";

const ReactApp: React.FC = () => {
  const dialogRef = useRef<IXphDialogActionType>(null);
  const dialogProps: IXphDialogProps = {
    title: "弹窗标题",
    width: 400,
    getPopperContainer: () =>
      document.getElementById("docs-comp-dialog-properties-width"),
  };

  const onClickOpenDialogBtn = () => {
    dialogRef.current?.open();
  };

  return (
    <div
      id="docs-comp-dialog-properties-width"
      style={{
        width: "100%",
        height: "500px",
        overflow: "auto",
        position: "relative",
      }}
    >
      <div style={{ display: "flex", gap: "8px", flexWrap: "wrap" }}>
        <Button onClick={onClickOpenDialogBtn}>打开弹窗</Button>
      </div>
      <XphDialog {...dialogProps} ref={dialogRef}>
        我是弹窗内容
      </XphDialog>
    </div>
  );
};

export default ReactApp;

高度

import React, { useRef } from "react";
import { Button } from "antd";
import { XphDialog, IXphDialogProps, IXphDialogActionType } from "xph-crud";

const ReactApp: React.FC = () => {
  const dialogRef = useRef<IXphDialogActionType>(null);
  const dialogProps: IXphDialogProps = {
    title: "弹窗标题",
    height: 400,
    getPopperContainer: () =>
      document.getElementById("docs-comp-dialog-properties-height"),
  };

  const onClickOpenDialogBtn = () => {
    dialogRef.current?.open();
  };

  return (
    <div
      id="docs-comp-dialog-properties-height"
      style={{
        width: "100%",
        height: "500px",
        overflow: "auto",
        position: "relative",
      }}
    >
      <div style={{ display: "flex", gap: "8px", flexWrap: "wrap" }}>
        <Button onClick={onClickOpenDialogBtn}>打开弹窗</Button>
      </div>
      <XphDialog {...dialogProps} ref={dialogRef}>
        我是弹窗内容
      </XphDialog>
    </div>
  );
};

export default ReactApp;

自定义底部内容

import React, { useRef } from "react";
import { Button, Tooltip } from "antd";
import { XphDialog, IXphDialogProps, IXphDialogActionType } from "xph-crud";

const ReactApp: React.FC = () => {
  const dialogRef = useRef<IXphDialogActionType>(null);
  const dialogProps: IXphDialogProps = {
    title: "弹窗标题",
    height: 400,
    getPopperContainer: () =>
      document.getElementById("docs-comp-dialog-properties-renderFooter"),
    renderFooter: ({ loading }) => {
      return (
        <div
          style={{
            display: "flex",
            gap: "8px",
            justifyContent: "flex-end",
            alignItems: "center",
            padding: "4px",
          }}
        >
          <Tooltip
            overlay={
              <>
                合同内容：
                <br />
                1. 合同内容1
                <br />
                2. 合同内容2
                <br />
                3. 合同内容3
              </>
            }
          >
            <span style={{ color: "red" }}>注意！！！</span>
          </Tooltip>
          <Button type="primary" disabled={loading} onClick={onClickAuditBtn}>
            审核
          </Button>
        </div>
      );
    },
  };

  const onClickOpenDialogBtn = () => {
    dialogRef.current?.open();
  };

  const onClickAuditBtn = () => {
    dialogRef.current?.setLoading(true);
    setTimeout(() => {
      dialogRef.current?.setLoading(false);
      dialogRef.current?.close();
    }, 3000);
  };

  return (
    <div
      id="docs-comp-dialog-properties-renderFooter"
      style={{
        width: "100%",
        height: "500px",
        overflow: "auto",
        position: "relative",
      }}
    >
      <div style={{ display: "flex", gap: "8px", flexWrap: "wrap" }}>
        <Button onClick={onClickOpenDialogBtn}>打开弹窗</Button>
      </div>
      <XphDialog {...dialogProps} ref={dialogRef}>
        我是弹窗内容
      </XphDialog>
    </div>
  );
};

export default ReactApp;

自定义标题

import React, { useRef } from "react";
import { Button, Tooltip } from "antd";
import { XphDialog, IXphDialogProps, IXphDialogActionType } from "xph-crud";

const ReactApp: React.FC = () => {
  const dialogRef = useRef<IXphDialogActionType>(null);
  const dialogProps: IXphDialogProps = {
    title: "弹窗标题",
    height: 400,
    renderTitle: () => <Tooltip title="自定义标题">自定义标题</Tooltip>,
    getPopperContainer: () =>
      document.getElementById("docs-comp-dialog-properties-renderTitle"),
  };

  const onClickOpenDialogBtn = () => {
    dialogRef.current?.open();
  };
  return (
    <div
      id="docs-comp-dialog-properties-renderTitle"
      style={{
        width: "100%",
        height: "500px",
        overflow: "auto",
        position: "relative",
      }}
    >
      <div style={{ display: "flex", gap: "8px", flexWrap: "wrap" }}>
        <Button onClick={onClickOpenDialogBtn}>打开弹窗</Button>
      </div>
      <XphDialog {...dialogProps} ref={dialogRef}>
        我是弹窗内容
      </XphDialog>
    </div>
  );
};

export default ReactApp;

instance

import React, { useRef } from "react";
import { Button } from "antd";
import { XphDialog, IXphDialogProps, IXphDialogActionType } from "xph-crud";

const ReactApp: React.FC = () => {
  const dialogRef = useRef<IXphDialogActionType>(null);
  const dialogProps: IXphDialogProps = {
    title: "弹窗标题",
    getPopperContainer: () =>
      document.getElementById("docs-comp-dialog-properties-ref"),
  };
  return (
    <div
      id="docs-comp-dialog-properties-ref"
      style={{
        width: "100%",
        height: "500px",
        overflow: "auto",
        position: "relative",
      }}
    >
      <div style={{ display: "flex", gap: "8px", flexWrap: "wrap" }}>
        <Button onClick={() => dialogRef.current?.open()}>打开弹窗</Button>
        <Button onClick={() => dialogRef.current?.close()}>关闭弹窗</Button>
        <Button onClick={() => dialogRef.current?.setLoading(true)}>
          加载中
        </Button>
        <Button onClick={() => dialogRef.current?.setLoading(false)}>
          加载完成
        </Button>
      </div>
      <XphDialog {...dialogProps} ref={dialogRef}>
        我是弹窗内容
      </XphDialog>
    </div>
  );
};

export default ReactApp;

API

Dialog API

DialogInstance API

在 CodeSandbox 尝试