下载运行项目
首先把vue-element-admin下载到本地,这里是在基础模板上开发的,直接下载基础模板代码
npm install 下载相关依赖
npm run dev 运行项目
Svg Icon 图标
官网有提到,svg图标是一个全局 Svg Icon 图标组件。默认在 @/icons 中注册到全局中,可以在项目中任意地方使用。所以图标均可在 @/icons/svg。可自行添加或者删除图标,所有图标都会被自动导入,无需手动操作。
改变svg图标颜色
svg-icon 默认会读取其父级的 color ,因为设置了fill: currentColor属性;
1.你可以改变父级的color,svg与父级的color一样
2.或者直接改变fill的颜色即可。svg就是你改变的fill颜色
侧边栏图标
在view下创建文件sysIcon,sysIcon下创建文件test和test2,在router/idnex.js添加该菜单:
{
path: '/sysIcon',
component: Layout,
redirect: '/sysIcon/test',
name: 'sysIcon',
meta: {
title: '系统图标',
icon: 'svg-icon'
},
children: [
{
path: 'test',
component: () => import('@/views/sysIcon/test/index'), // Parent router-view
name: 'test',
meta: { title: 'svg图标' },
},
{
path: 'test2',
component: () => import('@/views/sysIcon/test2/index'), // Parent router-view
name: 'test2',
meta: { title: '普通图标' },
},
]
},
title=系统图标是一级菜单名称,icon=svg-icon是该一级菜单对应的图标。可以看到添加到侧边栏成功:
此时我们的一级菜单还没显示对应图标,我们需要把svg-icon添加到src/icons/svg路径下,打开Adobe XD,选中UI提供的图标-导出-选择svg,这个时候记得选择轮廓话描边,如下:
注意:如果不选择轮廓化描边,最后一步不能成功。
此时我们的侧边栏已经显示出对应的图标了,但是会发现颜色不会跟随着文字发生变化(仔细看,没有和文字一样高亮白)
最后一步:找到这个svg,全局搜索fill,把这个属性去掉。正是因为这个fill写死了color样式,所以svg图标不能够根据父级color颜色变化而变化
我们的侧边栏图标就已经可以跟随父级的color颜色变化了(仔细看,真的高亮白色了)。
PS
在vue-element-admin上开发的时候,如果设置修改了sidebar-logo-container的高度
.sidebar-logo-container {
width: 100%;
height: 90px;
}
在侧边栏的菜单滑动样式里就要修改减去相同的高度,如果不减,侧边栏过多的时候,或者展开太长的时候,会隐藏掉底部的菜单内容,无法显示完全。