element-ui NavMenu菜单组件垂直显示时点击其它区域关闭子菜单解决方法

element-ui 2.4.10的NavMenu组件mode为"vertical"，当子菜单展示时，如果点击子菜单以外的任何区域，会把打开的子菜单关闭，这个十分不合理，另外点击父菜单时，只会展开子菜单，更合理的方式是，点击父菜单，在展开子菜单的同时打开父菜单所指向的链接，或者打开第一个子菜单指向的链接。因为项目紧急，等不及官方更改，官方也可能不会更改，所以只有自己动手修改源码了，在此记录一下修改方法。

一，从github下载element源码

git clone https://github.com/ElemeFE/element.git
cd element
npm install

二，打开 packagesmenusrcmenu.vue 和 packagesmenusrcsubmenu.vue

先修改点击父菜单只展开子菜单的问题

在packagesmenusrcmenu.vue文件里转到221行，把openMenu方法前面两行改成如下代码

let openedMenus = this.openedMenus;
        if (openedMenus.indexOf(index) !== -1){
          return;
        }else if (this.router) { 
          const oldActiveIndex = this.activeIndex;
          this.routeToItem( this.items[index], (error) => {
            this.activeIndex = oldActiveIndex;
            if (error) console.error(error);
          });
        }

如下图所示

然后修改点击子菜单以外区域会关闭子菜单的问题

在packagesmenusrcsubmenu.vue文件里，删除第六行的 import Clickoutside from 'element-ui/src/utils/clickoutside';以及第33行的 directives: { Clickoutside }，

然后再删除submenu.vue323行的v-clickoutside={this.close}

非常简单暴力，这当然会展示在横向显示菜单时出问题，不过在我的这个项目里使用不到，所以已经能满足我的需求。

三，执行npm run dist打包发布，打包完成后，把lib文件夹下所有的文件复制到项目里element-ui下替换掉原来的即可