diff --git a/src/field/index.js b/src/field/index.js index d9c3a2993..31a04aada 100644 --- a/src/field/index.js +++ b/src/field/index.js @@ -443,6 +443,18 @@ export default createComponent({ return this.vanForm[key]; } }, + + genLabel() { + const colon = this.getProp('colon') ? ':' : ''; + + if (this.slots('label')) { + return [this.slots('label'), colon]; + } + + if (this.label) { + return {this.label + colon}; + } + }, }, render() { @@ -453,15 +465,15 @@ export default createComponent({ icon: this.genLeftIcon, }; - if (slots('label')) { - scopedSlots.title = () => slots('label'); + const Label = this.genLabel(); + if (Label) { + scopedSlots.title = () => Label; } return (
diff --git a/src/form/README.md b/src/form/README.md index 17e8739c6..fd87bdc48 100644 --- a/src/form/README.md +++ b/src/form/README.md @@ -409,6 +409,7 @@ export default { | label-align | Field label align, can be set to `center` `right` | *string* | `left` | | input-align | Field input align, can be set to `center` `right` | *string* | `left` | | error-message-align | Error message align, can be set to `center` `right` | *string* | `left` | +| colon | Whether to display `:` after label | *boolean* | *false* | | validate-first | Whether to stop the validation when a rule fails | *boolean* | `false` | ### Events diff --git a/src/form/README.zh-CN.md b/src/form/README.zh-CN.md index d291601be..71e1bed87 100644 --- a/src/form/README.zh-CN.md +++ b/src/form/README.zh-CN.md @@ -437,10 +437,11 @@ export default { | 参数 | 说明 | 类型 | 默认值 | |------|------|------|------| -| label-width | 表单项文本宽度,默认单位为`px` | *number \| string* | `90px` | -| label-align | 表单项文本对齐方式,可选值为 `center` `right` | *string* | `left` | +| label-width | 表单项 label 宽度,默认单位为`px` | *number \| string* | `90px` | +| label-align | 表单项 label 对齐方式,可选值为 `center` `right` | *string* | `left` | | input-align | 输入框对齐方式,可选值为 `center` `right` | *string* | `left` | | error-message-align | 错误提示文案对齐方式,可选值为 `center` `right` | *string* | `left` | +| colon | 是否在 label 后面添加冒号 | *boolean* | *false* | | validate-first | 是否在某一项校验不通过时停止校验 | *boolean* | `false` | > 表单项的 API 参见:[Field 组件](#/zh-CN/field#api) diff --git a/src/form/index.js b/src/form/index.js index 9138364da..304fc9541 100644 --- a/src/form/index.js +++ b/src/form/index.js @@ -4,6 +4,7 @@ const [createComponent, bem] = createNamespace('form'); export default createComponent({ props: { + colon: Boolean, labelWidth: [Number, String], labelAlign: String, inputAlign: String, diff --git a/src/form/test/__snapshots__/props.spec.js.snap b/src/form/test/__snapshots__/props.spec.js.snap index 5a5be4948..d33e3b524 100644 --- a/src/form/test/__snapshots__/props.spec.js.snap +++ b/src/form/test/__snapshots__/props.spec.js.snap @@ -1,5 +1,22 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP +exports[`colon prop 1`] = ` +
+
+
Label:
+
+
+
+
+
+
Custom Label:
+
+
+
+
+
+`; + exports[`error-message-align prop 1`] = `
diff --git a/src/form/test/props.spec.js b/src/form/test/props.spec.js index 7cdcba121..0e56ee28a 100644 --- a/src/form/test/props.spec.js +++ b/src/form/test/props.spec.js @@ -105,6 +105,20 @@ test('validate-first prop', async () => { expect(onSubmit).toHaveBeenCalledWith({ A: 'foo', B: 'foo' }); }); +test('colon prop', () => { + const wrapper = mountForm({ + template: ` + + + + + + + `, + }); + expect(wrapper).toMatchSnapshot(); +}); + test('label-align prop', () => { const wrapper = mountForm({ template: `