Как обнаружить внешние клики в Vue

Обнаружение внешних кликов — это обычная вещь, которая требуется почти во всех приложениях, которые мы создаем.

Наличие многократно используемого компонента для обнаружения этого — отличный способ сэкономить время и помочь нам сосредоточиться на том, что мы создаем.

Позвольте мне сначала показать вам код компонента и объяснить, как он работает, ниже. Мы назовем этот компонент DetectOutsideClick.vue.

<template>
  <div ref="root">
    <slot />
  </div>
</template>

<script setup>
import { onMounted, onUnmounted, ref } from 'vue'

const emit = defineEmits(['detect'])
const root = ref(null)

const onClick = (e) => {
  if (e.target === root.value || root.value.contains(e.target)) {
    return
  }
  emit('detect')
}

onMounted(() => {
  document.body.addEventListener('click', onClick)
})

onUnmounted(() => {
  document.body.removeEventListener('click', onClick)
})
</script>
Вход в полноэкранный режим Выход из полноэкранного режима

Вот пример того, как его использовать:

<DetectOutsideClick @detect="onOutsideClick">
  <div class="popup">A popup component</div>
</DetectOutsideClick>
Вход в полноэкранный режим Выход из полноэкранного режима

Как это работает?

Идея заключается в том, чтобы прослушивать все клики на странице. Если щелкнутый элемент не является элементом внутри <DetectOutsideClick> или его дочерних элементов, то это внешний щелчок.

Мы прослушиваем все щелчки на странице с помощью этой функции:

document.body.addEventListener('click', (e) => {})
Вход в полноэкранный режим Выход из полноэкранного режима

А вот как мы проверяем, тот же ли это элемент или его дочерний элемент:

if (e.target === root.value || root.value.contains(e.target))
Войти в полноэкранный режим Выйти из полноэкранного режима

В этом случае мы возвращаемся, потому что это не внешний клик. Но если это внешний щелчок, то мы испускаем событие detect.

Вот и все!

Оцените статью
devanswers.ru
Добавить комментарий