mounted() {
this.$nextTick(function() {
document.addEventListener("click", e => {
this.closeBox(e);
});
});
},
// 销毁document的点击事件
beforeDestroy() {
document.removeEventListener('click', e => {
this.closeBox(e);
});
}
<div class="mu-popover dishTypeCont" v-if="dishTypeTreeVisible">
<div ref="addDemandBox">xxx</div>
</div>
methods:{
closeBox(e){
const addDemandBox = this.$refs.addDemandBox;
if (addDemandBox && !addDemandBox.$el.contains(e.target)) {
this.addDemandDialog = false;
}
}
}
注意:
1.监听需要清除,否则控制台会报错,虽然不影响使用
2.一般判断需要判断需要关闭的元素和开启这个元素的按钮
3.ref替代了jquery和js的dom选择,当不适用vue的时候可以直接使用dom选择器完成以上操作
菜鸟教程:
对于contains方法的使用