NavMenu 阻止事件冒泡
Posted 熬夜的小青年
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了NavMenu 阻止事件冒泡相关的知识,希望对你有一定的参考价值。
当我点击首页的按钮时绝对定位到左上角,点击页面其他位置是关闭菜单
但当我点击了菜单上的选项时,菜单也会触发到关闭菜单的事件
<template>
<!--在此处添加渲染的内容-->
<div @click="intercept($event)">
<el-menu
default-active="2"
class="el-menu-vertical-demo"
@open="handleOpen"
@close="handleClose"
@select="handleSelect"
:unique-opened="true"
menu-trigger="click"
background-color="#22262d"
text-color="#cccccc"
active-text-color="#ffffff">
<el-submenu :index="item.id" v-for="(item,index,key) in navList" :key="key">
<template slot="title" v-if="index!=0||index!=3">
<span>item.firstLevelTitle</span>
</template>
<el-menu-item :index="nextitem.name" v-for="(nextitem,nextindex,nextkey) in item.nextLevel"
:key="nextkey">nextitem.title
</el-menu-item>
</el-submenu>
</el-menu>
</div>
</template>
解决方法是给菜单最外层div设置点击事件
intercept(e)
e.stopImmediatePropagation();
,
使用stopImmediatePropagation()阻止事件触发到关闭菜单的事件
以上是关于NavMenu 阻止事件冒泡的主要内容,如果未能解决你的问题,请参考以下文章