1.定義指令：
const?clickOutside?=?{
????bind(el,?binding,?vnode)?{
????????function?clickHandler(e)?{
????????????if?(el.contains(e.target))?{?????//?這里判斷點(diǎn)擊的元素是否是本身，是本身屯蹦，則返回
????????????????return?false;
????????????}
????????????if?(binding.expression)?{????//?判斷指令中是否綁定了函數(shù)
????????????????//?如果綁定了函數(shù)?則調(diào)用那個(gè)函數(shù)足画，此處binding.value就是handleClose方法
????????????????binding.value(e);
????????????}
????????}
????????//?給當(dāng)前元素綁定個(gè)私有變量，方便在unbind中可以解除事件監(jiān)聽(tīng)
????????el.__vueClickOutside__?=?clickHandler;
????????document.addEventListener('click',?clickHandler);
????},
????unbind(el,?binding)?{????//?解除事件監(jiān)聽(tīng)
????????document.removeEventListener('click',?el.__vueClickOutside__);
????????delete?el.__vueClickOutside__;
????},
};
2.引入指令：
directives:?{clickOutside},
3.使用指令：
<div v-if="showPop"?v-click-outside="closeDialog"></div>
closeDialog(){
? ? this.showPop = false;
}
