vue---点击空白处隐藏div

需求说明：最近在写移动端，UI设计给出顶部导航设计，点击左边的默认图片，出现菜单栏的div盒子，于是我的代码设计如下：

<div class="left-nav" @click="handleChange">
	<div v-if="!activeStatus" class="init-menu"></div>
	<div v-else class="active-menu">/菜单栏/</div>
</div>

handleChange(){
	this.activeStatus = !this.activeStatus
}

可以看到我是在他们父盒子上添加点击事件去控制菜单栏的显示或者隐藏，在菜单栏里面做了一个关闭的按钮，点击关闭隐藏菜单栏，显示默认图片

项目经理看到效果后提出：在此基础上增加点击空白处也能关闭菜单栏。
好吧

那怎么实现点击空白处关闭菜单栏尼？

1.要保留菜单栏的关闭按钮，所以父盒子 left-nav的点击事件不能取消。
2.要在页面内的空白处，也就是说这个页面的任意位置，所以必须是给document添加点击事件。
3.可以看到层级：document > 父盒子 left-nav 两个都有点击事件。

想实现的效果 就是，父盒子 left-nav 的点击事件控制菜单栏的隐藏或者显示，而doument的点击事件是隐藏菜单栏，在点击父盒子的时候不能触发document的点击事件。

也就是说 点击子元素区域的的时候，不触发父级元素的点击事件，这时候就可以用到@click.stop，是用来阻止事件冒泡

最后的代码呈现：

<div class="left-nav" @click.stop="handleChange">
	<div v-if="!activeStatus" class="init-menu"></div>
	<div v-else class="active-menu">/菜单栏/</div>
</div>

mounted(){
	document.addEventListener('click', this.handleClose)
},
methods:{
	handleClose(){
		this.activeStatus = false
	},
	handleChange(){
		this.activeStatus = !this.activeStatus
	}
}