feat(Field): add extra slot (#6290)

* feat(Field): add extra slot

* docs: remove form demo style

src/field/README.md

@@ -268,10 +268,11 @@ Use [ref](https://vuejs.org/v2/api/#ref) to get Field instance and call instance
 
 ### Slots
 
-| Name       | Description       |
-| ---------- | ----------------- |
-| label      | Custom label      |
-| input      | Custom input      |
-| left-icon  | Custom left icon  |
-| right-icon | Custom right icon |
-| button     | Insert button     |
+| Name           | Description                 |
+| -------------- | --------------------------- |
+| label          | Custom label                |
+| input          | Custom input                |
+| left-icon      | Custom left icon            |
+| right-icon     | Custom right icon           |
+| button         | Insert button               |
+| extra `v2.8.2` | Custom content on the right |

src/field/README.zh-CN.md

@@ -293,13 +293,14 @@ export default {
 
 ### Slots
 
-| 名称       | 说明                                                       |
-| ---------- | ---------------------------------------------------------- |
-| label      | 自定义输入框标签                                           |
-| input      | 自定义输入框，使用此插槽后，与输入框相关的属性和事件将失效 |
-| left-icon  | 自定义输入框头部图标                                       |
-| right-icon | 自定义输入框尾部图标                                       |
-| button     | 自定义输入框尾部按钮                                       |
+| 名称           | 说明                                                       |
+| -------------- | ---------------------------------------------------------- |
+| label          | 自定义输入框 label 标签                                    |
+| input          | 自定义输入框，使用此插槽后，与输入框相关的属性和事件将失效 |
+| left-icon      | 自定义输入框头部图标                                       |
+| right-icon     | 自定义输入框尾部图标                                       |
+| button         | 自定义输入框尾部按钮                                       |
+| extra `v2.8.2` | 自定义输入框最右侧的额外内容                               |
 
 ## 常见问题
 

src/field/index.js

@@ -550,6 +550,11 @@ export default createComponent({
       scopedSlots.title = () => Label;
     }
 
+    const extra = this.slots('extra');
+    if (extra) {
+      scopedSlots.extra = () => extra;
+    }
+
     return (
       <Cell
         icon={this.leftIcon}

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

@@ -79,6 +79,14 @@ exports[`reach max word-limit 1`] = `
 </div>
 `;
 
+exports[`render extra slot 1`] = `
+<div class="van-cell van-field">
+  <div class="van-cell__value van-cell__value--alone van-field__value">
+    <div class="van-field__body"><input type="text" class="van-field__control"></div>
+  </div>Extra
+</div>
+`;
+
 exports[`render input slot 1`] = `
 <div class="van-cell van-field">
   <div class="van-cell__value van-cell__value--alone van-field__value">

src/field/test/index.spec.js

@@ -203,14 +203,9 @@ test('clearable', () => {
 });
 
 test('render input slot', () => {
-  const wrapper = mount({
-    template: `
-      <field>
-        <template v-slot:input>Custom Input</template>
-      </field>
-    `,
-    components: {
-      Field,
+  const wrapper = mount(Field, {
+    scopedSlots: {
+      input: () => 'Custom Input',
     },
   });
 
@@ -218,14 +213,19 @@ test('render input slot', () => {
 });
 
 test('render label slot', () => {
-  const wrapper = mount({
-    template: `
-      <field label="Default Label">
-        <template v-slot:label>Custom Label</template>
-      </field>
-    `,
-    components: {
-      Field,
+  const wrapper = mount(Field, {
+    scopedSlots: {
+      label: () => 'Custom Label',
+    },
+  });
+
+  expect(wrapper).toMatchSnapshot();
+});
+
+test('render extra slot', () => {
+  const wrapper = mount(Field, {
+    scopedSlots: {
+      extra: () => 'Extra',
     },
   });