react+ant封装可拖拽（Modal）弹窗，继承官方属性。可进行拓展

Do vis~

已于 2024-04-10 23:35:40 修改

阅读量361

点赞数 4

CC 4.0 BY-SA版权

文章标签： javascript 前端 react.js

于 2024-03-27 20:31:45 首次发布

本文链接：https://blog.youkuaiyun.com/gittt/article/details/137088416

本文介绍了如何使用React和AntDesign库创建一个可拖拽的Modal组件，该组件继承了AntDesignModal的官方属性，并允许用户自定义拖拽行为和边界。作者展示了如何使用useState、useRef和useEffecthooks来实现这个功能及其使用示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

react+ant封装可拖拽（Modal）弹窗，继承官方属性。可进行拓展

import { useState, useRef, useEffect } from "react";
import { Modal, ModalProps } from "antd";
import Draggable from "react-draggable";
import styles from "./index.module.less";

//ModalProps 继承官方modal属性，使用时属性提示
interface WebModal extends ModalProps {
  openDrag?: boolean; //是否开启弹窗的拖拽
  dragHandle?: boolean; //开启头部拖拽或者弹窗拖拽
}
const WebReactModal= ({
  openDrag = false,
  dragHandle = false,
  ...props
}: WebModal) => {
  const [position,setPosition]=useState({ x: 0, y: 0 })
  const [bounds, setBounds] = useState({
    left: 0,
    top: 0,
    bottom: 0,
    right: 0,
  }); //存储模态框的边界值
   const draggleRef = useRef<any>();
  //模态框开始移动计算莫太框的位置和边界
  const onStart = (event, uiData) => {
    const { clientWidth, clientHeight } = window?.document?.documentElement;
    //获取到模态框的位置，从而计算可以动的边界值
    const targetRect = draggleRef?.current?.getBoundingClientRect(); 
       setBounds({
      left: -targetRect?.left + uiData.x,
      right: clientWidth - (targetRect?.right - uiData.x),
      top: -targetRect?.top + uiData.y,
      bottom: clientHeight - (targetRect?.bottom - uiData.y),
    });
  };
  //因为设置了初始位置，所以添加模态框移动时更新位置
   const onDrag = (e, data) => {
    const { x, y } = data;
    setPosition({ x, y });
  };
  //监听模态框的关闭，恢复到初始的位置
  useEffect(() => {
    if (!props.open) {
      setPosition({ x: 0, y: 0 });
    }
  }, [props?.open]);
  return (
    <Modal
      maskClosable={false}
      className={styles.webModal}
      modalRender={(modal) => (
        <Draggable
          handle={dragHandle?"":'.ant-modal-header'}
          disabled={openDrag}
          onDrag={onDrag} 
          bounds={bounds}
          position={position}
          onStart={(event, uiData) => onStart(event, uiData)}
        >
         <div ref={draggleRef}>{modal}</div>
        </Draggable>
      )}
      {...props}
    >
      {props?.children}
    </Modal>
  );
};

export default WebReactModal;

//index.module.less样式文件
.webModal {
  :global {
    .ant-modal-content {
      .ant-modal-header {
        padding: 10px;
        background: #e5f0ff;
        border-bottom: 1px solid #f0f0f0;
        border-radius: 2px 2px 0 0;
      }
    }
    //标题样式，可根据自己需要修改样式
    .ant-modal-title {
      color: #566286;
      width: 100%;
      cursor: move;
      user-select: none;
      font-weight: bold;
    }
//关闭弹窗的X的样式
    .ant-modal-close-x {
      width: 42px;
      height: 42px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
}

//使用方法----记得应用组件哦
<WebModalwidth={1200} onOk={()=>{}} title={"测试弹窗"} open={openA} onCancel={()=>{setOpenA(false)}}>
  <div>存放弹窗中的内容</div>
</WebModal>