【element-ui】element-UI组件中横向菜单栏展开后失去焦点不能自动收回应该如何解决？

Z时代
2024-01-10
分类：技术分享

比如像下面这样的展开后，点击里面的内容但是菜单栏不会自动收回应该怎么解决的，谢谢！

我下方的内容是用router-view包裹的

横向菜单栏部分的代码如下

<template>
  <el-menu class="horizon-menu" default-active="/index" menu-trigger="click" unique-opened mode="horizontal" background-color="#373d41"
    text-color="#fff" router>
    <template v-for="item in permission_routers" v-if="!item.hidden&&item.children">
      <el-menu-item v-if="item.children.length===1 && !item.children[0].children&&!item.alwaysShow" :key="item.children[0].name"
        :index="item.path+item.children[0].path">
        <span v-if="item.children[0].meta&&item.children[0].meta.title">{{generateTitle(item.children[0].meta.title)}}</span>
      </el-menu-item>
      <el-submenu v-else :index="item.name||item.path" :key="item.name">
        <template slot="title">
          <span v-if="item.meta&&item.meta.title">{{generateTitle(item.meta.title)}}</span>
        </template>
        <template v-for="child in item.children" v-if="!child.hidden">
          <el-menu-item :index="item.path+'/'+child.path" :key="child.name">
            <span v-if="child.meta&&child.meta.title">{{generateTitle(child.meta.title)}}</span>
          </el-menu-item>
        </template>
      </el-submenu>
    </template>
  </el-menu></template>