基于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,一般来说只可能出现底部处于视口之外的情况(因为宽度会随视口宽度自适应),在这种情况下不允许往下拖,往左往右往上都可以。
相关推荐
杨进军5 分钟前
实现 React Fragment 节点渲染
前端·react.js·前端框架
杨进军7 分钟前
实现 React 类组件渲染
前端·react.js·前端框架
小山不高8 分钟前
react封装横向滚动组件
前端
拾光拾趣录10 分钟前
油猴插件开发学习:从零编写你的第一个浏览器增强脚本
前端·浏览器
国家不保护废物10 分钟前
深入浅出JavaScript事件循环(event loop):宏任务与微任务的奇幻之旅
前端·javascript·面试
FogLetter11 分钟前
React组件开发之Todos基础:从零打造一个优雅的待办事项应用
前端·javascript·react.js
刘羡阳12 分钟前
使用d3js实现了一个组织架构树形图(拖拽,展开收起)
前端
风铃喵游16 分钟前
Vue渲染器:打通开发编译渲染的最后一步
前端·架构
拾光拾趣录16 分钟前
虚拟DOM超详细流程
前端·vue.js·dom
猩猩程序员17 分钟前
用 Rust 与太空对话:KSAT 的工程实践
前端