onClickOutside
要素の外側でのクリックをリッスンします。モーダルやドロップダウンに便利です。
デモ
使用方法
vue
<script setup>
import { onClickOutside } from '@vueuse/core'
import { ref } from 'vue'
const target = ref(null)
onClickOutside(target, event => console.log(event))
</script>
<template>
<div ref="target">
Hello world
</div>
<div>Outside element</div>
</template>この関数は、IE 11、Edge 18 以前ではサポートされていない Event.composedPath() を使用しています。これらのブラウザをターゲットにしている場合は、プロジェクトに このコードスニペット を含めることをお勧めします。
コンポーネントとしての使用方法
この関数は、`@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 { ref } from 'vue'
const modal = ref(false)
function closeModal() {
modal.value = false
}
</script>
<template>
<button @click="modal = true">
Open Modal
</button>
<div v-if="modal" v-on-click-outside="closeModal">
Hello World
</div>
</template>ハンドラーを配列として設定して、命令の設定項目を設定することもできます。
vue
<script setup>
import { vOnClickOutside } from '@vueuse/components'
import { ref } from 'vue'
const modal = ref(false)
const ignoreElRef = ref()
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-outside="onClickOutsideHandler">
Hello World
</div>
</template>型宣言
型宣言を表示
typescript
export interface OnClickOutsideOptions extends ConfigurableWindow {
/**
* List of elements that should not trigger the event.
*/
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
}
export type OnClickOutsideHandler<
T extends {
detectIframe: OnClickOutsideOptions["detectIframe"]
} = {
detectIframe: false
},
> = (
evt: T["detectIframe"] extends true
? PointerEvent | FocusEvent
: PointerEvent,
) => void
/**
* Listen for clicks outside of an element.
*
* @see https://vueuse.dokyumento.jp/onClickOutside
* @param target
* @param handler
* @param options
*/
export declare function onClickOutside<T extends OnClickOutsideOptions>(
target: MaybeElementRef,
handler: OnClickOutsideHandler<{
detectIframe: T["detectIframe"]
}>,
options?: T,
): () => voidソース
貢献者
- Anthony Fu
- sibbng
- Anthony Fu
- wheat
- IlyaL
- Onion-L
- Matej Černý (マテイ・チェルニー)
- 不见月
- Doctorwu
- Rory King
- 糠帅傅
- Chestnut
- vaakian X
- Fiad
- Young
- Gavin
- webfansplz
- Jelf
- JserWang
- Alex Kozack