响应式弹窗 ResponsiveModal

响应式弹窗根据屏幕尺寸自动切换显示模式，在宽屏下显示为 Modal，在窄屏下显示为 Drawer。

何时使用

• 需要在不同设备上提供一致的用户体验时
• 希望在移动端使用抽屉式弹窗，在桌面端使用模态弹窗时
• 构建响应式应用时需要适配不同屏幕尺寸的弹窗组件时

示例

基础用法

最基本的响应式弹窗使用方式，根据屏幕宽度自动切换显示模式。

自定义断点

通过 breakpoint 属性自定义响应式断点。

不同抽屉弹出方向

在移动端可以设置不同的抽屉弹出方向。

从底部弹出（默认）

从右侧弹出

表单示例

响应式弹窗常用于表单场景。

确认对话框

用于确认操作的响应式弹窗。

无底部弹窗

通过 showFooter 属性隐藏底部操作区域。

自定义底部

通过 footer 属性自定义底部内容。

API

ResponsiveModal Props

参数	说明	类型	默认值
open	是否显示	boolean	false
title	标题	ReactNode	-
closable	是否显示关闭按钮	boolean	true
closeByOverlay	点击蒙层是否可以关闭	boolean	true
onClose	关闭时的回调	() => void	-
onOk	点击确认按钮的回调	() => void	-
width	Modal 宽度（PC端）	number | string	520
height	Drawer 高度（移动端上下弹出时）	number | string	'auto'
footer	自定义 footer，设置为 null 则不显示	ReactNode | null	-
showFooter	是否显示 footer	boolean	true
okText	确认按钮文字	string	'确定'
cancelText	取消按钮文字	string	'取消'
okButtonProps	确认按钮属性	ButtonProps	-
cancelButtonProps	取消按钮属性	ButtonProps	-
showCancel	是否显示取消按钮	boolean	true
children	子元素（正文内容）	ReactNode	-
className	自定义类名	string	-
breakpoint	响应式断点，小于此值使用 Drawer，大于等于此值使用 Modal	number	1024
drawerPlacement	移动端 Drawer 弹出方向	'top' | 'right' | 'bottom' | 'left'	'bottom'
afterOpenChange	打开/关闭动画完成后的回调	(open: boolean) => void	-

注意事项

1. 响应式弹窗会根据屏幕宽度自动切换显示模式：
   • 宽屏（≥ breakpoint）：显示为 Modal
   • 窄屏（< breakpoint）：显示为 Drawer
2. 默认断点为 1024px，可通过 breakpoint 属性自定义
3. 在移动端，可以通过 drawerPlacement 属性设置抽屉的弹出方向
4. 在移动端，可以通过 height 属性设置抽屉的高度
5. 在桌面端，可以通过 width 属性设置模态框的宽度
6. 其他属性与 Modal 和 Drawer 组件保持一致
7. 组件会监听窗口大小变化，自动切换显示模式
8. 在 SSR 环境中，组件会根据初始窗口大小决定首次渲染的模式