diff --git a/packages/vant/docs/markdown/use-event-listener.en-US.md b/packages/vant/docs/markdown/use-event-listener.en-US.md new file mode 100644 index 000000000..b36e84808 --- /dev/null +++ b/packages/vant/docs/markdown/use-event-listener.en-US.md @@ -0,0 +1,66 @@ +# useEventListener + +### Intro + +Attaching an event when the component is `mounted` and `activated`, then removing the event when the component is `unmounted` and `deactivated`. + +## Usage + +### Basic Usage + +```js +import { ref } from 'vue'; +import { useEventListener } from '@vant/use'; + +export default { + setup() { + // attach the resize event to window + useEventListener('resize', () => { + console.log('window resize'); + }); + + // attach the click event to the body element + useEventListener( + 'click', + () => { + console.log('click body'); + }, + { target: document.body } + ); + }, +}; +``` + +## API + +### Type Declarations + +```ts +type Options = { + target?: EventTarget | Ref; + capture?: boolean; + passive?: boolean; +}; + +function useEventListener( + type: string, + listener: EventListener, + options?: Options +): void; +``` + +### Params + +| Name | Description | Type | Default Value | +| -------- | ----------------- | --------------- | ------------- | +| type | Event type | _string_ | - | +| listener | Callback function | _EventListener_ | - | +| options | Options | _Options_ | - | + +### Options + +| Name | Description | Type | Default Value | +| --- | --- | --- | --- | +| target | Target element | _EventTarget \| Ref\_ | `window` | +| capture | Whether to enable capture | _boolean_ | `false` | +| passive | if true, indicates that the listener will never call `preventDefault()` | _boolean_ | `false` | diff --git a/packages/vant/docs/markdown/use-event-listener.zh-CN.md b/packages/vant/docs/markdown/use-event-listener.zh-CN.md index cb6b0e9ce..a8fe6a6df 100644 --- a/packages/vant/docs/markdown/use-event-listener.zh-CN.md +++ b/packages/vant/docs/markdown/use-event-listener.zh-CN.md @@ -32,6 +32,8 @@ export default { }; ``` +## API + ### 类型定义 ```ts @@ -48,15 +50,13 @@ function useEventListener( ): void; ``` -## API - ### 参数 -| 参数 | 说明 | 类型 | 默认值 | -| -------- | ------------------------ | --------------- | ------ | -| type | 监听的事件类型 | _string_ | - | -| listener | 点击外部时触发的回调函数 | _EventListener_ | - | -| options | 可选的配置项 | _Options_ | - | +| 参数 | 说明 | 类型 | 默认值 | +| -------- | -------------- | --------------- | ------ | +| type | 监听的事件类型 | _string_ | - | +| listener | 事件回调函数 | _EventListener_ | - | +| options | 可选的配置项 | _Options_ | - | ### Options diff --git a/packages/vant/vant.config.mjs b/packages/vant/vant.config.mjs index 92a437cf3..231c274ec 100644 --- a/packages/vant/vant.config.mjs +++ b/packages/vant/vant.config.mjs @@ -421,8 +421,8 @@ export default { title: '介绍', }, { - path: 'use-toggle', - title: 'useToggle', + path: 'use-click-away', + title: 'useClickAway', }, { path: 'use-count-down', @@ -432,10 +432,6 @@ export default { path: 'use-custom-field-value', title: 'useCustomFieldValue', }, - { - path: 'use-rect', - title: 'useRect', - }, { path: 'use-event-listener', title: 'useEventListener', @@ -445,20 +441,24 @@ export default { title: 'usePageVisibility', }, { - path: 'use-scroll-parent', - title: 'useScrollParent', - }, - { - path: 'use-window-size', - title: 'useWindowSize', + path: 'use-rect', + title: 'useRect', }, { path: 'use-relation', title: 'useRelation', }, { - path: 'use-click-away', - title: 'useClickAway', + path: 'use-scroll-parent', + title: 'useScrollParent', + }, + { + path: 'use-toggle', + title: 'useToggle', + }, + { + path: 'use-window-size', + title: 'useWindowSize', }, ], }, @@ -835,8 +835,8 @@ export default { title: 'Intro', }, { - path: 'use-toggle', - title: 'useToggle', + path: 'use-click-away', + title: 'useClickAway', }, { path: 'use-count-down', @@ -846,33 +846,33 @@ export default { path: 'use-custom-field-value', title: 'useCustomFieldValue', }, - // { - // path: 'use-rect', - // title: 'useRect', - // }, - // { - // path: 'use-event-listener', - // title: 'useEventListener', - // }, + { + path: 'use-event-listener', + title: 'useEventListener', + }, // { // path: 'use-page-visibility', // title: 'usePageVisibility', // }, // { - // path: 'use-scroll-parent', - // title: 'useScrollParent', - // }, - // { - // path: 'use-window-size', - // title: 'useWindowSize', + // path: 'use-rect', + // title: 'useRect', // }, // { // path: 'use-relation', // title: 'useRelation', // }, // { - // path: 'use-click-away', - // title: 'useClickAway', + // path: 'use-scroll-parent', + // title: 'useScrollParent', + // }, + { + path: 'use-toggle', + title: 'useToggle', + }, + // { + // path: 'use-window-size', + // title: 'useWindowSize', // }, ], },