Directive for Handling outside clicks for Vue Components

click-outside.js

function findElement(element, vnode = null) {
    if (vnode) {
      return vnode.context.$refs[element];
    }
    return document.querySelector(`#${element}`);
}

function elementContainsEvent(event, element, vnode = null) {
    const domElement = findElement(element, vnode);
    return domElement && domElement.contains(event.target);
}


export default function(Vue) {
  let handleOutsideClick;
  Vue.directive('click-outside', {
    bind (el, binding, vnode) {
      handleOutsideClick = (e) => {
        e.stopPropagation();
        const { handler, exclude = [], excludeGlobal = [] } = binding.value;
        let clickedOnExcludedElement =
          exclude.some(element => elementContainsEvent(e, element, vnode)) ||
          excludeGlobal.some(element => elementContainsEvent(e, element));


        if (!el.contains(e.target) && !clickedOnExcludedElement) {
          handler.call(vnode.context);
        }

      };
      document.addEventListener('click', handleOutsideClick);
      document.addEventListener('touchstart', handleOutsideClick);
    },

    unbind () {
      document.removeEventListener('click', handleOutsideClick);
      document.removeEventListener('touchstart', handleOutsideClick);
    }
  });
}