用过NavMenu组件的同学应该很熟悉，组件在horizontal模式下提供了两种触发方式：hover和click。然而在click模式下，有个弊端：如果页面中引入多个el-menu组件，由于每个el-menu相互独立，展开一个菜单后，再展开其他菜单时，前面展开的菜单并不会自动收起，这在使用时很不方便。那么，怎么来解决click模式下两个el-menu同时展开的问题呢？（注意：这里说的同时展开不是由unique-opened控制的保持一个子菜单展开）

为了方便说明，我们将接受鼠标点击的导航称为menu，点击menu后展开的菜单称为popper。我想到的方案是，通过click展开popper后，在鼠标离开popper时，主动触发el-menu的close方法，使popper收起。但若展开popper后，鼠标未进入popper，而直接再次点击另一个menu，两个组件还是会同时展开。所以要增加第二个触发条件，在鼠标进入menu时，主动触发el-menu的close方法。

为什么是鼠标进入menu，而不是鼠标离开时触发呢？因为popper展开后，鼠标从menu进入popper的过程中，会触发鼠标离开menu的事件，这时如果触发了close方法，鼠标就永远无法进入popper了。

有了这两个主动触发popper收起的条件，就再也不会出现两个el-menu同时展开了。代码如下：

<div>
    <el-menu v-for="(item,index) in menuArr" mode="horizontal" menu-trigger="click" @open="handleOpen" ref="elMenu">
        <el-submenu popper-class="submenu-popper" :index="index">
        ...
        </el-submenu>
    </el-menu>
</div>

export default {
    data(){
        return{
            menuArr:[...],
            indexArr:[]    //记录展开菜单的index，作为close方法的参数
        }
    },
    methods:{
        hadnleOpen(index){
            const _this = this;
            const elMenu = _this.$refs['elMenu'];
            const popper = document.getElementByClassName('submenu-popper');
            _this.indexArr.push(index);
            for(let i=0;i<popper.length;i++){
                //鼠标离开popper时，关闭popper
                popper[i].onmouseleave = function(){
                    _this.closePopper();
                }
            }
            for(let i=0;i<elMenu.length;i++){
                //鼠标进入menu时，关闭popper
                elMenu[i].$el.onmouseenter = function(){
                    _this.closePopper();
                }
            }
        },
        closePopper(){
            const elMenu = this.$refs['elMenu'];
            for(let i=0;i<elMenu.length;i++){
                this.indexArr.forEach(item=>{
                    elMenu[i].close(item)
                })
            }   
        }
    }
}