blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-04-06 03:57:59 +08:00
Code Issues Projects Releases Wiki Activity

docs: translate use-event-listener.md to en-US (#9908)

Browse Source
This commit is contained in:
neverland 2021-11-20 21:43:32 +08:00 committed by GitHub
parent 82c16d69b9
commit 0a96f11bfa
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 105 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

66
packages/vant/docs/markdown/use-event-listener.en-US.md Normal file
View File

@ -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<EventTarget>;
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\<EventTarget>_ | `window` |
| capture | Whether to enable capture | _boolean_ | `false` |
| passive | if true, indicates that the listener will never call `preventDefault()` | _boolean_ | `false` |

14
packages/vant/docs/markdown/use-event-listener.zh-CN.md
View File

@ -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

64
packages/vant/vant.config.mjs
View File

@ -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',
// },
],
},