Skip to content

DialogForm 弹窗表单

xy-dialog-formxy-overlay-form 的轻包装版本,用来表达“这里明确就是弹窗编辑”的场景。它固定使用 container="modal",但继续复用同一套覆盖层表单内核。

基础用法

当页面已经明确要用弹窗承接编辑动作时,用 xy-dialog-form 会比再手写 container="modal" 更直接。

最近结果
尚未提交

当前定位

  • 这是 OverlayForm 的语义化 facade,不是第二套弹窗表单内核。
  • 适合创建成员、修改属性、补充说明这类轻量弹窗编辑场景。
  • 当使用方已经确定容器必须是弹窗时,优先使用它。

与 OverlayForm 的关系

  • OverlayForm 继续承担统一覆盖层编辑内核。
  • DialogForm 只固定容器为弹窗,并保留同一套 open / mode / model / schema / submit 协议。
  • 如果你的页面需要在抽屉和弹窗之间切换,仍然应直接使用 OverlayForm

DialogForm API

DialogFormProps 继承自 OverlayFormProps 的属性(Omit 掉 container / drawerProps),下表列出全部可用属性。

DialogForm Attributes

属性说明类型默认值
open是否打开弹窗,受控模式booleanfalse
mode表单模式,影响默认标题和按钮文案'create' / 'edit' / 'view''create'
title弹窗标题,缺省时按 mode 生成string''
model表单数据对象Record<string, unknown>-
schemaschema 驱动的字段配置数组ProFieldSchema[][]
rules表单校验规则FormRules{}
label-width表单项 label 宽度string / number'112px'
label-positionlabel 位置'left' / 'top''top'
size表单尺寸ComponentSize'md'
loading是否处于加载中booleanfalse
submitting是否提交中booleanfalse
readonly是否只读,modeview 时强制只读booleanfalse
submit-text提交按钮文案,缺省时按 mode 生成string''
cancel-text取消按钮文案,缺省时按 mode 生成string''
reset-on-close关闭时是否重置表单状态booleanfalse
destroy-on-close关闭后是否销毁表单内容booleanfalse
dialog-props透传给内部 xy-dialog 的配置Omit<Partial<DialogProps>, 'modelValue' / 'title'>{}

DialogForm Events

事件名说明参数
update:open弹窗开合状态变化时派发(value: boolean) => void
submit校验通过后派发,携带模式与 model 快照(payload: OverlayFormSubmitPayload) => void
cancel点击取消按钮时派发并关闭弹窗(payload: OverlayFormSubmitPayload) => void
closed弹窗关闭动画结束后派发() => void

DialogForm Slots

插槽说明接收参数
default自定义表单项内容,仅在 schema 为空时渲染{ model, mode, readonly }
actions自定义底部动作区按钮{ model, mode, readonly, submitting, submit, cancel, close }

其余插槽会原样透传给内部的 xy-pro-form(例如 schema 字段的 [field.slot] 插槽)。

DialogForm Exposes

名称类型说明
validate() => Promise<boolean>触发内部表单校验,返回是否通过
submit() => Promise<boolean>校验通过后派发 submit 事件,返回是否执行成功
close() => void关闭弹窗