vue自定义clickoutside指令 ​

const clickoutsideContext = '@@clickoutsideContext';
export default {
    bind(el, binding, vnode) {
        console.log(el);
        const documentHandler = (e) => {
            if (vnode.context && el !== e.target && !el.contains(e.target)) {
                vnode.context[el[clickoutsideContext].methodName]();
            }
        };
        el[clickoutsideContext] = {
            documentHandler,
            methodName: binding.expression,
            arg: binding.arg || 'click',
        };
        document.addEventListener(el[clickoutsideContext].arg, documentHandler, false);
    },
    update(el, binding) {
        el[clickoutsideContext].methodName = binding.expression;
    },
    unbind(el) {
        document.removeEventListener(
            el[clickoutsideContext].arg,
            el[clickoutsideContext].documentHandler);
    },
    install(Vue) {
        Vue.directive('clickoutside', {
            bind: this.bind,
            unbind: this.unbind,
        });
    },
};

const clickoutsideContext = '@@clickoutsideContext';
export default {
    bind(el, binding, vnode) {
        console.log(el);
        const documentHandler = (e) => {
            if (vnode.context && el !== e.target && !el.contains(e.target)) {
                vnode.context[el[clickoutsideContext].methodName]();
            }
        };
        el[clickoutsideContext] = {
            documentHandler,
            methodName: binding.expression,
            arg: binding.arg || 'click',
        };
        document.addEventListener(el[clickoutsideContext].arg, documentHandler, false);
    },
    update(el, binding) {
        el[clickoutsideContext].methodName = binding.expression;
    },
    unbind(el) {
        document.removeEventListener(
            el[clickoutsideContext].arg,
            el[clickoutsideContext].documentHandler);
    },
    install(Vue) {
        Vue.directive('clickoutside', {
            bind: this.bind,
            unbind: this.unbind,
        });
    },
};

import onClickOutSide from './clickoutside'
Vue.directive('clickoutside',onClickOutSide)

import onClickOutSide from './clickoutside'
Vue.directive('clickoutside',onClickOutSide)