feat(Form): add colon prop

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 <span>{this.label + colon}</span>;
+      }
+    },
   },
 
   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 (
       <Cell
         icon={this.leftIcon}
         size={this.size}
-        title={this.label}
         center={this.center}
         border={this.border}
         isLink={this.isLink}
@@ -470,13 +482,13 @@ export default createComponent({
         titleStyle={this.labelStyle}
         valueClass={bem('value')}
         titleClass={[bem('label', labelAlign), this.labelClass]}
+        scopedSlots={scopedSlots}
         arrowDirection={this.arrowDirection}
         class={bem({
           error: this.error || this.validateMessage,
           [`label-${labelAlign}`]: labelAlign,
           'min-height': this.type === 'textarea' && !this.autosize,
         })}
-        scopedSlots={scopedSlots}
         onClick={this.onClick}
       >
         <div class={bem('body')}>

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

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)

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,

src/form/test/__snapshots__/props.spec.js.snap

@@ -1,5 +1,22 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`colon prop 1`] = `
+<form class="van-form">
+  <div class="van-cell van-field">
+    <div class="van-cell__title van-field__label"><span>Label:</span></div>
+    <div class="van-cell__value van-field__value">
+      <div class="van-field__body"><input type="text" class="van-field__control"></div>
+    </div>
+  </div>
+  <div class="van-cell van-field">
+    <div class="van-cell__title van-field__label">Custom Label:</div>
+    <div class="van-cell__value van-field__value">
+      <div class="van-field__body"><input type="text" class="van-field__control"></div>
+    </div>
+  </div>
+</form>
+`;
+
 exports[`error-message-align prop 1`] = `
 <form class="van-form">
   <div class="van-cell van-field">

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: `
+      <van-form colon>
+        <van-field label="Label" />
+        <van-field>
+          <template #label>Custom Label</template>
+        </van-field>
+      </van-form>
+    `,
+  });
+  expect(wrapper).toMatchSnapshot();
+});
+
 test('label-align prop', () => {
   const wrapper = mountForm({
     template: `