思路很简单,把页面中的其他点击事件阻止一下冒泡,然后点击body的时候正常做你想做的操作就行,超简单
js:
data: function(){
return {
show:false
}
},
mounted () {
document.addEventListener('click', this.handleBodyClick)
},
destroyed () {
document.removeEventListener('click', this.handleBodyClick)
},
methods:{
handleBodyClick: function(){
if (this.show) {
this.show = false;
}
}
toggleShow: function(){
this.show = !this.show
}
}
html:
<div :class="{'show':show}" @click.stop="toggleShow()">
、、、
</div>