使用svg图片和设置高亮当前菜单项

484

使用第三方svg

.svg是一种通过代码的方式来展示的图片格式(.png, .gif.....),学习网站:www.runoob.com/svg/svg-tut…

学会在网络上收集.svg图片,在项目中使用

下载

www.iconfont.cn/ 去下载你要用的svg

找到图标后,可以下载或者直接复制代码

在src/icons/svg下,建立一个名为qq.svg的文件(文件名是可以任意取的),并把上一步中复制的代码粘过来。

使用图标

<svg-icon icon-class="qq" />

qq就是上边的.svg的文件名。

设置高亮当前菜单项

某一菜单处于选中状态时,对它高亮显示

当某个菜单处于选中状态时,el-menu自动会有一个特殊的类.is-active,所以我们补充一个css类就可以了。

操作

src\styles\sidebar.scss文件中, 在el-menu下添加一个is-active类,样式如下

.el-menu {
  // 省略其他
  .is-active {
    background-color: $menuText !important;
    span{
      color: $menuActiveText !important;
    }
    .svg-icon{
      color: $menuActiveText !important;
    }
  }
}

menuTextmenuText和menuActiveText是在 variables.scss样式中定义的两个特殊的颜色