feat(Search): add focus method

src/search/README.md

@@ -141,6 +141,14 @@ Use `action` slot to custom right button, `cancel` event will no longer be Emitt
 | clear  | Emitted when the clear icon is clicked    | _event: Event_  |
 | cancel | Emitted when the cancel button is clicked | -               |
 
+### Methods
+
+Use [ref](https://v3.vuejs.org/guide/component-template-refs.html) to get Search instance and call instance methods.
+
+| Name  | Description         | Attribute | Return value |
+| ----- | ------------------- | --------- | ------------ |
+| focus | Trigger input focus | -         | -            |
+
 ### Slots
 
 | Name       | Description                                                 |

src/search/README.zh-CN.md

@@ -157,6 +157,14 @@ export default {
 | clear  | 点击清除按钮后触发   | _event: Event_                 |
 | cancel | 点击取消按钮时触发   | -                              |
 
+### 方法
+
+通过 ref 可以获取到 Search 实例并调用实例方法，详见[组件实例方法](#/zh-CN/advanced-usage#zu-jian-shi-li-fang-fa)。
+
+| 方法名 | 说明           | 参数 | 返回值 |
+| ------ | -------------- | ---- | ------ |
+| focus  | 获取输入框焦点 | -    | -      |
+
 ### Slots
 
 | 名称       | 说明                                                    |

src/search/index.js

@@ -1,6 +1,11 @@
+import { ref } from 'vue';
+
 // Utils
 import { pick, createNamespace, preventDefault } from '../utils';
 
+// Composition
+import { useExpose } from '../composables/use-expose';
+
 // Components
 import Field from '../field';
 
@@ -34,6 +39,8 @@ export default createComponent({
   emits: ['search', 'cancel'],
 
   setup(props, { emit, slots, attrs }) {
+    const filedRef = ref();
+
     const onCancel = () => {
       if (!slots.action) {
         emit('update:modelValue', '');
@@ -75,6 +82,12 @@ export default createComponent({
       }
     };
 
+    const focus = () => {
+      if (filedRef.value) {
+        filedRef.value.focus();
+      }
+    };
+
     const fieldPropNames = [
       'leftIcon',
       'rightIcon',
@@ -94,6 +107,7 @@ export default createComponent({
       return (
         <Field
           v-slots={pick(slots, ['left-icon', 'right-icon'])}
+          ref={filedRef}
           type="search"
           border={false}
           onKeypress={onKeypress}
@@ -102,6 +116,8 @@ export default createComponent({
       );
     };
 
+    useExpose({ focus });
+
     return () => (
       <div
         class={[bem({ 'show-action': props.showAction }), attrs.class]}

types/index.d.ts

@@ -20,6 +20,7 @@ import { Locale } from './locale';
 import { Notify } from './notify';
 import { Picker } from './picker';
 import { Progress } from './progress';
+import { Search } from './search';
 import { Sku } from './sku';
 import { Swipe } from './swipe';
 import { SwipeCell } from './swipe-cell';
@@ -73,7 +74,6 @@ export class Radio extends VanComponent {}
 export class RadioGroup extends VanComponent {}
 export class Rate extends VanComponent {}
 export class Row extends VanComponent {}
-export class Search extends VanComponent {}
 export class ShareSheet extends VanComponent {}
 export class Sidebar extends VanComponent {}
 export class SidebarItem extends VanComponent {}
@@ -113,6 +113,7 @@ export {
   Notify,
   Picker,
   Progress,
+  Search,
   Sku,
   Swipe,
   SwipeCell,

types/search.d.ts

@@ -0,0 +1,5 @@
+import { VanComponent } from './component';
+
+export class Search extends VanComponent {
+  focus(): void;
+}