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);
          });
        }  

如下图所示
element-ui NavMenu菜单组件垂直显示时点击其它区域关闭子菜单解决方法_第1张图片

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

在packagesmenusrcsubmenu.vue文件里,删除第六行的 import Clickoutside from 'element-ui/src/utils/clickoutside';以及第33行的 directives: { Clickoutside },
element-ui NavMenu菜单组件垂直显示时点击其它区域关闭子菜单解决方法_第2张图片

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

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

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

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

你可能感兴趣的:(element-ui NavMenu菜单组件垂直显示时点击其它区域关闭子菜单解决方法)