feat(Form): FormItem 支持自定义 content 样式 (#714)

WeBankFinTech · Mar 29, 2024 · 5e64cad · 5e64cad
1 parent f752734
commit 5e64cad
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 4 deletions.
diff --git a/components/form/formItem.vue b/components/form/formItem.vue
@@ -9,7 +9,7 @@
                 {{ label }}
             </slot>
         </span>
-        <div :class="`${prefixCls}-content`">
+        <div :class="`${prefixCls}-content`" :style="contentStyle">
             <slot></slot>
             <transition name="fes-fade">
                 <div v-if="formItemShowMessage" :class="`${prefixCls}-error`">

diff --git a/components/form/interface.ts b/components/form/interface.ts
@@ -4,6 +4,7 @@ import {
     type ToRefs,
     type Ref,
     type ComponentObjectPropsOptions,
+    type CSSProperties,
 } from 'vue';
 import { FORM_LAYOUT, LABEL_POSITION, FORM_ITEM_ALIGN } from './const';
 import type { RuleItem, Rules } from 'async-validator';
@@ -40,12 +41,12 @@ export const formProps = {
         >,
         default: LABEL_POSITION.LEFT,
     },
+    labelWidth: [String, Number] as PropType<string | number>,
+    labelClass: String,
     showMessage: {
         type: Boolean,
         default: true,
     },
-    labelWidth: [String, Number] as PropType<string | number>,
-    labelClass: String,
     disabled: {
         type: Boolean,
         default: false,
@@ -69,6 +70,14 @@ export const formItemProps = {
     label: String,
     labelWidth: [String, Number] as PropType<string | number>,
     labelClass: String,
+    contentStyle: {
+        type: [String, Array, Object] as PropType<
+            string | CSSProperties[] | CSSProperties
+        >,
+        default() {
+            return {};
+        },
+    },
     span: {
         type: Number,
         default: null as number,

diff --git a/docs/.vitepress/components/form/basic.vue b/docs/.vitepress/components/form/basic.vue
@@ -19,7 +19,7 @@
                 <FRadio :value="2">女</FRadio>
             </FRadioGroup>
         </FFormItem>
-        <FFormItem label="这是一段长的表单项描述" align="center">
+        <FFormItem label="这是一段长的表单项描述">
             <FInput placeholder="请输入"></FInput>
         </FFormItem>
         <FFormItem label="年龄范围">
@@ -41,6 +41,15 @@
                 <FCheckbox :value="61 - 65">61 - 65</FCheckbox>
             </FCheckboxGroup>
         </FFormItem>
+        <FFormItem label="上传" :contentStyle="{ display: 'block' }">
+            <FUpload>
+                <template #tip>
+                    <div class="f-upload__tip">
+                        只能上传 jpg/png 等图片文件，且不超过 5KB
+                    </div>
+                </template>
+            </FUpload>
+        </FFormItem>
         <FFormItem label=" ">
             <FButton type="primary">Submit</FButton>
         </FFormItem>