feat(Field): update label style (#3357)

packages/common/style/var.less

@@ -234,6 +234,8 @@
 @dialog-has-title-message-padding-top: @padding-sm;
 
 // Field
+@field-label-color: @gray-7;
+@field-label-margin-right: @padding-sm;
 @field-input-text-color: @text-color;
 @field-input-error-text-color: @red;
 @field-input-disabled-text-color: @gray-6;

packages/field/README.md

@@ -206,7 +206,7 @@ Page({
 | clickable | 是否开启点击反馈 | _boolean_ | `false` |
 | required | 是否显示表单必填星号 | _boolean_ | `false` |
 | password | 是否是密码类型 | _boolean_ | `false` |
-| title-width | 标题宽度 | _string_ | `90px` |
+| title-width | 标题宽度 | _string_ | `6.2em` |
 | maxlength | 最大输入长度，设置为 -1 的时候不限制最大长度 | _number_ | `-1` |
 | placeholder | 输入框为空时占位符 | _string_ | - |
 | placeholder-style | 指定 placeholder 的样式 | _string_ | - |

packages/field/index.less

@@ -4,6 +4,11 @@
 .van-field {
   .theme(--cell-icon-size,  '@field-icon-size');
 
+  &__label {
+    .theme(color, '@field-label-color');
+    .theme(margin-right, '@field-label-margin-right');
+  }
+
   &__body {
     display: flex;
     align-items: center;

packages/field/index.ts

@@ -20,16 +20,8 @@ VantComponent({
     leftIcon: String,
     rightIcon: String,
     autosize: [Boolean, Object],
-    readonly: {
-      type: Boolean,
-      observer: 'setShowClear',
-    },
     required: Boolean,
     iconClass: String,
-    clearable: {
-      type: Boolean,
-      observer: 'setShowClear',
-    },
     clickable: Boolean,
     inputAlign: String,
     customStyle: String,
@@ -37,13 +29,21 @@ VantComponent({
     arrowDirection: String,
     showWordLimit: Boolean,
     errorMessageAlign: String,
+    readonly: {
+      type: Boolean,
+      observer: 'setShowClear',
+    },
+    clearable: {
+      type: Boolean,
+      observer: 'setShowClear',
+    },
     border: {
       type: Boolean,
       value: true,
     },
     titleWidth: {
       type: String,
-      value: '90px',
+      value: '6.2em',
     },
   },
 

packages/field/index.wxml

@@ -4,7 +4,6 @@
 <van-cell
   size="{{ size }}"
   icon="{{ leftIcon }}"
-  title="{{ label }}"
   center="{{ center }}"
   border="{{ border }}"
   is-link="{{ isLink }}"
@@ -17,7 +16,10 @@
   title-class="label-class"
 >
   <slot name="left-icon" slot="icon" />
-  <slot name="label" slot="title" />
+  <view wx:if="{{ label }}" class="van-field__label" slot="title">
+    {{ label }}
+  </view>
+  <slot wx:else name="label" slot="title" />
   <view class="{{ utils.bem('field__body', [type]) }}">
     <textarea
       wx:if="{{ type === 'textarea' }}"