diff --git a/src/search/README.md b/src/search/README.md index d20e011a2..e3bb949f4 100644 --- a/src/search/README.md +++ b/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 | diff --git a/src/search/README.zh-CN.md b/src/search/README.zh-CN.md index c6cee6b04..63414ddff 100644 --- a/src/search/README.zh-CN.md +++ b/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 | 名称 | 说明 | diff --git a/src/search/index.js b/src/search/index.js index 2631bc937..62d3a667d 100644 --- a/src/search/index.js +++ b/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]} diff --git a/types/index.d.ts b/types/index.d.ts index 4a41ea3ea..06270d551 100644 --- a/types/index.d.ts +++ b/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, diff --git a/types/search.d.ts b/types/search.d.ts new file mode 100644 index 000000000..fb20355ab --- /dev/null +++ b/types/search.d.ts @@ -0,0 +1,5 @@ +import { VanComponent } from './component'; + +export class Search extends VanComponent { + focus(): void; +}