feat(Field): add name prop

youzan · Feb 7, 2020 · f3398dc · f3398dc
1 parent 0f13785
commit f3398dc
Show file tree

Hide file tree

Showing 5 changed files with 23 additions and 2 deletions.
diff --git a/src/field/README.md b/src/field/README.md
@@ -214,8 +214,9 @@ Use `input-align` prop to align the input value
 
 | Attribute | Description | Type | Default |
 |------|------|------|------|
-| value | Field value | *number \| string* | - |
+| v-model (value) | Field value | *number \| string* | - |
 | label | Field label | *string* | - |
+| name | Name | *string* | - |
 | type | Input type, can be set to `tel` `digit`<br>`number` `textarea` `password` | *string* | `text` |
 | size | Size，can be set to `large` | *string* | - |
 | maxlength | Max length of value | *number \| string* | - |

diff --git a/src/field/README.zh-CN.md b/src/field/README.zh-CN.md
@@ -233,8 +233,9 @@ export default {
 
 | 参数 | 说明 | 类型 | 默认值 |
 |------|------|------|------|
+| v-model (value) | 当前输入的值 | *number \| string* | - |
 | label | 输入框左侧文本 | *string* | - |
-| value | 当前输入的值 | *number \| string* | - |
+| name | 名称，提交表单的标识符 | *string* | - |
 | type | 输入框类型, 可选值为 `tel` `digit`<br>`number` `textarea` `password` 等 | *string* | `text` |
 | size | 大小，可选值为 `large` | *string* | - |
 | maxlength | 输入的最大字符数 | *number \| string* | - |

diff --git a/src/field/index.js b/src/field/index.js
@@ -17,6 +17,7 @@ export default createComponent({
 
   props: {
     ...cellProps,
+    name: String,
     error: Boolean,
     disabled: Boolean,
     readonly: Boolean,
@@ -237,6 +238,7 @@ export default createComponent({
         },
         attrs: {
           ...this.$attrs,
+          name: this.name,
           disabled: this.disabled,
           readonly: this.readonly,
           placeholder: this.placeholder,

diff --git a/src/field/test/__snapshots__/index.spec.js.snap b/src/field/test/__snapshots__/index.spec.js.snap
@@ -53,6 +53,14 @@ exports[`label-width prop without unit 1`] = `
 </div>
 `;
 
+exports[`name prop 1`] = `
+<div class="van-cell van-field">
+  <div class="van-cell__value van-cell__value--alone">
+    <div class="van-field__body"><input type="text" name="foo" class="van-field__control"></div>
+  </div>
+</div>
+`;
+
 exports[`reach max word-limit 1`] = `
 <div class="van-cell van-field">
   <div class="van-cell__value van-cell__value--alone">

diff --git a/src/field/test/index.spec.js b/src/field/test/index.spec.js
@@ -291,3 +291,12 @@ test('reach max word-limit', () => {
   });
   expect(wrapper).toMatchSnapshot();
 });
+
+test('name prop', () => {
+  const wrapper = mount(Field, {
+    propsData: {
+      name: 'foo',
+    },
+  });
+  expect(wrapper).toMatchSnapshot();
+});