feat: formItem的required的星号支持从rules中自动判断是否显示(jd-opensource#2637)

yi-boide · Nov 6, 2023 · 367164f · 367164f
1 parent b14edf1
commit 367164f
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 12 deletions.
diff --git a/src/packages/__VUE/form/demo.vue b/src/packages/__VUE/form/demo.vue
@@ -67,19 +67,15 @@
       :model-value="formData"
       :rules="{
         name: [
+          { required: true, message: translate('nameTip') },
           {
             message: '名称两个字以上',
             validator: nameLengthValidator
           }
         ]
       }"
     >
-      <nut-form-item
-        :label="translate('name')"
-        prop="name"
-        required
-        :rules="[{ required: true, message: translate('nameTip') }]"
-      >
+      <nut-form-item :label="translate('name')" prop="name">
         <nut-input
           v-model="formData.name"
           class="nut-input-text"

diff --git a/src/packages/__VUE/formitem/index.taro.vue b/src/packages/__VUE/formitem/index.taro.vue
@@ -8,7 +8,7 @@
       v-if="label || getSlots('label')"
       class="nut-cell__title nut-form-item__label"
       :style="labelStyle"
-      :class="{ required: required }"
+      :class="{ required: isRequired }"
     >
       <slot name="label">{{ label }}</slot>
     </view>
@@ -92,7 +92,19 @@ export default create({
         return { parent };
       }
     };
-    useParent();
+    const { parent: parentObj } = useParent();
+    const isRequired = computed(() => {
+      const rules = parentObj.props?.rules;
+      let formRequired = false;
+      if (Object.keys(rules).length !== 0) {
+        Object.keys(rules).forEach((key) => {
+          if (key === props.prop) {
+            formRequired = rules[key].some((rule: FormItemRule) => rule.required);
+          }
+        });
+      }
+      return props.required || props.rules.some((rule) => rule.required) || formRequired;
+    });
 
     const parent = inject('formErrorTip') as any;
     provide('form', {
@@ -116,7 +128,7 @@ export default create({
       } as CSSProperties;
     });
     const getSlots = (name: string) => slots[name];
-    return { parent, labelStyle, bodyStyle, errorMessageStyle, getSlots };
+    return { parent, labelStyle, bodyStyle, errorMessageStyle, getSlots, isRequired };
   }
 });
 </script>
diff --git a/src/packages/__VUE/formitem/index.vue b/src/packages/__VUE/formitem/index.vue
@@ -8,7 +8,7 @@
       v-if="label || getSlots('label')"
       class="nut-cell__title nut-form-item__label"
       :style="labelStyle"
-      :class="{ required: required }"
+      :class="{ required: isRequired }"
     >
       <slot name="label">{{ label }}</slot>
     </view>
@@ -92,7 +92,19 @@ export default create({
         return { parent };
       }
     };
-    useParent();
+    const { parent: parentObj } = useParent();
+    const isRequired = computed(() => {
+      const rules = parentObj.props?.rules;
+      let formRequired = false;
+      if (Object.keys(rules).length !== 0) {
+        Object.keys(rules).forEach((key) => {
+          if (key === props.prop) {
+            formRequired = rules[key].some((rule: FormItemRule) => rule.required);
+          }
+        });
+      }
+      return props.required || props.rules.some((rule) => rule.required) || formRequired;
+    });
 
     const parent = inject('formErrorTip') as any;
     provide('form', {
@@ -116,7 +128,7 @@ export default create({
       } as CSSProperties;
     });
     const getSlots = (name: string) => slots[name];
-    return { parent, labelStyle, bodyStyle, errorMessageStyle, getSlots };
+    return { parent, labelStyle, bodyStyle, errorMessageStyle, getSlots, isRequired };
   }
 });
 </script>