Vuejs Click outside of element with exclude elements

Vuejs component that allows you to run an action when you click outside the element area. It will also allow to exclude the elements when clicking on which the click event outside the area should not be triggered.


Thats script:

let handleOutsideClick
Vue.directive('closable', {
    bind(el, binding, vnode) {
        handleOutsideClick = (e) => {
            e.stopPropagation()
            const {
                handler,
                exclude
            } = binding.value
            let clickedOnExcludedEl = false
            if(exclude) {
                exclude.forEach(refName => {
                    if (!clickedOnExcludedEl) {
                        const excludedEl = vnode.context.$refs[refName]
                        clickedOnExcludedEl = excludedEl.contains(e.target)
                    }
                })
            }
            
            if (!el.contains(e.target) && !clickedOnExcludedEl) {
                vnode.context[handler]()
            }
        }
        document.addEventListener('click', handleOutsideClick)
        document.addEventListener('touchstart', handleOutsideClick)
    },

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


And thats how to use:

.cell.filter-cell(v-closable="{exclude: ['openfilterbutton'], handler: 'filterClose'}")
   button(ref="openfilterbutton")