Как вы правильно обрабатываете щелчок элемента в vuejs?

Question

Есть ли какое-то правильное решение для обработки элементов, щелкающих снаружи?

Существуют общие решения, такие как Обработка щелчков вне элемента без jquery:

window.onload = function() {

    // For clicks inside the element
    document.getElementById('myElement').onclick = function(e) {
            // Make sure the event doesn't bubble from your element
        if (e) { e.stopPropagation(); } 
        else { window.event.cancelBubble = true; }
            // Place the code for this element here
        alert('this was a click inside');
    };

    // For clicks elsewhere on the page
    document.onclick = function() {
        alert('this was a click outside');
    };
};

Но проблема заключается в том, что почти во всех проектах есть несколько и разные всплывающие окна в разных компонентах, которые я должен обрабатывать по их нажатиям.

как мне обрабатывать клик-аутсайд без использования глобального window.on? (Я думаю, что невозможно поместить все компоненты вне обработчика случая в window.on)

Answer 1

после борьбы с этим и поиска этого, я нашел, как решить эту проблему, используя директиву vuejs без кровотечения:

//main.js
import '@/directives';

......

// directives.js
import Vue from "vue";
Vue.directive('click-outside', {
  bind: function (element, binding, vnode) {
    element.clickOutsideEvent = function (event) {  //  check that click was outside the el and his children
      if (!(element === event.target || element.contains(event.target))) { // and if it did, call method provided in attribute value
        vnode.context[binding.expression](event);
        // binding.value(); run the arg
      }
    };
    document.body.addEventListener('click', element.clickOutsideEvent)
  },
  unbind: function (element) {
    document.body.removeEventListener('click', element.clickOutsideEvent)
  }
});

используйте его везде, где хотите, с помощью директивы v-click-outside, как показано ниже:

//header.vue
 <div class="profileQuickAction col-lg-4 col-md-12" v-click-outside="hidePopUps">
...
</>

вы можете проверить это на