vue修改element面包屑样式

活宝小娜2024-01-29 20:29

vue修改element面包屑样式

element面包屑默认后边的是浅颜色的，前边的是深色的，

现在UI设计图要修改成前面是浅色的，后面是深色的

如果直接修改样式会无法区分一级或者二级路由，用一下方法可以实现：

javascript 复制代码

<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

css 复制代码

.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;
  }
}