feat(Search): add left slot (#5771)

src/search/README.md

@@ -146,7 +146,8 @@ Use `action` slot to custom right button, `cancel` event will no longer be trigg
 
 | Name | Description |
 |------|------|
-| label | Custom Search label |
+| left | Custom left side content |
 | action | Custom right button, displayed when `show-action` is `true` |
+| label | Custom Search label |
 | left-icon | Custom left icon |
 | right-icon | Custom right icon |

src/search/README.zh-CN.md

@@ -146,7 +146,8 @@ export default {
 
 | 名称 | 说明 |
 |------|------|
-| label | 自定义搜索框左侧文本 |
+| left | 自定义左侧内容（搜索框外） |
-| action | 自定义搜索框右侧按钮，设置`show-action`属性后展示 |
+| action | 自定义右侧内容（搜索框外），设置`show-action`属性后展示 |
-| left-icon | 自定义输入框左侧图标 |
+| label | 自定义左侧文本（搜索框内） |
-| right-icon | 自定义输入框右侧图标 |
+| left-icon | 自定义左侧图标（搜索框内） |
+| right-icon | 自定义右侧图标（搜索框内） |

src/search/index.tsx

@@ -25,6 +25,7 @@ export type SearchProps = {
 };
 
 export type SearchSlots = DefaultSlots & {
+  left?: ScopedSlot;
   label?: ScopedSlot;
   action?: ScopedSlot;
   'left-icon'?: ScopedSlot;
@@ -99,6 +100,7 @@ function Search(
       style={{ background: props.background }}
       {...inheritData}
     >
+      {slots.left?.()}
       <div class={bem('content', props.shape)}>
         {Label()}
         <Field

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

@@ -30,6 +30,19 @@ exports[`label slot 1`] = `
 </div>
 `;
 
+exports[`left slot 1`] = `
+<div class="van-search">Custom Left Content<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 van-field__value">
+        <div class="van-field__body"><input type="search" class="van-field__control"></div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
 exports[`left-icon prop 1`] = `
 <div class="van-search">
   <div class="van-search__content van-search__content--square">

src/search/test/index.spec.js

@@ -66,9 +66,17 @@ test('search event', () => {
 test('label slot', () => {
   const wrapper = mount(Search, {
     scopedSlots: {
-      label() {
+      label: () => 'Custom Label',
-        return 'Custom Label';
+    },
-      },
+  });
+
+  expect(wrapper).toMatchSnapshot();
+});
+
+test('left slot', () => {
+  const wrapper = mount(Search, {
+    scopedSlots: {
+      left: () => 'Custom Left Content',
     },
   });