原贴 轻松搞定Ant Design Modal对话框拖拽缩放 - ByteZoneX社区
https://www.bytezonex.com/archives/IFRuoJhd.html
Ant Design 模态对话框：实现拖拽缩放功能
**子
Ant Design 是一个流行的前端 UI 框架，提供了一系列实用的组件，包括模态对话框。虽然默认情况下 Ant Design 的模态对话框不支持拖拽缩放，但我们可以通过 resize 属性轻松实现这一功能。
要使用 resize 属性，我们需要在 React 项目中安装 antd 库：
npm install antd
然后，在我们的代码中引入 antd：
import { Modal } from 'antd';
在 Modal 组件中添加 style={{ resize: 'both' }} 属性：
<Modal
title="Basic Modal"
visible={visible}
onOk={handleOk}
onCancel={handleCancel}
style={{ resize: 'both' }}
>
<p>Some contents...</p>
</Modal>
通过设置 resize 属性为 'both'，我们告诉浏览器允许用户调整对话框的宽度和高度。现在，当你点击按钮打开对话框时，你可以拖动它的边框来改变大小。
**子
除了使用 resize 属性，我们还可以使用 JavaScript 代码实现拖拽缩放功能：
const modal = document.getElementById('modal');
const resizeHandler = (e) => {
const width = e.clientX - modal.offsetLeft;
const height = e.clientY - modal.offsetTop;
modal.style.width = `${width}px`;
modal.style.height = `${height}px`;
};
modal.addEventListener('mousedown', (e) => {
if (e.target.className === 'modal-header') {
window.addEventListener('mousemove', resizeHandler);
}
});
window.addEventListener('mouseup', () => {
window.removeEventListener('mousemove', resizeHandler);
});
我们首先获取对话框元素的引用，然后定义一个处理函数 resizeHandler，用于调整对话框的大小。接着，我们为对话框元素添加 mousedown 事件监听器，当用户按下鼠标左键时触发。如果用户点击的是对话框标题栏，我们为 window 对象添加 mousemove 事件监听器，在鼠标移动时触发。最后，我们在 mouseup 事件监听器中移除 mousemove 事件监听器。现在，当用户点击对话框标题栏并拖动鼠标时，对话框的大小就会随之改变。
**子
实现拖拽缩放功能的两种方法各有优缺点。使用 resize 属性更简单、更直接，但对某些浏览器（如 Safari）的支持可能不够好。使用 JavaScript 代码更灵活，但需要更多的代码和调试。选择合适的方法取决于你的具体项目需求和浏览器支持要求。
结论
通过使用 resize 属性或 JavaScript 代码，我们可以轻松地实现 Ant Design 模态对话框的拖拽缩放功能。这将增强用户的交互体验，让你的对话框更具可定制性和实用性。
常见问题解答
1. resize 属性仅适用于特定的浏览器吗？
是的，resize 属性可能对某些浏览器（如 Safari）支持不够好。
2. 如何在对话框处于全屏模式时禁用拖拽缩放？
如果你不希望在对话框全屏模式下允许拖拽缩放，可以使用以下 JavaScript 代码：
document.documentElement.style.overflow = 'hidden';
3. 是否可以设置最小和最大对话框大小？
是的，可以使用以下 CSS 样式：
#modal {
min-width: 300px;
max-width: 600px;
}
4. 拖拽缩放是否适用于模态对话框中的嵌套组件？
是的，拖拽缩放也适用于嵌套组件。
5. 如何通过代码编程方式调整对话框大小？
可以使用以下 JavaScript 代码：
modal.style.width = '600px';
modal.style.height = '400px';
