[new feature] Field: add label-class prop

docs/markdown/v2-progress-tracking.md

@@ -53,6 +53,10 @@
 
 - 新增`Skeleton`骨架屏组件
 
+### Field
+
+- 新增`label-class`属性
+
 ### Popup
 
 - 新增`click`事件

packages/field/en-US.md

@@ -127,6 +127,7 @@ Field support all native properties of input tag，such as `maxlength`、`placeh
 | is-link | Whether to show link icon | `Boolean` | `false` |
 | error | Whether to show error info | `Boolean` | `false` |
 | error-message | Error message | `String` | `''` |
+| label-class | Label className | `any` | - |
 | label-width | Label width | `String | Number` | `90px` |
 | label-align | Label text align, can be set to `center` `right` | `String` | `left` |
 | input-align | Input text align, can be set to `center` `right` | `String` | `left` |

packages/field/index.js

@@ -17,6 +17,7 @@ export default sfc({
     readonly: Boolean,
     clearable: Boolean,
     labelWidth: [String, Number],
+    labelClass: null,
     labelAlign: String,
     inputAlign: String,
     autosize: [Boolean, Object],
@@ -242,7 +243,7 @@ export default sfc({
         isLink={this.isLink}
         required={this.required}
         titleStyle={this.labelStyle}
-        titleClass={bem('label', labelAlign)}
+        titleClass={[bem('label', labelAlign), this.labelClass]}
         class={bem({
           error: this.error,
           disabled: this.$attrs.disabled,

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

@@ -17,6 +17,15 @@ exports[`clearable 2`] = `
 </div>
 `;
 
+exports[`label-class prop 1`] = `
+<div class="van-cell van-field">
+  <div class="van-cell__title van-field__label custom-label-class"><span>Label</span></div>
+  <div class="van-cell__value">
+    <div class="van-field__body"><input type="text" class="van-field__control"></div>
+  </div>
+</div>
+`;
+
 exports[`label-width prop with unit 1`] = `
 <div class="van-cell van-field">
   <div class="van-cell__title van-field__label" style="width: 10rem;"><span>Label</span></div>

packages/field/test/index.spec.js

@@ -203,3 +203,13 @@ test('label-width prop without unit', () => {
   });
   expect(wrapper).toMatchSnapshot();
 });
+
+test('label-class prop', () => {
+  const wrapper = mount(Field, {
+    propsData: {
+      label: 'Label',
+      labelClass: 'custom-label-class'
+    }
+  });
+  expect(wrapper).toMatchSnapshot();
+});

packages/field/zh-CN.md

@@ -133,7 +133,8 @@ Field 默认支持 Input 标签所有的原生属性，比如 `maxlength`、`pla
 | required | 是否显示表单必填星号 | `Boolean` | `false` | - |
 | is-link | 是否展示右侧箭头并开启点击反馈 | `Boolean` | `false` | 1.1.10 |
 | error | 是否将输入内容标红 | `Boolean` | `false` | - |
-| error-message | 底部错误提示文案，为空时不展示 | `String` | `''` | - |
+| error-message | 底部错误提示文案，为空时不展示 | `String` | `''` | - 
+| label-class | 左侧文本额外类名 | `any` | - | 2.0.0 |
 | label-width | 左侧文本宽度，可指定单位，默认为 px | `String | Number` | `90px` | 1.6.17 |
 | label-align | 左侧文本对齐方式，可选值为 `center` `right` | `String` | `left` | 1.1.10 |
 | input-align | 输入框内容对齐方式，可选值为 `center` `right` | `String` | `left` | 1.1.10 |