v-click-outside directive

v-click-outside.js

/**
 * v-click-outside directive
 */

import Vue from 'vue'
import $ from 'jquery'

let elements = []

Vue.directive('click-outside', {
    bind: (el, binding) => {
        bindClickOutside(el, binding.value)
    },
    unbind: (el, binding) => {
        unbindClickOutside(el)
    }
})

function bindClickOutside(el, handler) {
    elements.push({ el, handler })
}

function unbindClickOutside(el) {
    $.each(elements, (index, item) => {
        if (item.el === el) {
            elements.splice(index, 1)
            return false
        }
    })
}

$(document).on('click', (e) => {
    elements.forEach(item => {
        let $el = $(item.el)
        if (!$el.is(':animated')
            && $el.is(':visible')
            && $(e.target).closest(item.el).length === 0
        ) {
            item.handler(e)
        }
    })
})