使用第三方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;
}
}
}
menuActiveText是在 variables.scss样式中定义的两个特殊的颜色