[new feature] Field: add label-width prop (#3235)

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-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` |
 | error-message-align | Error message text align, can be set to `center` `right` | `String` | `left` |

packages/field/index.js

@@ -3,6 +3,7 @@ import Cell from '../cell';
 import { cellProps } from '../cell/shared';
 import { use, isObj, isDef, isIOS } from '../utils';
 import { getRootScrollTop } from '../utils/scroll';
+import { isNumber } from '../utils/validate/number';
 
 const [sfc, bem] = use('field');
 
@@ -16,6 +17,7 @@ export default sfc({
     rightIcon: String,
     readonly: Boolean,
     clearable: Boolean,
+    labelWidth: [String, Number],
     labelAlign: String,
     inputAlign: String,
     onIconClick: Function,
@@ -60,6 +62,17 @@ export default sfc({
         focus: this.onFocus,
         blur: this.onBlur
       };
+    },
+
+    labelStyle() {
+      const { labelWidth } = this;
+      if (labelWidth) {
+        const width = isNumber(String(labelWidth)) ? `${labelWidth}px` : labelWidth;
+        return {
+          maxWidth: width,
+          minWidth: width
+        };
+      }
     }
   },
 
@@ -237,6 +250,7 @@ export default sfc({
         border={this.border}
         isLink={this.isLink}
         required={this.required}
+        titleStyle={this.labelStyle}
         titleClass={bem('label', labelAlign)}
         class={bem({
           error: this.error,

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

@@ -17,6 +17,24 @@ exports[`clearable 2`] = `
 </div>
 `;
 
+exports[`label-width prop with unit 1`] = `
+<div class="van-cell van-field">
+  <div class="van-cell__title van-field__label" style="max-width: 10rem; min-width: 10rem;"><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 without unit 1`] = `
+<div class="van-cell van-field">
+  <div class="van-cell__title van-field__label" style="max-width: 100px; min-width: 100px;"><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[`render label slot 1`] = `
 <div class="van-cell van-field">
   <div class="van-cell__title van-field__label">Custom Label</div>

packages/field/test/index.spec.js

@@ -196,3 +196,23 @@ test('size prop', () => {
   });
   expect(wrapper).toMatchSnapshot();
 });
+
+test('label-width prop with unit', () => {
+  const wrapper = mount(Field, {
+    propsData: {
+      label: 'Label',
+      labelWidth: '10rem'
+    }
+  });
+  expect(wrapper).toMatchSnapshot();
+});
+
+test('label-width prop without unit', () => {
+  const wrapper = mount(Field, {
+    propsData: {
+      label: 'Label',
+      labelWidth: 100
+    }
+  });
+  expect(wrapper).toMatchSnapshot();
+});

packages/field/zh-CN.md

@@ -134,7 +134,8 @@ Field 默认支持 Input 标签所有的原生属性，比如 `maxlength`、`pla
 | is-link | 是否展示右侧箭头并开启点击反馈 | `Boolean` | `false` | 1.1.10 |
 | error | 是否将输入内容标红 | `Boolean` | `false` | - |
 | error-message | 底部错误提示文案，为空时不展示 | `String` | `''` | - |
-| label-align | 文本对齐方式，可选值为 `center` `right` | `String` | `left` | 1.1.10 |
+| 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 |
 | error-message-align | 错误提示文案对齐方式，可选值为 `center` `right` | `String` | `left` | 1.6.11 |
 | autosize | 自适应内容高度，只对 textarea 有效，可传入对象,<br>如 { maxHeight: 100, minHeight: 50 }，单位为 px | `Boolean | Object` | `false` | 1.0.0 |