# dialog-modal LLMs.txt > 供 LLM 快速理解 `@flatbiz/antd/dialog-modal` 的使用方式。 ## 模块定位 居中弹框 ## 导入方式 ```ts import { dialogModal } from '@flatbiz/antd/dialog-modal'; // 也可以从主入口导入:import { ... } from '@flatbiz/antd'; ``` ## 公开导出 - `dialogModal` - 居中弹框 - `DialogModalProps` - `* from ./dialog-modal.jsx` ## 依赖的 antd 能力 `Form`、`FormInstance`、`Modal`、`ModalProps` ## Props / 配置要点 ### DialogModalProps - `size`(可选):: 'small' | 'middle' | 'large' | null;内置尺寸,根据比例固定高度、宽度,默认:无 - `onOk`(可选):: ( form: FormInstance, e: React.MouseEvent ) => void | Promise - `onCancel`(可选):: ( form: FormInstance, e: React.MouseEvent ) => void | Promise - `content`(必填):: | string | ReactElement | ((form: FormInstance, operate: { onClose: TNoopDefine }) => ReactElement);content只在第一次弹起时,执行一次 - `configProviderProps`(可选):: ConfigProviderWrapperProps - `okHidden`(可选):: boolean - `cancelHidden`(可选):: boolean - `okButtonProps`(可选):: Omit - `cancelButtonProps`(可选):: Omit< ButtonWrapperProps, 'hidden' | 'children' | 'onClick' > - `bodyHeightPercent`(可选):: number;设置modal body height 为当前窗口height的百分比,例如:30 @deprecated 已失效,可通过size属性设置 - `titleExtra`(可选):: ReactElement - `footer`(可选):: | null | ReactElement | ReactElement[] | ((form: FormInstance, extraData?: TPlainObject) => ReactElement);null则隐藏footer - `bodyHeight`(可选):: number;内容高度,为styles.body.height快捷配置,优先级低于styles.body.height ## 使用规则与行为 - 重新渲染footer - 内置尺寸,根据比例固定高度、宽度,默认:无 - content只在第一次弹起时,执行一次 - 设置modal body height 为当前窗口height的百分比,例如:30 @deprecated 已失效,可通过size属性设置 - null则隐藏footer - 内容高度,为styles.body.height快捷配置,优先级低于styles.body.height - 居中弹框 - 重新渲染 footer, data为携带的数据,是footer的第二个参数 ## 基础示例 ```tsx import { dialogModal, type DialogModalProps } from '@flatbiz/antd/dialog-modal'; const props: DialogModalProps = { // 按业务传入必要参数 }; ; ``` ## 源码索引 - `src/dialog-modal/context.ts` - `src/dialog-modal/dialog-modal.tsx` - `src/dialog-modal/index.ts` ## 给 LLM 的注意事项 - 优先使用 `@flatbiz/antd/dialog-modal` 或主入口 `@flatbiz/antd` 的公开导出,不要引用内部实现文件。 - 当 Props 与 antd 原组件同名能力冲突时,以本模块导出的 Props 类型为准。 - 若文档未覆盖某个边缘参数,请读取上方源码索引中的类型定义和 JSDoc。