Skip to content

HFormDrawer

对HForm内容过多,弹框显示有限的情况下,抽屉场景化展示展示更佳

组件示例

Props

属性类型描述
placement'left' 或 'right' 或 'top' 或 'bottom' (可选)抽屉弹出位置,默认为 'right'
showFooterBtnboolean (可选)是否显示底部按钮(确定,取消)
titlestring (可选)表单标题
showboolean是否显示抽屉
rulesHFormRule[]表单规则
showFormboolean (可选)是否显示表单内容,用于特殊场景,不展示表单,通过自定义slot展示其内容
formColsnumber (可选)表单列数
formType'FORM' 或 'FILTER' (可选)表单类型
filterInitSearchboolean (可选)筛选器模式下,是否初始化搜索
formCardboolean (可选)是否显示卡片
widthnumber (可选)抽屉宽度
confirmLoadingboolean (可选)表单提交按钮的 loading 状态
formLabelWidthnumber (可选)表单标签宽度
formDataobject (可选)表单数据
resizableboolean (可选)是否可拖动
closableboolean (可选)是否可关闭

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时,会触发该插槽, 以满足特殊场景的组件需求,定制化、特殊化

Released under the MIT License.