vue修改element面包屑样式
element面包屑默认后边的是浅颜色的,前边的是深色的,
现在UI设计图要修改成前面是浅色的,后面是深色的
如果直接修改样式会无法区分一级或者二级路由,用一下方法可以实现:
<el-breadcrumb separator="/">
<el-breadcrumb-item
v-for="(item, index) in breadList"
:key="index"
:to="{ path: item.path }"
:class="index==0&&breadList.length>1?'first_route':'two_route'"
>
{{ (item.meta.title != undefined) && item.path !== '/home' ? item.meta.title : null }}
</el-breadcrumb-item>
</el-breadcrumb>
这样就会给一级路由加上了first_route类名,给二级路由加上了two_route的类名,然后定义样式:
我用的是scss
.el-bread-two{
::v-deep .el-breadcrumb__inner{
font-weight: 500 !important;
color: #21212B !important;
}
}
.el-bread-one{
::v-deep .el-breadcrumb__inner{
font-weight: 400;
color: #797979;
}
::v-deep .el-breadcrumb__inner.is-link:hover{
color: #797979;
}
}