onClickOutside

类别

Sensors

导出体积

893 B

上次更改

2 minutes ago

监听元素外的点击事件。适用于模态框或下拉菜单等场景。

示例

源码

用法

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>外部元素</div>
</template>

此函数使用 Event.composedPath()，不支持 IE 11、Edge 18 及以下版本。如果你的目标是这些浏览器，请在项目中包含此代码片段。

组件用法

vue

<template>
  <OnClickOutside :options="{ ignore: [/* ... */] }" @trigger="count++">
    <div>
      点击我外面
    </div>
  </OnClickOutside>
</template>

指令用法

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">
    打开模态框
  </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">
    打开模态框
  </button>

  <div ref="ignoreElRef">
    点击外部忽略元素
  </div>

  <div v-if="modal" v-on-click-outside="onClickOutsideHandler">
    Hello World
  </div>
</template>

类型声明

typescript

export interface OnClickOutsideOptions extends ConfigurableWindow {
  /**
   * 不应触发事件的元素列表。
   */
  ignore?: MaybeRefOrGetter<(MaybeElementRef | string)[]>
  /**
   * 对内部事件侦听器使用捕获阶段。
   * @default true
   */
  capture?: boolean
  /**
   * 如果焦点移动到iframe，运行处理函数。
   * @default false
   */
  detectIframe?: boolean
}
export type OnClickOutsideHandler<
  T extends {
    detectIframe: OnClickOutsideOptions["detectIframe"]
  } = {
    detectIframe: false
  },
> = (
  evt: T["detectIframe"] extends true
    ? PointerEvent | FocusEvent
    : PointerEvent,
) => void
/**
 * 监听元素外部的点击事件。
 *
 * @see https://vueuse.org/onClickOutside
 * @param target 目标元素
 * @param handler 事件处理器
 * @param options 配置选项
 */
export declare function onClickOutside<T extends OnClickOutsideOptions>(
  target: MaybeElementRef,
  handler: OnClickOutsideHandler<{
    detectIframe: T["detectIframe"]
  }>,
  options?: T,
): () => void