fix(form): fix `suffix` slot style

修复suffix插槽的样式问题

fix(form): fix `suffix` slot style
修复suffix插槽的样式问题
无木
1 parent 0595a72d
Showing 2 changed files with 39 additions and 37 deletions
src/components/Form/src/components/FormAction.vue
src/components/Form/src/components/FormItem.vue
 <template>
   <a-col v-bind="actionColOpt" :style="{ textAlign: 'right' }" v-if="showActionButtonGroup">
-    <FormItem>
-      <slot name="resetBefore"></slot>
-      <Button
-        type="default"
-        class="mr-2"
-        v-bind="getResetBtnOptions"
-        @click="resetAction"
-        v-if="showResetButton"
-      >
-        {{ getResetBtnOptions.text }}
-      </Button>
-      <slot name="submitBefore"></slot>
+    <div style="width: 100%; text-align: right">
+      <FormItem>
+        <slot name="resetBefore"></slot>
+        <Button
+          type="default"
+          class="mr-2"
+          v-bind="getResetBtnOptions"
+          @click="resetAction"
+          v-if="showResetButton"
+        >
+          {{ getResetBtnOptions.text }}
+        </Button>
+        <slot name="submitBefore"></slot>
  
-      <Button
-        type="primary"
-        class="mr-2"
-        v-bind="getSubmitBtnOptions"
-        @click="submitAction"
-        v-if="showSubmitButton"
-      >
-        {{ getSubmitBtnOptions.text }}
-      </Button>
+        <Button
+          type="primary"
+          class="mr-2"
+          v-bind="getSubmitBtnOptions"
+          @click="submitAction"
+          v-if="showSubmitButton"
+        >
+          {{ getSubmitBtnOptions.text }}
+        </Button>
  
-      <slot name="advanceBefore"></slot>
-      <Button
-        type="link"
-        size="small"
-        @click="toggleAdvanced"
-        v-if="showAdvancedButton && !hideAdvanceBtn"
-      >
-        {{ isAdvanced ? t('component.form.putAway') : t('component.form.unfold') }}
-        <BasicArrow class="ml-1" :expand="!isAdvanced" up />
-      </Button>
-      <slot name="advanceAfter"></slot>
-    </FormItem>
+        <slot name="advanceBefore"></slot>
+        <Button
+          type="link"
+          size="small"
+          @click="toggleAdvanced"
+          v-if="showAdvancedButton && !hideAdvanceBtn"
+        >
+          {{ isAdvanced ? t('component.form.putAway') : t('component.form.unfold') }}
+          <BasicArrow class="ml-1" :expand="!isAdvanced" up />
+        </Button>
+        <slot name="advanceAfter"></slot>
+      </FormItem>
+    </div>
   </a-col>
 </template>
 <script lang="ts">
@@ -43,7 +45,7 @@
   import { defineComponent, computed, PropType } from 'vue';
   import { Form, Col } from 'ant-design-vue';
   import { Button, ButtonProps } from '/@/components/Button';
-  import { BasicArrow } from '/@/components/Basic/index';
+  import { BasicArrow } from '/@/components/Basic';
   import { useFormContext } from '../hooks/useFormContext';
   import { useI18n } from '/@/hooks/web/useI18n';
   import { propTypes } from '/@/utils/propTypes';
@@ -326,10 +326,10 @@
             labelCol={labelCol}
             wrapperCol={wrapperCol}
           >
-            <>
-              {getContent()}
+            <div style="display:flex">
+              <div style="flex:1">{getContent()}</div>
               {showSuffix && <span class="suffix">{getSuffix}</span>}
-            </>
+            </div>
           </Form.Item>
         );
       }