vue项目中点击页面其余部分关闭导航

243 阅读1分钟

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'
		}
	}