Обнаружить щелчок вне элемента в nuxt

Question

У меня есть текстовый проект. Мне нужно написать директиву click-outside, с помощью которой я могу обнаружить внешние щелчки элементов, чтобы закрыть их. Как я могу это реализовать?

Answer 1

Ответ - создать файл директив. js в ваших документах и ​​зарегистрировать его в файле config.nuxt. js. Содержимое файла директив. js выглядит следующим образом:

import Vue from 'vue';

Vue.directive('click-outside', {
  bind: function (el, binding, vnode) {
    el.clickOutsideEvent = function (event) {
      // here I check that click was outside the el and his childrens
      if (!(el == event.target || el.contains(event.target))) {
      // and if it did, call method provided in attribute value
        vnode.context[binding.expression](event);
      }
    };
    document.body.addEventListener('click', el.clickOutsideEvent)
  },
  unbind: function (el) {
    document.body.removeEventListener('click', el.clickOutsideEvent)
  },
});

Затем вы можете использовать его на любом элементе, который хотите, и выполнять свою функцию. Пример:

<div v-click-outside="closeDropdown"></div>

Answer 2

Это распространенная проблема JS, вы можете попытаться решить ее следующим образом: { ссылка }

Например, вы можете зарегистрировать обработчик в hook () жизненного цикла mount ().