fix(Field): required mark position (#9035)

src/field/Field.tsx

@@ -567,11 +567,13 @@ export default defineComponent({
           center={props.center}
           border={props.border}
           isLink={props.isLink}
-          required={props.required}
           clickable={props.clickable}
           titleStyle={labelStyle.value}
           valueClass={bem('value')}
-          titleClass={[bem('label', labelAlign), props.labelClass]}
+          titleClass={[
+            bem('label', [labelAlign, { required: props.required }]),
+            props.labelClass,
+          ]}
           arrowDirection={props.arrowDirection}
         />
       );

src/field/README.md

@@ -344,3 +344,4 @@ The component provides the following CSS variables, which can be used to customi
 | --van-field-word-limit-font-size | _var(--van-font-size-sm)_ | - |
 | --van-field-word-limit-line-height | _16px_ | - |
 | --van-field-disabled-text-color | _var(--van-gray-5)_ | - |
+| --van-field-required-mark-color | _var(--van-red)_ | - |

src/field/README.zh-CN.md

@@ -363,6 +363,7 @@ export default {
 | --van-field-word-limit-font-size      | _var(--van-font-size-sm)_ | -    |
 | --van-field-word-limit-line-height    | _16px_                    | -    |
 | --van-field-disabled-text-color       | _var(--van-gray-5)_       | -    |
+| --van-field-required-mark-color       | _var(--van-red)_          | -    |
 
 ## 常见问题
 

src/field/index.less

@@ -20,6 +20,7 @@
   --van-field-word-limit-font-size: @field-word-limit-font-size;
   --van-field-word-limit-line-height: @field-word-limit-line-height;
   --van-field-disabled-text-color: @field-disabled-text-color;
+  --van-field-required-mark-color: @field-required-mark-color;
 }
 
 .van-field {
@@ -39,6 +40,14 @@
     &--right {
       text-align: right;
     }
+
+    &--required {
+      &::before {
+        margin-right: 2px;
+        color: var(--van-field-required-mark-color);
+        content: '*';
+      }
+    }
   }
 
   &--disabled {

src/field/test/__snapshots__/demo.spec.ts.snap

@@ -183,8 +183,8 @@ exports[`should render demo and match snapshot 1`] = `
 </div>
 <div>
   <div class="van-cell-group van-cell-group--inset">
-    <div class="van-cell van-cell--required van-field van-field--error">
+    <div class="van-cell van-field van-field--error">
-      <div class="van-cell__title van-field__label">
+      <div class="van-cell__title van-field__label van-field__label--required">
         <span>
           Username
         </span>
@@ -198,8 +198,8 @@ exports[`should render demo and match snapshot 1`] = `
         </div>
       </div>
     </div>
-    <div class="van-cell van-cell--required van-field">
+    <div class="van-cell van-field">
-      <div class="van-cell__title van-field__label">
+      <div class="van-cell__title van-field__label van-field__label--required">
         <span>
           Phone
         </span>

src/field/var.less

@@ -18,3 +18,4 @@
 @field-word-limit-font-size: var(--van-font-size-sm);
 @field-word-limit-line-height: 16px;
 @field-disabled-text-color: var(--van-gray-5);
+@field-required-mark-color: var(--van-red);