基于antd pro封装的一个可拖动的modalform

昌平第一王昭君2025-06-20 13:51

因为产品有这个需求，她觉得这个ModalForm有时候挡着后面，顺手发个npm包吧、

效果

安装

bash 复制代码

npm install draggable_modalform
yarn add draggable_modalform

github：github.com/haodali4s/d...

使用

tsx 复制代码

import DraggableModalForm from 'draggable_modalform';
import { ModalForm } from "@ant-design/pro-components";

return (
    <DraggableModalForm>
        <ModalForm ...yourProps> </ModalForm>
    </DraggableModalForm>
)

注意事项

目前只支持antdPro中的ModalForm，暂不支持antd中的Modal
不允许拖动出可视区域之外
已经修复了Modal有部分在视口之外无法移动的bug,一般来说只可能出现底部处于视口之外的情况(因为宽度会随视口宽度自适应),在这种情况下不允许往下拖，往左往右往上都可以。