title: Modal 对话框 nav: title: 组件 path: /components order: 1 group: title: ' ' path: /modal order: 126
Modal - 对话框
基于 antd modal 封装，简化了 Modal 操作，将 form 集成到了 modal 中，支持 fields 属性配置生成。在确定时，自动校验表单数据，并提交，成功后关闭弹窗。
传入 fields
confirmLoading
- 如果传入 conformLoading, 表示 ok button 的 loading 状态由外部控制;
- 没传入 confirmLoading, 且 onOk 返回为 Promise, 则内部会自动处理 loading 状态;
- 当 onOk 执行完返回 false, 或 onOk 返回的 Promise resolve false 的时候, 表示不关闭弹窗;
API
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|---|---|---|---|---|
| fields | form 中 fields 属性 | Array | ||
| form | 外部 form, 没有内部会默认创建 | undefined | FormInstance | |
| column | 控制 Modal 中 Form 的列数 | number | ||
| endChildren | 渲染在 Form 之后的节点 | ReactNode | null | |
| data | form 表单数据 | Object | ||
| contentLoading | 内容加载 Loading | Boolean | false | |
| confirmLoading | 确定按钮状态 | Boolean | false | |
| extraAction | 额外操作按钮 | ({ onOk })=> ReactNode | undefined |
其余参照 antd modal
onOk 方法需要返回 promise，控制是否关闭弹框