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`] = ` +