ソースを参照

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

* feat: add form slot for action area

* fix: fixed rename and lint
CHUZHI 5 ヶ月 前
コミット
45987fc1e3

+ 12 - 0
packages/@core/ui-kit/form-ui/src/components/form-actions.vue

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

+ 14 - 1
packages/@core/ui-kit/form-ui/src/vben-use-form.vue

@@ -58,7 +58,20 @@ const handleUpdateCollapsed = (value: boolean) => {
           v-if="forward.showDefaultActions"
           :model-value="state.collapsed"
           @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>
     </template>
   </Form>

+ 12 - 0
packages/effects/plugins/src/vxe-table/use-vxe-grid.vue

@@ -272,6 +272,18 @@ onMounted(() => {
                   v-bind="slotProps"
                 ></slot>
               </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>
           </slot>
           <div