Vue 3 팁/외부 클릭 감지

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

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

const componentRef = ref()
</script>

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

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