blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-04-05 19:41:42 +08:00
Code Issues Projects Releases Wiki Activity

feat(@vant/use): useClickAway support multiple targets (#10948)

Browse Source
This commit is contained in:
neverland 2022-08-21 10:55:18 +08:00 committed by GitHub
parent 1e8187bc37
commit 31ac5faa3a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 17 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
packages/vant-use/src/useClickAway/index.ts
View File

@ -7,7 +7,10 @@ export type UseClickAwayOptions = {
};
export function useClickAway(
target: Element | Ref<Element | undefined>,
target:
| Element
| Ref<Element | undefined>
| Array<Element | Ref<Element | undefined>>,
listener: EventListener,
options: UseClickAwayOptions = {}
) {
@ -18,8 +21,13 @@ export function useClickAway(
const { eventName = 'click' } = options;
const onClick = (event: Event) => {
const element = unref(target);
if (element && !element.contains(event.target as Node)) {
const targets = Array.isArray(target) ? target : [target];
const isClickAway = targets.every((item) => {
const element = unref(item);
return element && !element.contains(event.target as Node);
});
if (isClickAway) {
listener(event);
}
};

2
packages/vant/docs/markdown/use-click-away.en-US.md
View File

@ -74,7 +74,7 @@ function useClickAway(
| Name | Description | Type | Default Value |
| --- | --- | --- | --- |
| target | Target element | _Element \| Ref\<Element>_ | - |
| target | Target element, support multiple elements | _Element \| Ref\<Element> \| Array\<Element \| Ref\<Element>>_ | - |
| listener | Callback function when the outside is clicked | _EventListener_ | - |
| options | Options | _Options_ | `{ eventName: 'click' }` |

10
packages/vant/docs/markdown/use-click-away.zh-CN.md
View File

@ -74,11 +74,11 @@ function useClickAway(
### 参数
| 参数 | 说明 | 类型 | 默认值 |
| -------- | ------------------------ | -------------------------- | ------ |
| target | 绑定事件的元素 | _Element \| Ref\<Element>_ | - |
| listener | 点击外部时触发的回调函数 | _EventListener_ | - |
| options | 可选的配置项 | _Options_ | 见下表 |
| 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| target | 绑定事件的元素，支持传入数组来绑定多个元素 | _Element \| Ref\<Element> \| Array\<Element \| Ref\<Element>>_ | - |
| listener | 点击外部时触发的回调函数 | _EventListener_ | - |
| options | 可选的配置项 | _Options_ | 见下表 |
### Options