需求: 點(diǎn)擊某元素可以關(guān)閉打開(kāi)彈出框,點(diǎn)擊彈出框外可以關(guān)閉彈出框,點(diǎn)擊框內(nèi)不處理

  // 點(diǎn)擊此元素可以顯示或者隱藏彈出框
<div @click="showInfo" class="z-nodeal">
        ...
</div>

// 彈出框  點(diǎn)擊類(lèi)名為'z-nodeal'之外的元素才會(huì)觸發(fā)指令綁定函數(shù)
<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;
            }
    },
},

// 注冊(cè)自定義指令
 directives: { clickoutside },

// 自定義指令函數(shù)
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) {
        // 解除事件監(jiān)聽(tīng)
        document.removeEventListener('click', el._zClickOutside);
        delete el._zClickOutside;
    }
};