可拖拽 可变更大小的modal
antd的modal组件简单便利，但最近的需求是让modal可拖拽和可以自定义大小可拖拽和自定义大小通过在github搜索resizable draggable两个关键字可快速的定位到react-rnd这个开源组件。该组件为一个实现了可拖拽和自定义大小的容器，但需要注意的是，这个容器的整体都是可拖拽的，可以通过内部的disableDragging来使其失去可拖拽的能力。modal样式这里...
·
antd的modal组件简单便利，但最近的需求是让modal可拖拽和可以自定义大小
可拖拽和自定义大小
通过在github搜索resizable draggable两个关键字可快速的定位到react-rnd这个开源组件。
该组件为一个实现了可拖拽和自定义大小的容器，但需要注意的是，这个容器的整体都是可拖拽的，可以通过内部的disableDragging来使其失去可拖拽的能力。
modal样式
这里参考antd-modal 替代品 可拖动弹窗组件这篇文章，可以很迅速的完成一个类antd的modal组件
将组件渲染到body下
以上方式完成的modal组件会受到其父容器的显示效果与遮罩等影响，可能在项目中出现一些匪夷所思的bug，因此在body下新增一个节点将组件渲染进去会是一个省事的方案(如果时间充裕，可以参考antd的modal源码)，此处的处理方案参考了React在body下追加全局组件并实现渲染更新这篇文章
总结
整个组件的实现可以说是完全的搬运开源项目和各位大佬的文章，因为时间匆忙，并未仔细的阅读antd的modal实现，所以仅作参考，如有不妥之处还请不吝赐教，效果图和源码会与近期整理后贴出来。
权威｜前沿｜技术｜干货｜国内首个API全生命周期开发者社区
更多推荐
0
0- 0
已为社区贡献1条内容
所有评论(0)