[new feature] Search: add right-icon slot

docs/markdown/changelog.zh-CN.md

@@ -24,6 +24,12 @@
 
 - 新增`close-on-popstate`属性
 
+##### Search
+
+- 新增`left-icon`属性
+- 新增`right-icon`属性
+- 新增`right-icon`插槽
+
 
 ### [v2.0.0-beta.1](https://github.com/youzan/vant/tree/v2.0.0-beta.1)
 

packages/search/en-US.md

@@ -92,6 +92,7 @@ Search support all native events of input tag，such as `focus`、`blur`、`keyp
 
 | Name | Description |
 |------|------|
+| label | Custom Search label |
 | action | Custom right button, displayed when `showAction` is true |
 | left-icon | Custom left icon |
-| label | Custom Search label |
+| right-icon | Custom right icon |

packages/search/index.tsx

@@ -23,6 +23,7 @@ export type SearchSlots = DefaultSlots & {
   label?: ScopedSlot;
   action?: ScopedSlot;
   'left-icon'?: ScopedSlot;
+  'right-icon'?: ScopedSlot;
 };
 
 export type SearchEvents = {
@@ -97,7 +98,10 @@ function Search(
           value={props.value}
           leftIcon={props.leftIcon}
           rightIcon={props.rightIcon}
-          scopedSlots={{ 'left-icon': slots['left-icon'] }}
+          scopedSlots={{
+            'left-icon': slots['left-icon'],
+            'right-icon': slots['right-icon']
+          }}
           {...fieldData}
         />
       </div>

packages/search/test/__snapshots__/index.spec.js.snap

@@ -45,3 +45,19 @@ exports[`right-icon prop 1`] = `
   </div>
 </div>
 `;
+
+exports[`right-icon slot 1`] = `
+<div class="van-search" style="background: rgb(255, 255, 255);">
+  <div class="van-search__content van-search__content--square">
+    <div class="van-cell van-cell--borderless van-field">
+      <div class="van-field__left-icon"><i class="van-icon van-icon-search">
+          <!----></i></div>
+      <div class="van-cell__value van-cell__value--alone">
+        <div class="van-field__body"><input type="search" class="van-field__control">
+          <div class="van-field__right-icon">Custom Right Icon</div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;

packages/search/test/index.spec.js

@@ -1,3 +1,4 @@
+/* eslint-disable object-shorthand */
 import Search from '..';
 import { mount } from '../../../test/utils';
 
@@ -94,3 +95,15 @@ test('right-icon prop', () => {
 
   expect(wrapper).toMatchSnapshot();
 });
+
+test('right-icon slot', () => {
+  const wrapper = mount(Search, {
+    scopedSlots: {
+      'right-icon'() {
+        return 'Custom Right Icon';
+      }
+    }
+  });
+
+  expect(wrapper).toMatchSnapshot();
+});

packages/search/zh-CN.md

@@ -85,6 +85,7 @@ Search 默认支持 Input 标签所有的原生事件，如 `focus`、`blur`、`
 
 | 名称 | 说明 |
 |------|------|
-| action | 自定义搜索框右侧按钮，需要在`showAction`为 true 时才会显示 |
-| left-icon | 自定义输入框头部图标 |
 | label | 自定义搜索框左侧文本 |
+| action | 自定义搜索框右侧按钮，需要在`showAction`为 true 时才会显示 |
+| left-icon | 自定义输入框左侧图标 |
+| right-icon | 自定义输入框右侧图标 |