index.vue
mounted() {
document.onclick = function() {
document.getElementById("pageMenu").style.display = "none";
};
}
// pageMenu为要隐藏元素的id
menu.vue
html:
<div class="menu-image" @click="expandMenu"></div> //按钮,点击展开导航
<div class="menu" v-show = "showMenu" id="pageMenu">
<ul>
//导航内容
</ul>
</div>
js:
methods: {
clickNav(id){
this.showMenu = !this.showMenu
this.$emit('jumpPage', id)
},
expandMenu(e){
e.stopPropagation() //终止事件在传播过程的捕获、目标处理或起泡阶段进一步传播
document.getElementById('pageMenu').style.display = 'block'
}
}