fix(form): 修复右侧星星无法展示的问题 (#3283)

Author: xiaoyatong

src/packages/form/demos/h5/demo2.tsx

@@ -35,6 +35,7 @@ const Demo2 = () => {
       <Form
         divider
         labelPosition="left"
+        starPosition="right"
         onFinish={(values) => submitSucceed(values)}
         onFinishFailed={(values, errors) => submitFailed(errors)}
         footer={

src/packages/form/demos/taro/demo2.tsx

@@ -35,6 +35,7 @@ const Demo2 = () => {
       <Form
         divider
         labelPosition="left"
+        starPosition="right"
         onFinish={(values) => submitSucceed(values)}
         onFinishFailed={(values, errors) => submitFailed(errors)}
         footer={

src/packages/formitem/formitem.scss

@@ -18,14 +18,20 @@
     word-wrap: break-word;
     text-align: $form-item-label-text-align;
     line-height: unset;
-  }
 
-  &-label-required {
-    color: $form-item-required-color;
-    margin-right: $form-item-required-margin-right;
-    display: block;
-    position: absolute;
-    left: -10px;
+    &-left-required {
+      color: $form-item-required-color;
+      margin-right: $form-item-required-margin-right;
+      position: absolute;
+      left: -10px;
+    }
+
+    &-right-required {
+      color: $form-item-required-color;
+      margin-left: $form-item-required-margin-right;
+      position: absolute;
+      right: -10px;
+    }
   }
 
   .nut-form-item-labeltxt {
@@ -136,13 +142,6 @@
   white-space: nowrap;
 }
 
-.nut-form-item-label-left-required {
-  display: block;
-  line-height: 1.5;
-  position: absolute;
-  left: 0.1em;
-}
-
 .nut-form-item-top {
   flex-direction: column;
   align-items: flex-start;

src/packages/formitem/formitem.taro.tsx

@@ -189,15 +189,17 @@ export class FormItem extends React.Component<
 
     const { starPosition } = this.context.formInstance
     const renderStar = (required || requiredInRules) && (
-      <Text className="nut-form-item-label-required required">*</Text>
+      <Text className={`nut-form-item-label-${starPosition}-required required`}>
+        *
+      </Text>
     )
     const renderLabel = (
       <>
         <Text className="nut-form-item-labeltxt">
           {starPosition === 'left' ? renderStar : null}
           {label}
+          {starPosition === 'right' ? renderStar : null}
         </Text>
-        {starPosition === 'right' ? renderStar : null}
       </>
     )
     return (

src/packages/formitem/formitem.tsx

@@ -197,15 +197,17 @@ export class FormItem extends React.Component<
 
     const { starPosition } = this.context.formInstance
     const renderStar = (required || requiredInRules) && (
-      <div className="nut-form-item-label-required required">*</div>
+      <span className={`nut-form-item-label-${starPosition}-required required`}>
+        *
+      </span>
     )
     const renderLabel = (
       <>
         <span className="nut-form-item-labeltxt">
           {starPosition === 'left' ? renderStar : null}
           {label}
+          {starPosition === 'right' ? renderStar : null}
         </span>
-        {starPosition === 'right' ? renderStar : null}
       </>
     )
     return (