onClickOutside

Category

Sensors

Export Size

1.03 kB

Last Changed

3 hours ago

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

Demo

source

用法

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

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

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

组件用法

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

指令用法

<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>

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

<script setup>
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>

Type Declarations

Show Type Declarations

export interface OnClickOutsideOptions<Controls extends boolean = false>
  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
  /**
   * Use controls to cancel/trigger listener.
   * @default false
   */
  controls?: Controls
}
export type OnClickOutsideHandler<
  T extends {
    detectIframe: OnClickOutsideOptions["detectIframe"]
    controls: boolean
  } = {
    detectIframe: false
    controls: false
  },
> = (
  event: T["controls"] extends true
    ?
        | Event
        | (T["detectIframe"] extends true
            ? PointerEvent | FocusEvent
            : PointerEvent)
    : T["detectIframe"] extends true
      ? PointerEvent | FocusEvent
      : PointerEvent,
) => void
/**
 * Listen for clicks outside of an element.
 *
 * @see https://vueuse.org/onClickOutside
 * @param target
 * @param handler
 * @param options
 */
export declare function onClickOutside(
  target: MaybeElementRef,
  handler: OnClickOutsideHandler<{
    detectIframe: OnClickOutsideOptions["detectIframe"]
    controls: true
  }>,
  options: OnClickOutsideOptions<true>,
): {
  stop: Fn
  cancel: Fn
  trigger: (event: Event) => void
}
export declare function onClickOutside(
  target: MaybeElementRef,
  handler: OnClickOutsideHandler<{
    detectIframe: OnClickOutsideOptions["detectIframe"]
    controls: false
  }>,
  options?: OnClickOutsideOptions<false>,
): Fn

Source

Source • Demo • Docs

Contributors

jorshen

Changelog

No recent changes