vue实现点击除自身等指定元素外关闭弹出框

需求: 点击某元素可以关闭打开弹出框,点击弹出框外可以关闭弹出框,点击框内不处理

  // 点击此元素可以显示或者隐藏弹出框
<div @click="showInfo" class="z-nodeal">
        ...
</div>

// 弹出框  点击类名为'z-nodeal'之外的元素才会触发指令绑定函数
<div class="boxinfo" v-show="active1">
    <div v-clickoutside:['z-nodeal']='closeIconBlock' >
                        
    </div>
</div>


methods: {
   showInfo() {
            this.active1 = !this.active1;
    },
   closeIconBlock() {
            if (this.active1) {
                this.active1 = false;
            }
    },
},

// 注册自定义指令
 directives: { clickoutside },

// 自定义指令函数
const clickoutside = {
    bind(el, binding) {
        function handler(e) {
            if (el.contains(e.target) || e.target.className.includes(binding.arg)) {
                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;
    }
};