HFormDrawer
对HForm内容过多,弹框显示有限的情况下,抽屉场景化展示展示更佳
组件示例
Props
| 属性 | 类型 | 描述 |
|---|---|---|
placement | 'left' 或 'right' 或 'top' 或 'bottom' (可选) | 抽屉弹出位置,默认为 'right' |
showFooterBtn | boolean (可选) | 是否显示底部按钮(确定,取消) |
title | string (可选) | 表单标题 |
show | boolean | 是否显示抽屉 |
rules | HFormRule[] | 表单规则 |
showForm | boolean (可选) | 是否显示表单内容,用于特殊场景,不展示表单,通过自定义slot展示其内容 |
formCols | number (可选) | 表单列数 |
formType | 'FORM' 或 'FILTER' (可选) | 表单类型 |
filterInitSearch | boolean (可选) | 筛选器模式下,是否初始化搜索 |
formCard | boolean (可选) | 是否显示卡片 |
width | number (可选) | 抽屉宽度 |
confirmLoading | boolean (可选) | 表单提交按钮的 loading 状态 |
formLabelWidth | number (可选) | 表单标签宽度 |
formData | object (可选) | 表单数据 |
resizable | boolean (可选) | 是否可拖动 |
closable | boolean (可选) | 是否可关闭 |
Events
| 事件名 | 参数类型 | 描述 |
|---|---|---|
dataChange | [data: Record<string, any>] | 数据变化时触发,传递变化后的数据 |
confirm | [data: Record<string, any>] | 表单确认提交时触发,传递表单数据 |
search | [data: Record<string, any>] | 筛选器搜索时触发,传递搜索条件数据 |
reset | [data: Record<string, any>] | 表单重置时触发,传递重置后的数据 |
close | - | 模态框关闭时触发,无参数 |
Slots
| 名称 | 说明 |
|---|---|
header | 头部插槽 |
default | 默认插槽 |
footer | 底部插槽,自定义底部的按钮或其他内容 |
footer-btn-prefix | 底部按钮前缀插槽 |
footer-btn-suffix | 底部按钮后缀插槽 |
动态插槽,根据表单配置的项进行动态化配置[field] | 当表单项的compType为Slot时,会触发该插槽, 以满足特殊场景的组件需求,定制化、特殊化 |
