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

因为产品有这个需求,她觉得这个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>
)

注意事项

  1. 目前只支持antdPro中的ModalForm,暂不支持antd中的Modal
  2. 不允许拖动出可视区域之外
  3. 已经修复了Modal有部分在视口之外无法移动的bug,一般来说只可能出现底部处于视口之外的情况(因为宽度会随视口宽度自适应),在这种情况下不允许往下拖,往左往右往上都可以。
相关推荐
中微子1 分钟前
JavaScript事件循环机制:面试官最爱问的10个问题详解
前端
Eighteen Z10 分钟前
CSS揭秘:10.平行四边形
前端·css·css3
拾光拾趣录18 分钟前
虚拟DOM
前端·vue.js·dom
爱学习的茄子18 分钟前
JavaScript事件循环深度解析:理解异步执行的本质
前端·javascript·面试
1024小神19 分钟前
cocos游戏开发中多角色碰撞,物理反弹后改变方向的实现逻辑
前端·javascript
摆烂为不摆烂23 分钟前
😁深入JS(五): 一文让你完全理解 hash 与 history 路由,手写前端路由
前端
1024小神23 分钟前
cocos游戏开发中,如何制作一个空气墙
前端·javascript
爱编程的喵23 分钟前
深入理解JavaScript事件循环机制:从同步到异步的完整解析
前端·javascript
202624 分钟前
11. vite打包优化
前端·javascript·vite
拾光拾趣录29 分钟前
组件封装的⼀些基本准则
前端·前端工程化