Antd可拖动模态框简单封装(修改版本)

最新推荐文章于 2025-06-10 09:00:01 发布

原创最新推荐文章于 2025-06-10 09:00:01 发布 · 4.6k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#react #antd #Modal

React学习note 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了一种使用React和Ant Design实现自定义拖动弹窗的方法，通过DragM组件更新弹窗位置，增强用户体验。

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

import  React from 'react';
import DragM from 'dragm';
import Modal from "../../node_modules/antd/lib/modal/Modal";
class ModalTitle extends React.Component {
  updateTransform = transformStr => {
    this.modalDom.style.transform = transformStr;
  };
  componentDidMount() {
    this.modalDom = document.getElementsByClassName(
      "ant-modal-wrap" //modal的class是ant-modal-wrap
    )[0];
  }
  render() {
    const { title } = this.props;
    return (
      <DragM updateTransform={this.updateTransform}>
        <div>{title}</div>
      </DragM>
    );
  }
}
export  default  class SeniorModal extends  React.Component{
  render() {
    const title = <ModalTitle title={this.props.title} />;
    return (
        <Modal
         {...this.props}
         title={title}
        >
          {this.props.children}
        </Modal>
    );
  }
}