feat(Cell): add title-style prop, fix Field label width (#3370)

* fix(Field): title width

* feat(Field): add spacing

* feat(Cell): add titleStyle

* fix(Cell): no observer

Co-authored-by: songweite <songweite@youzan.com>

packages/cell/README.md

@@ -135,6 +135,7 @@
 | required | 是否显示表单必填星号 | _boolean_ | `false` | - |
 | arrow-direction | 箭头方向，可选值为 `left` `up` `down` | _string_ | - | - |
 | use-label-slot | 是否使用 label slot | _boolean_ | `false` | - |
+| title-style | 标题样式 | _string_ | - | 1.4.0 |
 
 ### Cell Event
 

packages/cell/index.ts

@@ -31,6 +31,7 @@ VantComponent({
       type: Boolean,
       value: true,
     },
+    titleStyle: String,
   },
 
   methods: {

packages/cell/index.wxml

@@ -16,7 +16,7 @@
   <slot wx:else name="icon" />
 
   <view
-    style="{{ titleWidth ? 'max-width:' + titleWidth + ';min-width:' + titleWidth : '' }}"
+    style="{{ (titleWidth ? 'max-width:' + titleWidth + ';min-width:' + titleWidth + ';' : '') + titleStyle }}"
     class="van-cell__title title-class"
   >
     <block wx:if="{{ title }}">{{ title }}</block>

packages/common/style/var.less

@@ -235,7 +235,6 @@
 
 // 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-5;

packages/field/index.less

@@ -6,7 +6,6 @@
 
   &__label {
     .theme(color, '@field-label-color');
-    .theme(margin-right, '@field-label-margin-right');
 
     &--disabled {
       .theme(color, '@field-disabled-text-color');

packages/field/index.wxml

@@ -10,6 +10,7 @@
   required="{{ required }}"
   clickable="{{ clickable }}"
   title-width="{{ titleWidth }}"
+  title-style="margin-right: 12px;"
   custom-style="{{ customStyle }}"
   arrow-direction="{{ arrowDirection }}"
   custom-class="van-field"