feat: form compact mode support (#5165)

This commit is contained in:
Netfan
2024-12-17 20:51:17 +08:00
committed by GitHub
parent 181e38733c
commit b22d900e27
5 changed files with 26 additions and 4 deletions

View File

@@ -138,7 +138,11 @@ defineExpose({
<template>
<div
:class="
cn('col-span-full w-full pb-6 text-right', rootProps.actionWrapperClass)
cn(
'col-span-full w-full text-right',
rootProps.compact ? 'pb-2' : 'pb-6',
rootProps.actionWrapperClass,
)
"
:style="queryFormStyle"
>

View File

@@ -55,7 +55,7 @@ const values = useFormValues();
const errors = useFieldError(fieldName);
const fieldComponentRef = useTemplateRef<HTMLInputElement>('fieldComponentRef');
const formApi = formRenderProps.form;
const compact = formRenderProps.compact;
const isInValid = computed(() => errors.value?.length > 0);
const FieldComponent = computed(() => {
@@ -281,8 +281,10 @@ function autofocus() {
'form-valid-error': isInValid,
'flex-col': isVertical,
'flex-row items-center': !isVertical,
'pb-6': !compact,
'pb-2': compact,
}"
class="flex pb-6"
class="flex"
v-bind="$attrs"
>
<FormLabel

View File

@@ -273,6 +273,10 @@ export interface FormRenderProps<
* 表单项通用后备配置,当子项目没配置时使用这里的配置,子项目配置优先级高于此配置
*/
commonConfig?: FormCommonConfig;
/**
* 紧凑模式(移除表单每一项底部为校验信息预留的空间)
*/
compact?: boolean;
/**
* 组件v-model事件绑定
*/