vue修改element面包屑样式

最新推荐文章于 2024-07-22 08:55:10 发布

活宝小娜

最新推荐文章于 2024-07-22 08:55:10 发布

阅读量1k

点赞数 11

分类专栏： vue 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/qq_44401371/article/details/135818641

版权

vue 专栏收录该内容

16 篇文章 1 订阅

订阅专栏

本文介绍了如何在Vue项目中，针对ElementUI的面包屑组件修改样式，通过添加类名区分一级和二级路由，利用SCSS实现颜色反转，以满足UI设计需求。

摘要由CSDN通过智能技术生成

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