1. 常见问题
我们在使用element-ui的面包屑功能的时候,会发现他们没有修改字体颜色的属性或者方法,如果我们的每一项是通过“遍历"的形式显示的化,一条一条添加样式不太明智。
2. 要达到的效果
点击导航,联动面包屑,点击多次导航,只有当前导航"高亮"
,其他导航变暗”
3. 样式修改
/* 不被选中时的颜色 */
.el-breadcrumb ::v-deep .el-breadcrumb__inner {
color: #d9bb95 !important;
font-weight:400 !important;
}
/* 被选中时的颜色 */
.el-breadcrumb__item:last-child ::v-deep .el-breadcrumb__inner {
color: #fc9105 !important;
font-weight:800 !important;
}
注:
注意添加::v-deep
,实际效果就是将原先样式
覆盖