[@vue/cli & element-ui] 关于NavMenu的使用和一些问题

NavMenu为我们提供了一系列非常便捷的网站导航组件，功能齐全，使用简单，基本上可以满足各类需求。但同时，它也存在一些小问题，使其在定制化使用上的表现不尽如人意。这次，我们就来详细说说NavMenu。

1 基本介绍

https://element.eleme.cn/#/zh...

1.1 组件与书写方式

NavMenu 包含的组件有以下四项：
<el-menu>：导航菜单最外层组件
<el-submenu>：子菜单组件
<el-menu-item-group>：菜单分组组件
<el-menu-item>：菜单项组件

NavMenu使用嵌套式的书写方式，与书写html的方式一致，极易上手。

<!--例1-->
<el-menu>
    <el-submenu index="1">
        <template slot="title">子菜单1</template>
        <el-menu-item-group>
            <template slot="title">分组1</template>
            <el-menu-item index="1-1">菜单1</el-menu-item>
            <el-menu-item index="1-2">菜单2</el-menu-item>
        </el-menu-item-group>
    </el-submenu>
</el-menu>

1.2 <el-menu>组件常用属性与方法

一般属性：

mode：定义导航是横向还是纵向，string，取值包括 horizontal / vertical，默认纵向显示导航。

background-color： 导航的背景色，只能使用hex格式。

text-color：菜单文字的颜色，只能使用hex格式。

active-text-color：当前选中的菜单的文字颜色，只能使用hex格式。

default-active：默认选中的菜单，取值为菜单的index。

unique-opened：是否在同时只能有一个子菜单处于展开的样式，boolean。默认为false。

---

数据绑定属性：这些属性最好使用v-bind指令绑定数据，方便动态更改导航状态。

collapse：纵向显示的导航是否处于水平折叠状态（收起状态），boolean，true代表导航水平收起，false代表导航水平展开。

default-openeds：默认展开的子菜单，数组，包含了要默认展开的子菜单的index。

router：是否使用vue-router进行路由，boolean，默认不使用vue-router进行路由（直接写成一般属性也可，但是会报错）。

---

方法：主动调用

open：展开一个子菜单，传参为对应子菜单的index。

close：关闭一个子菜单，传参为对应子菜单的index。

---

事件：监听的子组件事件，使用v-on进行绑定。

select：选中菜单的回调，参数：key：菜单index；keyPath：自上而下的层级关系路径，数组，每一项为子菜单/菜单项的index。比如在例1中，点击菜单1，key则为1-1，keyPath则为['1', '1-1']。

open：子菜单展开的回调，参数同上。

close：子菜单收起的回调，参数同上。

1.3 <el-submenu>组件常用属性

一般属性：

index：唯一标识。

popper-class：子菜单的自定义类名。

show-timeout：子菜单展开动画的持续时间，单位ms。默认值300。

hide-timeout：子菜单关闭动画的持续时间，单位ms。默认值300。

数据绑定属性：

disabled：是否禁用当前子菜单。boolean。默认为false。

1.4 <el-menu-item>组件常用属性

一般属性：

index：唯一标识。

route：使用vue-router进行路由时的路由路径。

数据绑定属性：

disabled：是否禁用当前菜单项。boolean。默认为false。

2 常见问题

2.1 导航背景色的设置

设置导航背景颜色的时候，最好直接使用<el-menu>组件的background-color属性修改，不要去寻找组件生成的对应html元素的class，使用修改class内样式的方式更改背景色，因为NavMenu的背景色是使用行内样式书写在各个元素上的，想要完整修改背景色需要改动所有元素的样式，而且考虑到行内样式优先级最高，修改比较费力，所以不建议这么做，太麻烦。

2.2 子菜单/菜单分组的标题

参照例1，使用title插槽。菜单分组的标题也可直接写在<el-menu-item-group>组件上使用title属性上。

2.3 使用element-ui的icon为菜单增加图标

可以给子菜单/菜单分组的标题、菜单项的文字旁增加icon，让导航看起来更美观。

...
<el-submenu index="1">
    <template slot="title">
        <i class="el-icon-location"></i>
        <span>新建</span>
    </template>
    <el-menu-item index="1-1" >
        <i class="el-icon-location"></i>
        <span>新建户主</span>                    
    </el-menu-item>
...

icon的默认颜色是灰色。设置<el-menu>的text-color也不会改变icon的颜色，但是设置active-text-color后，当菜单项处于激活状态时，icon的颜色也会跟着变化。
如果想要在默认状态下设置icon的颜色，可以在导航最外层设置样式：

[class ^= "el-icon-"]{
    color: #fff;
}

2.4 更改菜单项的选中状态

当菜单项处于相中状态时，element-ui默认只会根据<el-menu>的active-text-color属性修改菜单项的文字颜色。如果想要使用菜单项背景色变化作为菜单项的选中状态，则需要设置样式：

.el-menu-item.is-active{
    /*因为菜单项的背景色是直接写在元素上的行内样式，需要添加!important提高样式的优先级，否则会被覆盖*/
    background-color: #004111 !important;
 }

也可以通过其它方式进行修改，如通过监听<el-menu>的 select 事件进行手动修改。

2.5 纵向导航的收起/展开——动画故障

如果导航的收起/展开动画无法正常展示，通常是由于导航整体的宽度未设置而引起。
设置样式：

/*el-menu组件上设置的class*/
.el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 200px;
}

2.6 纵向导航的收起/展开——开关按钮

经常，为了维持导航菜单整体结构，我们希望展开/收起按钮能够作为导航的一个菜单项展示在导航中。如图：

这里我们使用一个 <el-menu-item> 组件作为收起/展开按钮使用。通过监听组件的click事件，修改绑定在组件 <el-menu> 上的collapse的值，控制导航的收起与展开。

需要注意，如果这么做，则这里不能给按钮设置 index 属性，因为使用vue-router进行路由的时候，<el-menu-item> 组件如果没有设置 route 属性，则会以 index 作为path进行路由。

2.7 纵向导航的收起/展开——容器宽度

如果需要让导航拥有收起/展开的状态，记得给 <el-menu> 组件的容器设置宽度为auto，否则导航收起后会在导航一侧产生留白，不太美观。