vue点击元素自身之外触发事件指令

1注册指令

Vue.directive('clickoutside', {
    bind(el, binding) {
        function handler(e) {
            if (el.contains(e.target)) {
                return false;
            }
            let isReturn = false
            binding.arg.map(item => {
                if (document.querySelector('#' + item).contains(e.target)) {
                    isReturn = true
                }
            })
            if (isReturn){
                return false
            }
            
            if (binding.expression) {
                binding.value(e);
            }
        }
        el._zClickOutside = handler;
        document.addEventListener('click', handler);
    },
    unbind(el) {
        // 解除事件监听
        document.removeEventListener('click', el._zClickOutside);
        delete el._zClickOutside;
    }
});

2使用指令

<el-button plain type="primary" v-clickoutside:[classList]="closeIconBlock">外部触发</el-button>
                        <el-button id="cal1" plain type="primary">外部不触发1</el-button>
                        <el-button id="cal4" plain type="primary">外部不触发1</el-button>
                        <el-button id="cal2" plain type="primary">外部不触发2</el-button>

data:(){
    return {
        classList: ['cal1','cal2','cal4']
    }
}