Skip to content

DrawerForm 抽屉表单

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

基础用法

当列表页需要保留上下文、在右侧展开编辑抽屉时,xy-drawer-form 会比手写 container="drawer" 更贴近业务心智。

最近结果
尚未提交

当前定位

  • 这是 OverlayForm 的语义化 facade,不是第二套抽屉表单内核。
  • 适合列表页快速编辑、详情侧滑修改和保留页面上下文的录入场景。
  • 当使用方已经确定容器必须是抽屉时,优先使用它。

与 OverlayForm 的关系

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

DrawerForm API

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

DrawerForm 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
drawer-props透传给内部 xy-drawer 的配置Omit<Partial<DrawerProps>, 'modelValue' / 'title'>{}

DrawerForm Events

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

DrawerForm Slots

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

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

DrawerForm Exposes

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