fix(Field): icon position when label align is top (#11112)

packages/vant/src/field/Field.tsx

@@ -589,16 +589,18 @@ export default defineComponent({
       const Label = renderLabel();
       const LeftIcon = renderLeftIcon();
 
+      const renderTitle = () =>
+        labelAlign === 'top' ? [LeftIcon, Label] : Label;
+
       return (
         <Cell
           v-slots={{
-            icon: LeftIcon ? () => LeftIcon : null,
+            icon: LeftIcon && labelAlign !== 'top' ? () => LeftIcon : null,
-            title: Label ? () => Label : null,
+            title: Label || labelAlign === 'top' ? renderTitle : null,
             value: renderFieldBody,
             extra: slots.extra,
           }}
           size={props.size}
-          icon={props.leftIcon}
           class={bem({
             error: showError.value,
             disabled,

packages/vant/src/field/index.less

@@ -41,6 +41,7 @@
     }
 
     &--top {
+      display: flex;
       width: 100%;
       text-align: left;
     }

packages/vant/src/field/test/__snapshots__/index.spec.js.snap

@@ -47,6 +47,31 @@ exports[`should render label slot correctly 1`] = `
 </div>
 `;
 
+exports[`should render left icon inside label when label-align is top 1`] = `
+<div class="van-cell van-field van-field--label-top">
+  <div class="van-cell__title van-field__label van-field__label--top">
+    <div class="van-field__left-icon">
+      <i class="van-badge__wrapper van-icon van-icon-success">
+      </i>
+    </div>
+    <label id="van-field-label"
+           for="van-field-input"
+    >
+      Label
+    </label>
+  </div>
+  <div class="van-cell__value van-field__value">
+    <div class="van-field__body">
+      <input type="text"
+             id="van-field-input"
+             class="van-field__control"
+             aria-labelledby="van-field-label"
+      >
+    </div>
+  </div>
+</div>
+`;
+
 exports[`should render textarea when type is textarea 1`] = `
 <div class="van-cell van-field">
   <div class="van-cell__value van-field__value">

packages/vant/src/field/test/index.spec.js

@@ -509,3 +509,14 @@ test('should render word limit with emoji correctly', () => {
   });
   expect(wrapper.find('.van-field__word-limit').html()).toMatchSnapshot();
 });
+
+test('should render left icon inside label when label-align is top', () => {
+  const wrapper = mount(Field, {
+    props: {
+      label: 'Label',
+      labelAlign: 'top',
+      leftIcon: 'success',
+    },
+  });
+  expect(wrapper.html()).toMatchSnapshot();
+});