diff --git a/docs/src/components/common-ui/vben-form.md b/docs/src/components/common-ui/vben-form.md index aed2b9f85..6d1dc4eb1 100644 --- a/docs/src/components/common-ui/vben-form.md +++ b/docs/src/components/common-ui/vben-form.md @@ -308,6 +308,8 @@ useVbenForm 返回的第二个参数,是一个对象,包含了一些表单 | showCollapseButton | 是否显示折叠按钮 | `boolean` | `false` | | wrapperClass | 表单的布局,基于tailwindcss | `any` | - | | actionWrapperClass | 表单操作区域class | `any` | - | +| actionLayout | 表单操作按钮位置 | `'newLine' \| 'rowEnd' \| 'inline'` | `rowEnd` | +| actionPosition | 表单操作按钮对齐方式 | `'left' \| 'center' \| 'right'` | `right` | | handleReset | 表单重置回调 | `(values: Record,) => Promise \| void` | - | | handleSubmit | 表单提交回调 | `(values: Record,) => Promise \| void` | - | | handleValuesChange | 表单值变化回调 | `(values: Record, fieldsChanged: string[]) => void` | - | diff --git a/packages/@core/ui-kit/form-ui/src/components/form-actions.vue b/packages/@core/ui-kit/form-ui/src/components/form-actions.vue index 189755960..cc42a1612 100644 --- a/packages/@core/ui-kit/form-ui/src/components/form-actions.vue +++ b/packages/@core/ui-kit/form-ui/src/components/form-actions.vue @@ -34,17 +34,6 @@ const submitButtonOptions = computed(() => { // return !!unref(rootProps).showCollapseButton; // }); -const queryFormStyle = computed(() => { - if (!unref(rootProps).actionWrapperClass) { - return { - 'grid-column': `-2 / -1`, - marginLeft: 'auto', - }; - } - - return {}; -}); - async function handleSubmit(e: Event) { e?.preventDefault(); e?.stopPropagation(); @@ -86,22 +75,59 @@ watch( }, ); +const actionWrapperClass = computed(() => { + const props = unref(rootProps); + const actionLayout = props.actionLayout || 'rowEnd'; + const actionPosition = props.actionPosition || 'right'; + + const cls = [ + 'flex', + 'w-full', + 'items-center', + 'gap-3', + props.compact ? 'pb-2' : 'pb-4', + props.layout === 'vertical' ? 'self-end' : 'self-center', + props.actionWrapperClass, + ]; + + switch (actionLayout) { + case 'newLine': { + cls.push('col-span-full'); + break; + } + case 'rowEnd': { + cls.push('col-[-2/-1]'); + break; + } + // 'inline' 不需要额外类名,保持默认 + } + + switch (actionPosition) { + case 'center': { + cls.push('justify-center'); + break; + } + case 'left': { + cls.push('justify-start'); + break; + } + default: { + // case 'right': 默认右对齐 + cls.push('justify-end'); + break; + } + } + + return cls.join(' '); +}); + defineExpose({ handleReset, handleSubmit, });