onClickOutside
监听元素外的点击事件。适用于模态框或下拉菜单等场景。
示例
用法
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>外部元素</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],
})组件用法
vue
<template>
<OnClickOutside :options="{ ignore: [/* ... */] }" @trigger="count++">
<div>
点击我外面
</div>
</OnClickOutside>
</template>指令用法
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">
打开模态框
</button>
<div v-if="modal" v-on-click-outside="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">
打开模态框
</button>
<div ref="ignoreElRef">
点击外部忽略元素
</div>
<div v-if="modal" v-on-click-outside="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)[]>
/**
* 对内部事件侦听器使用捕获阶段。
* @default true
*/
capture?: boolean
/**
* 如果焦点移动到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
}
/**
* 监听元素外部的点击事件。
*
* @see https://vueuse.org/onClickOutside
* @param target 目标元素
* @param handler 事件处理器
* @param options 配置选项
*/
export declare function onClickOutside<T extends OnClickOutsideOptions>(
target: MaybeElementRef,
handler: OnClickOutsideHandler<T>,
options?: T,
): Fn
export declare function onClickOutside<T extends OnClickOutsideOptions<true>>(
target: MaybeElementRef,
handler: OnClickOutsideHandler<T>,
options: T,
): OnClickOutsideControlsReturn源码
贡献者
Anthony Fu
一纸忘忧
sibbng
Anthony Fu
Fernando Fernández
IlyaL
wheat
Robin
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