跳到主要内容

onClickOutside

分类
导出大小
1.27 kB
上次更改
上周

监听元素外部的点击。对于模态框或下拉菜单很有用。

演示

用法

vue
<script setup lang="ts">
import { 
onClickOutside
} from '@vueuse/core'
import {
useTemplateRef
} from 'vue'
const
target
=
useTemplateRef
<HTMLElement>('target')
onClickOutside
(
target
,
event
=>
console
.
log
(
event
))
</script> <template> <
div
ref
="
target
">
Hello world </
div
>
<
div
>Outside element</
div
>
</template>

如果你需要更多地控制处理程序的触发,可以使用 controls 选项。

ts
const { 
cancel
,
trigger
} = onClickOutside(
modalRef, (
event
) => {
modal.value = false }, {
controls
: true },
) useEventListener('pointermove', (
e
) => {
cancel
()
// or
trigger
(
e
)
})

如果你想忽略某些元素,可以使用 ignore 选项。将要忽略的元素作为 Refs 数组或 CSS 选择器提供。

ts
const 
ignoreElRef
=
useTemplateRef
<HTMLElement>('ignoreEl')
const
ignoreElSelector
= '.ignore-el'
onClickOutside( target,
event
=>
console
.
log
(
event
),
{
ignore
: [
ignoreElRef
,
ignoreElSelector
] },
)
js
const ignoreElRef = useTemplateRef('ignoreEl')
const ignoreElSelector = '.ignore-el'
onClickOutside(target, (event) => console.log(event), {
  ignore: [ignoreElRef, ignoreElSelector],
})

组件用法

此函数还通过 @vueuse/components 包提供了一个无渲染组件版本。了解更多用法

vue
<template>
  <OnClickOutside 
:options
="{
ignore
: [/* ... */] }" @
trigger
="count++">
<
div
>
Click Outside of Me </
div
>
</OnClickOutside> </template>

指令用法

此函数还通过 @vueuse/components 包提供了一个指令版本。了解更多用法

vue
<script setup lang="ts">
import { 
vOnClickOutside
} from '@vueuse/components'
import {
shallowRef
} from 'vue'
const
modal
=
shallowRef
(false)
function
closeModal
() {
modal
.
value
= false
} </script> <template> <
button
@
click
="
modal
= true">
Open Modal </
button
>
<
div
v-if="
modal
"
v-on-click-outs
ide="
closeModal
">
Hello World </
div
>
</template>

你还可以将处理程序设置为数组,以设置指令的配置项。

vue
<script setup lang="ts">
import { 
vOnClickOutside
} from '@vueuse/components'
import {
shallowRef
,
useTemplateRef
} from 'vue'
const
modal
=
shallowRef
(false)
const
ignoreElRef
=
useTemplateRef
<HTMLElement>('ignoreEl')
const
onClickOutsideHandler
= [
(
ev
) => {
console
.
log
(
ev
)
modal
.
value
= false
}, {
ignore
: [
ignoreElRef
] },
] </script> <template> <
button
@
click
="
modal
= true">
Open Modal </
button
>
<
div
ref
="
ignoreElRef
">
click outside ignore element </
div
>
<
div
v-if="
modal
"
v-on-click-outs
ide="
onClickOutsideHandler
">
Hello World </
div
>
</template>

类型声明

显示类型声明
ts
export interface 
OnClickOutsideOptions
<
Controls
extends boolean = false>
extends ConfigurableWindow { /** * List of elements that should not trigger the event, * provided as Refs or CSS Selectors. */
ignore
?:
MaybeRefOrGetter
<(
MaybeElementRef
| string)[]>
/** * Use capturing phase for internal event listener. * @default true */
capture
?: boolean
/** * Run handler function if focus moves to an iframe. * @default false */
detectIframe
?: boolean
/** * Use controls to cancel/trigger listener. * @default false */
controls
?:
Controls
} export type
OnClickOutsideHandler
<
T
extends
OnClickOutsideOptions
<boolean> =
OnClickOutsideOptions
,
> = (
event
:
| (
T
["detectIframe"] extends true ? FocusEvent : never)
| (
T
["controls"] extends true ? Event : never)
| PointerEvent, ) => void interface OnClickOutsideControlsReturn {
stop
:
Fn
cancel
:
Fn
trigger
: (
event
: Event) => void
} /** * Listen for clicks outside of an element. * * @see https://vueuse.org.cn/onClickOutside * @param target * @param handler * @param options */ export declare function
onClickOutside
<
T
extends
OnClickOutsideOptions
>(
target
:
MaybeComputedElementRef
,
handler
:
OnClickOutsideHandler
<
T
>,
options
?:
T
,
):
Fn
export declare function
onClickOutside
<
T
extends
OnClickOutsideOptions
<true>>(
target
:
MaybeComputedElementRef
,
handler
:
OnClickOutsideHandler
<
T
>,
options
:
T
,
): OnClickOutsideControlsReturn

来源

源代码演示文档

贡献者

Anthony Fu
sibbng
Anthony Fu
Fernando Fernández
IlyaL
wheat
Robin
Rainbow
Vida Xie
IlyaL
SerKo
Melkumyants Danila
vitomir-knime
jiangsongyang
Onion-L
Matej Černý
不见月
Doctorwu
Rory King
糠帅傅
Chestnut
vaakian X
Fiad
Young
Gavin
webfansplz
Jelf
JserWang
Alex Kozack

更新日志

v14.0.0
7133c - feat: 允许 target 的值是一个 getter (#5098)
e5f74 - feat!: 弃用别名导出,转而使用原始函数名称 (#5009)
8c521 - feat(components)!: 重构组件并使其保持一致 (#4912)
v13.6.0
d5812 - fix: 修复重载签名的顺序 (#4839)
v13.2.0
1c60c - fix: 针对 iOS 的变通方案 (#4735)
v12.8.0
7432f - feat(types): 废弃 MaybeRefMaybeRefOrGetter,转而使用 Vue 的原生类型 (#4636)
v12.6.0
ab116 - feat: 添加 controls (#4537)
v12.5.0
c6c6e - feat: 在未使用 useEventListener 的地方使用它 (#4479)
v12.4.0
dd316 - feat: 尽可能在所有地方使用被动事件处理程序 (#4477)
v12.3.0
59f75 - feat(toValue): 废弃 @vueuse/shared 中的 toValue,转而使用 Vue 的原生函数
0a9ed - feat!: 放弃对 Vue 2 的支持,优化打包并清理 (#4349)
v11.3.0
fe322 - feat(OnClickOutside): 支持带有片段的组件 (#4313)
v11.1.0
9e598 - fix: 改进跨浏览器兼容性 (#4185)
aa5e3 - fix: 使 ignore 接受响应式值 (#4211)
v10.6.0
69851 - fix: 调整 shouldListen 处理时机 (#3503)
v10.3.0
9091e - fix: 修复 iOS 中 HTML 元素的外部点击 (#3252)
v10.2.0
2c66e - fix: 确保 Firefox 中 iframe 的焦点被捕获 (#3066)

根据 MIT 许可证发布。