Browse Source

fix: form item style adjustment (#5694)

Netfan 1 week ago
parent
commit
feab6b3b30
1 changed files with 31 additions and 34 deletions
  1. 31 34
      packages/@core/ui-kit/form-ui/src/form-render/form-field.vue

+ 31 - 34
packages/@core/ui-kit/form-ui/src/form-render/form-field.vue

@@ -320,44 +320,41 @@ onUnmounted(() => {
           <VbenRenderContent :content="label" />
         </template>
       </FormLabel>
-      <div class="w-full overflow-hidden">
+      <div class="flex-auto overflow-hidden">
         <div :class="cn('relative flex w-full items-center', wrapperClass)">
-          <div class="flex-auto overflow-hidden p-[2px]">
-            <FormControl :class="cn(controlClass)">
-              <slot
-                v-bind="{
-                  ...slotProps,
-                  ...createComponentProps(slotProps),
-                  disabled: shouldDisabled,
-                  isInValid,
+          <FormControl :class="cn(controlClass)">
+            <slot
+              v-bind="{
+                ...slotProps,
+                ...createComponentProps(slotProps),
+                disabled: shouldDisabled,
+                isInValid,
+              }"
+            >
+              <component
+                :is="FieldComponent"
+                ref="fieldComponentRef"
+                :class="{
+                  'border-destructive focus:border-destructive hover:border-destructive/80 focus:shadow-[0_0_0_2px_rgba(255,38,5,0.06)]':
+                    isInValid,
                 }"
+                v-bind="createComponentProps(slotProps)"
+                :disabled="shouldDisabled"
               >
-                <component
-                  :is="FieldComponent"
-                  ref="fieldComponentRef"
-                  :class="{
-                    'border-destructive focus:border-destructive hover:border-destructive/80 focus:shadow-[0_0_0_2px_rgba(255,38,5,0.06)]':
-                      isInValid,
-                  }"
-                  v-bind="createComponentProps(slotProps)"
-                  :disabled="shouldDisabled"
+                <template
+                  v-for="name in renderContentKey"
+                  :key="name"
+                  #[name]="renderSlotProps"
                 >
-                  <template
-                    v-for="name in renderContentKey"
-                    :key="name"
-                    #[name]="renderSlotProps"
-                  >
-                    <VbenRenderContent
-                      :content="customContentRender[name]"
-                      v-bind="{ ...renderSlotProps, formContext: slotProps }"
-                    />
-                  </template>
-                  <!-- <slot></slot> -->
-                </component>
-              </slot>
-            </FormControl>
-          </div>
-
+                  <VbenRenderContent
+                    :content="customContentRender[name]"
+                    v-bind="{ ...renderSlotProps, formContext: slotProps }"
+                  />
+                </template>
+                <!-- <slot></slot> -->
+              </component>
+            </slot>
+          </FormControl>
           <!-- 自定义后缀 -->
           <div v-if="suffix" class="ml-1">
             <VbenRenderContent :content="suffix" />