types(Search): add SearchInstance type (#9181)

src/search/README.md

@@ -160,6 +160,19 @@ Use [ref](https://v3.vuejs.org/guide/component-template-refs.html) to get Search
 | focus | Trigger input focus | -         | -            |
 | blur  | Trigger input blur  | -         | -            |
 
+### Types
+
+Get the type definition of the Search instance through `SearchInstance`.
+
+```ts
+import { ref } from 'vue';
+import type { SearchInstance } from 'vant';
+
+const searchRef = ref<SearchInstance>();
+
+searchRef.value?.focus();
+```
+
 ### Slots
 
 | Name       | Description                                                 |

src/search/README.zh-CN.md

@@ -172,15 +172,28 @@ export default {
 | focus  | 获取输入框焦点 | -    | -      |
 | blur   | 取消输入框焦点 | -    | -      |
 
+### 类型定义
+
+通过 `SearchInstance` 获取 Search 实例的类型定义。
+
+```ts
+import { ref } from 'vue';
+import type { SearchInstance } from 'vant';
+
+const searchRef = ref<SearchInstance>();
+
+searchRef.value?.focus();
+```
+
 ### Slots
 
-| 名称       | 说明                                                    |
+| 名称       | 说明                                                      |
-| ---------- | ------------------------------------------------------- |
+| ---------- | --------------------------------------------------------- |
-| left       | 自定义左侧内容（搜索框外）                              |
+| left       | 自定义左侧内容（搜索框外）                                |
-| action     | 自定义右侧内容（搜索框外），设置`show-action`属性后展示 |
+| action     | 自定义右侧内容（搜索框外），设置 `show-action` 属性后展示 |
-| label      | 自定义左侧文本（搜索框内）                              |
+| label      | 自定义左侧文本（搜索框内）                                |
-| left-icon  | 自定义左侧图标（搜索框内）                              |
+| left-icon  | 自定义左侧图标（搜索框内）                                |
-| right-icon | 自定义右侧图标（搜索框内）                              |
+| right-icon | 自定义右侧图标（搜索框内）                                |
 
 ### 样式变量
 

src/search/Search.tsx

@@ -1,4 +1,4 @@
-import { ref, PropType, defineComponent } from 'vue';
+import { ref, PropType, defineComponent, ExtractPropTypes } from 'vue';
 
 // Utils
 import {
@@ -17,28 +17,33 @@ import { useExpose } from '../composables/use-expose';
 // Components
 import { Field } from '../field';
 
+// Types
+import type { SearchShape } from './types';
+
 const [name, bem, t] = createNamespace('search');
 
-export type SearchShape = 'square' | 'round';
+const props = extend({}, fieldSharedProps, {
+  label: String,
+  clearable: truthProp,
+  actionText: String,
+  background: String,
+  showAction: Boolean,
+  shape: {
+    type: String as PropType<SearchShape>,
+    default: 'square',
+  },
+  leftIcon: {
+    type: String,
+    default: 'search',
+  },
+});
+
+export type SearchProps = ExtractPropTypes<typeof props>;
 
 export default defineComponent({
   name,
 
-  props: extend({}, fieldSharedProps, {
+  props,
-    label: String,
-    clearable: truthProp,
-    actionText: String,
-    background: String,
-    showAction: Boolean,
-    shape: {
-      type: String as PropType<SearchShape>,
-      default: 'square',
-    },
-    leftIcon: {
-      type: String,
-      default: 'search',
-    },
-  }),
 
   emits: ['search', 'cancel', 'update:modelValue'],
 

src/search/index.ts

@@ -5,4 +5,4 @@ const Search = withInstall<typeof _Search>(_Search);
 
 export default Search;
 export { Search };
-export type { SearchShape } from './Search';
+export type { SearchShape, SearchInstance } from './types';

src/search/types.ts

@@ -0,0 +1,11 @@
+import type { ComponentPublicInstance } from 'vue';
+import type { SearchProps } from './Search';
+
+export type SearchShape = 'square' | 'round';
+
+export type SearchExpose = {
+  focus: () => void;
+  blur: () => void;
+};
+
+export type SearchInstance = ComponentPublicInstance<SearchProps, SearchExpose>;