diff --git a/packages/field/en-US.md b/packages/field/en-US.md index a3a38841a..228bfc6ea 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-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` | diff --git a/packages/field/index.js b/packages/field/index.js index c43812183..e017fa5f2 100644 --- a/packages/field/index.js +++ b/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, diff --git a/packages/field/test/__snapshots__/index.spec.js.snap b/packages/field/test/__snapshots__/index.spec.js.snap index 98119ae37..7a9c49cd7 100644 --- a/packages/field/test/__snapshots__/index.spec.js.snap +++ b/packages/field/test/__snapshots__/index.spec.js.snap @@ -17,6 +17,24 @@ exports[`clearable 2`] = ` `; +exports[`label-width prop with unit 1`] = ` +
+
Label
+
+
+
+
+`; + +exports[`label-width prop without unit 1`] = ` +
+
Label
+
+
+
+
+`; + exports[`render label slot 1`] = `
Custom Label
diff --git a/packages/field/test/index.spec.js b/packages/field/test/index.spec.js index c340e7f37..073aa83e5 100644 --- a/packages/field/test/index.spec.js +++ b/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(); +}); diff --git a/packages/field/zh-CN.md b/packages/field/zh-CN.md index a6bb6b35e..76cda3d21 100644 --- a/packages/field/zh-CN.md +++ b/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 有效,可传入对象,
如 { maxHeight: 100, minHeight: 50 },单位为 px | `Boolean | Object` | `false` | 1.0.0 |