onClickOutside

分类

传感器

导出大小

1.27 kB

上次更改

上周

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

演示

源代码演示 (beta)

用法

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 选项。

const { cancel
, trigger
 } = onClickOutside(
  modalRef,
  (event
) => {
    modal.value = false
  },
  { controls
: true },
)

useEventListener('pointermove', (e
) => {
  cancel
()
  // or
  trigger
(e
)
})

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

TypeScript

const ignoreElRef
 = useTemplateRef
<HTMLElement>('ignoreEl')
const ignoreElSelector
 = '.ignore-el'

onClickOutside(
  target,
  event
 => console
.log
(event
),
  { ignore
: [ignoreElRef
, ignoreElSelector
] },
)

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>

类型声明

显示类型声明

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