Можно ли как-то слушать любое событие вне компонента? Или как по другому закрывать дропдаун?

Question

[wiyod]

Вот есть крохотный компонент

<template>
  <div class="select-container">
    <div class="select-wrapper">
      <div class="select-box" @click="isVisible = !isVisible"> {{ selectedValue }}</div>
      <transition name="select">
        <ul v-show="isVisible">
          <li v-for="selector in selectors"  @click="selectedValue = selector, isVisible = !isVisible">
            {{selector}}
          </li>
        </ul>
      </transition>
    </div>
  </div>

</template>

<script>
export default {
  data () {
    return {
      selectors: [
        'one', 'two', 'three'
      ],
      isVisible: false,
      selectedValue: 'Please select'
    }
  }
}
</script>

spiky-honey.surge.sh

А как закрывать выпадающее меню при лобом другом клике вне этого компонента, на всей остальной странице? Куда вешать хендлер? Или как поступать в таком случае?

Answer 1

[0xD34F]

Сделаем метод, который будет обрабатывать клики по всему документу. Логика такая - если целевой элемент не лежит внутри корневого элемента экземпляра компонента, значит можно закрывать:

onClickOutside(e) {
  if (!this.$el.contains(e.target)) {
    // закрываем дропдаун
  }
},

Назначаем обработчик при создании экземпляра, перед уничтожением снимаем:

created() {
  const { onClickOutside } = this;
  document.addEventListener('click', onClickOutside);
  this.$on('hook:beforeDestroy', () => document.removeEventListener('click', onClickOutside));
},

https://jsfiddle.net/8ugxwf7k/