feat(Field): add colon prop (#6195)

src/field/README.md

@@ -220,6 +220,7 @@ Use `input-align` prop to align the input value
 | border | Whether to show inner border | _boolean_ | `true` |
 | disabled | Whether to disable field | _boolean_ | `false` |
 | readonly | Whether to be readonly | _boolean_ | `false` |
+| colon `v2.7.2` | Whether to display colon after label | _boolean_ | `false` |
 | required | Whether to show required mark | _boolean_ | `false` |
 | clearable | Whether to be clearable | _boolean_ | `false` |
 | clickable | Whether to show click feedback when clicked | _boolean_ | `false` |

src/field/README.zh-CN.md

@@ -245,6 +245,7 @@ export default {
 | border | 是否显示内边框 | _boolean_ | `true` |
 | disabled | 是否禁用输入框 | _boolean_ | `false` |
 | readonly | 是否只读 | _boolean_ | `false` |
+| colon `v2.7.2` | 是否在 label 后面添加冒号 | _boolean_ | `false` |
 | required | 是否显示表单必填星号 | _boolean_ | `false` |
 | clearable | 是否启用清除控件 | _boolean_ | `false` |
 | clickable | 是否开启点击反馈 | _boolean_ | `false` |

src/field/index.js

@@ -58,6 +58,10 @@ export default createComponent({
       type: String,
       default: 'text',
     },
+    colon: {
+      type: Boolean,
+      default: null,
+    },
   },
 
   data() {

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

@@ -26,6 +26,15 @@ exports[`clearable 2`] = `
 </div>
 `;
 
+exports[`colon prop 1`] = `
+<div class="van-cell van-field">
+  <div class="van-cell__title van-field__label"><span>foo:</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>
+`;
+
 exports[`label-class prop 1`] = `
 <div class="van-cell van-field">
   <div class="van-cell__title van-field__label custom-label-class"><span>Label</span></div>

src/field/test/index.spec.js

@@ -314,3 +314,13 @@ test('call focus method before mounted', (done) => {
 test('destroy field', () => {
   mount(Field).destroy();
 });
+
+test('colon prop', () => {
+  const wrapper = mount(Field, {
+    propsData: {
+      label: 'foo',
+      colon: true,
+    },
+  });
+  expect(wrapper).toMatchSnapshot();
+});

src/form/README.md

@@ -429,7 +429,7 @@ export default {
 | 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` |
 | validate-trigger `v2.5.2` | When to validate the form，can be set to `onChange`、`onSubmit` | _string_ | `onBlur` |
-| colon | Whether to display `:` after label | _boolean_ | `false` |
+| colon | Whether to display colon after label | _boolean_ | `false` |
 | validate-first | Whether to stop the validation when a rule fails | _boolean_ | `false` |
 | scroll-to-error `v2.5.2` | Whether to scroll to the error field when validation failed | _boolean_ | `false` |
 | show-error `v2.6.0` | Whether to highlight input when validation failed | _boolean_ | `true` |