Skip to content

OverlayForm 覆盖层表单

xy-overlay-form 用来统一表达“在当前页面上下文中打开一个覆盖层表单”的能力,通过 container="drawer" | "modal" 收口抽屉与弹窗两种编辑容器。若页面已经明确固定使用其中一种容器,也可以直接使用 xy-dialog-formxy-drawer-form 这两个 facade。

覆盖层编辑场景

这个场景把“列表内快速编辑”和“轻量属性修改”统一放到同一套覆盖层表单心智里。

收口后的理解方式

这里不再把“抽屉表单”和“弹窗表单”当作两套独立能力来理解,而是统一理解为覆盖层编辑。

体量较大、需要保留列表上下文时走抽屉;字段较少、只想做快速确认时走弹窗。

成员台账

同一个列表里同时存在“完整编辑”和“快速补充说明”两类覆盖层动作。

关闭生命周期

resetOnClose 负责重置字段与校验态,destroyOnClose 负责关闭后卸载内容,两者可以同时启用。

关闭生命周期对照

`resetOnClose` 只负责重置字段与校验态,不卸载内容节点。

`destroyOnClose` 会在关闭后卸载内容,下次打开重新挂载。

仅 resetOnClose
挂载 0 次,卸载 0 次
resetOnClose + destroyOnClose
挂载 0 次,卸载 0 次

当前定位

  • 统一表达覆盖层编辑内核,不要求使用方为抽屉和弹窗维护两套底层逻辑。
  • 适合后台列表页中的创建、编辑、补充说明、轻量审批等链路。
  • 在收口后的公开体系里,它应是 CrudPageListPage 和详情链路的上游编辑容器。
  • mode='view' 时,会直接切到只读详情展示协议,而不是继续显示禁用态字段控件。

OverlayForm API

OverlayForm Attributes

属性说明类型默认值
open是否打开booleanfalse
container覆盖层容器类型'drawer' | 'modal''drawer'
mode表单模式'create' | 'edit' | 'view''create'
title标题string''
model表单数据Record<string, unknown>
schema字段 schemaProFieldSchema[][]
rules表单规则FormRules{}
loading初始加载态booleanfalse
submitting提交中态booleanfalse
readonly是否只读booleanfalse
reset-on-close关闭后是否重置字段与校验态booleanfalse
destroy-on-close关闭后是否卸载表单内容,下次打开重新挂载booleanfalse
drawer-props透传给抽屉容器的属性Partial<DrawerProps>{}
dialog-props透传给弹窗容器的属性Partial<DialogProps>{}

OverlayForm Events

事件名说明参数
update:open打开状态变化时派发(value: boolean) => void
submit提交成功时派发({ mode, model }) => void
cancel取消时派发({ mode, model }) => void
closed覆盖层完全关闭后派发() => void

OverlayForm Slots

插槽说明
default表单内容
actions自定义底部动作区