Vue 3 팁/외부 클릭 감지

이를 위해서는 세 가지가 필요합니다

참고: 옵션 Api 요점 here

1- 다음과 같은 구성 요소 참조:

<template>
  <div
    ref="componentRef"
    class="general-style"
  >
  </div>
</template>

<script setup>
import { ref } from 'vue'

const componentRef = ref()
</script>

2- 다음 컴포저블:

import {onBeforeUnmount, onMounted} from 'vue'

export default function useDetectOutsideClick(component, callback) {
    if (!component) return
    const listener = (event) => {
        if (event.target !== component.value && event.composedPath().includes(component.value)) {
            return
        }
        if (typeof callback === 'function') {
            callback()
        }
    }
    onMounted(() => { window.addEventListener('click', listener) })
    onBeforeUnmount(() => {window.removeEventListener('click', listener)})

    return {listener}
}

3- 구성 요소 내에서 사용하고 참조를 구성 가능한 매개 변수로 보냅니다.

<template>
  <div
    ref="componentRef"
    class="general-style"
  >
  </div>
</template>

<script setup>
import { ref } from 'vue'
import useDetectOutsideClick from '/useDetectOutsideClick'

const componentRef = ref()
const exampleComposableText = ref('hello')

useDetectOutsideClick(componentRef, () => { 
exampleComposableText.value = 'edit hello'
})
</script>

요약: ref를 선언하고 템플릿 요소를 가리키는 ref를 첫 번째 매개변수로 컴포저블에 보냅니다. 컴포저블의 두 번째 매개변수는 클릭 시 실행할 콜백입니다.

해피 코드!