When I click the button on the homepage, I absolutely locate to the upper left corner, and click on other positions on the page to close the menu
But when I click the option on the menu, the menu will also trigger an event to close the menu
<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>
The solution is to set the click event to the outermost div of the menu
intercept(e){
e.stopImmediatePropagation();
},
Use stopImmediatePropagation() to prevent events from triggering to close menu events