feat: add form slot for action area (#4621)

* feat: add form slot for action area

* fix: fixed rename and lint
pull/48/MERGE
CHUZHI 2024-10-14 22:35:01 +08:00 committed by GitHub
parent ea962e75d0
commit 45987fc1e3
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 38 additions and 1 deletions

View File

@ -83,6 +83,9 @@ watch(
" "
:style="queryFormStyle" :style="queryFormStyle"
> >
<!-- 重置按钮前 -->
<slot name="reset-before"></slot>
<component <component
:is="COMPONENT_MAP.DefaultButton" :is="COMPONENT_MAP.DefaultButton"
v-if="resetButtonOptions.show" v-if="resetButtonOptions.show"
@ -94,6 +97,9 @@ watch(
{{ resetButtonOptions.content }} {{ resetButtonOptions.content }}
</component> </component>
<!-- 提交按钮前 -->
<slot name="submit-before"></slot>
<component <component
:is="COMPONENT_MAP.PrimaryButton" :is="COMPONENT_MAP.PrimaryButton"
v-if="submitButtonOptions.show" v-if="submitButtonOptions.show"
@ -104,6 +110,9 @@ watch(
{{ submitButtonOptions.content }} {{ submitButtonOptions.content }}
</component> </component>
<!-- 展开按钮前 -->
<slot name="expand-before"></slot>
<VbenExpandableArrow <VbenExpandableArrow
v-if="rootProps.showCollapseButton" v-if="rootProps.showCollapseButton"
v-model:model-value="collapsed" v-model:model-value="collapsed"
@ -111,5 +120,8 @@ watch(
> >
<span>{{ collapsed ? $t('expand') : $t('collapse') }}</span> <span>{{ collapsed ? $t('expand') : $t('collapse') }}</span>
</VbenExpandableArrow> </VbenExpandableArrow>
<!-- 展开按钮后 -->
<slot name="expand-after"></slot>
</div> </div>
</template> </template>

View File

@ -58,7 +58,20 @@ const handleUpdateCollapsed = (value: boolean) => {
v-if="forward.showDefaultActions" v-if="forward.showDefaultActions"
:model-value="state.collapsed" :model-value="state.collapsed"
@update:model-value="handleUpdateCollapsed" @update:model-value="handleUpdateCollapsed"
/> >
<template #reset-before="resetSlotProps">
<slot name="reset-before" v-bind="resetSlotProps"></slot>
</template>
<template #submit-before="submitSlotProps">
<slot name="submit-before" v-bind="submitSlotProps"></slot>
</template>
<template #expand-before="expandBeforeSlotProps">
<slot name="expand-before" v-bind="expandBeforeSlotProps"></slot>
</template>
<template #expand-after="expandAfterSlotProps">
<slot name="expand-after" v-bind="expandAfterSlotProps"></slot>
</template>
</FormActions>
</slot> </slot>
</template> </template>
</Form> </Form>

View File

@ -272,6 +272,18 @@ onMounted(() => {
v-bind="slotProps" v-bind="slotProps"
></slot> ></slot>
</template> </template>
<template #reset-before="slotProps">
<slot name="reset-before" v-bind="slotProps"></slot>
</template>
<template #submit-before="slotProps">
<slot name="submit-before" v-bind="slotProps"></slot>
</template>
<template #expand-before="slotProps">
<slot name="expand-before" v-bind="slotProps"></slot>
</template>
<template #expand-after="slotProps">
<slot name="expand-after" v-bind="slotProps"></slot>
</template>
</Form> </Form>
</slot> </slot>
<div <div