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']
    }
}