Skip to content

useFormDrawer 表单抽屉

useFormDialog 对称:在 useDrawer 之上注入 ElFormBuilder,提交流程(validatesubmitHandlerresolve)与 cancel / reject 语义一致。

须在应用根布局挂载 <portal-target name="ell-drawer" multiple />(文档站已在 site-layout 中放置)。

基础用法

参数

useFormDrawer(options, keepInstance?, targetName?)

参数说明默认
optionsUseFormDrawerOptions
keepInstance是否保留 ElDrawer 实例(同 useDrawerfalse
targetNameportal 目标名'ell-drawer'

返回值

useDrawerdrawerUid、各 *PortalNameopenDrawer 等基础上扩展:

属性说明
formUid内部为 ElFormBuilder 生成的 uid
open / openFormDrawer打开表单抽屉,入参 EllFormDrawerOpenArgs?
close手动 resolve;不传参时 data.model 为当前快照
dismissreject({ reason: 'cancel' })

类型说明

主包导出:

ts
import type {
  EllFormDrawerFormConfig,
  EllFormDrawerOpenArgs,
  EllFormDrawerPayload,
  UseFormDrawerOptions,
} from 'element-plus-lab'
  • EllFormDrawerPayload:与表单对话框相同,为 modelformRef
  • UseFormDrawerOptions:在 formConfig 之外,常用 title / size / variant / headerConfig / drawerConfig / actionConfig(不含 okHandler / cancelHandler,由钩子注入)、submitText / cancelText / actionsrenderHeader / render / renderFooter / beforeClose(语义同 useDrawer)。

详见 packages/components/form-drawer/src/types.ts

贡献者

页面历史

Released under the Apache License 2.0.