From 7f0615a503103d029716833d26238036416f3fd3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=99=88=E5=98=89=E6=B6=B5?= <chenjiahan@youzan.com>
Date: Thu, 2 May 2019 17:48:51 +0800
Subject: [PATCH] [new feature] Field: add label-class prop

---
 docs/markdown/v2-progress-tracking.md                |  4 ++++
 packages/field/en-US.md                              |  1 +
 packages/field/index.js                              |  3 ++-
 packages/field/test/__snapshots__/index.spec.js.snap |  9 +++++++++
 packages/field/test/index.spec.js                    | 10 ++++++++++
 packages/field/zh-CN.md                              |  3 ++-
 6 files changed, 28 insertions(+), 2 deletions(-)

diff --git a/docs/markdown/v2-progress-tracking.md b/docs/markdown/v2-progress-tracking.md
index e65375a1e..6ca5ac39f 100644
--- a/docs/markdown/v2-progress-tracking.md
+++ b/docs/markdown/v2-progress-tracking.md
@@ -53,6 +53,10 @@
 
 - 新增`Skeleton`骨架屏组件
 
+### Field
+
+- 新增`label-class`属性
+
 ### Popup
 
 - 新增`click`事件
diff --git a/packages/field/en-US.md b/packages/field/en-US.md
index a3c8f10a3..69eb0f50f 100644
--- a/packages/field/en-US.md
+++ b/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` |
diff --git a/packages/field/index.js b/packages/field/index.js
index 89be94df1..f5bafc017 100644
--- a/packages/field/index.js
+++ b/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,
diff --git a/packages/field/test/__snapshots__/index.spec.js.snap b/packages/field/test/__snapshots__/index.spec.js.snap
index 813d0fc81..4940bd6be 100644
--- a/packages/field/test/__snapshots__/index.spec.js.snap
+++ b/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>
diff --git a/packages/field/test/index.spec.js b/packages/field/test/index.spec.js
index bb9965d73..e4b1be6ee 100644
--- a/packages/field/test/index.spec.js
+++ b/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();
+});
diff --git a/packages/field/zh-CN.md b/packages/field/zh-CN.md
index 76cda3d21..def6ede4e 100644
--- a/packages/field/zh-CN.md
+++ b/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 |