Element-Plus 面包屑当前项样式以及处理最后一个元素

Mr.app2025-12-26 9:00

需求:

通过面包屑el-breadcrumb组件实现路由菜单的二次显示,需要当前显示的页面与对应的面包屑菜单联动高亮。

由于该组件给最后一个元素在伪类last-child上设置了样式,所以得对其样式做出调整。

html 复制代码

         <el-breadcrumb separator="/">
            <!-- 首页始终显示 -->
            <el-breadcrumb-item :to="{ path: '/home' }">
              <el-icon><House /></el-icon>
              首页
            </el-breadcrumb-item>

            <!-- 动态面包屑项 -->
            <el-breadcrumb-item
              v-for="item in breadcrumbs"
              :key="item.path"
              :to="{ path: item.path }"
              :class="{ 'current-breadcrumb': item.path === route.path }"
              @click="handleBreadcrumbClick(item)"
            >
              <!-- 菜单图标 -->
              <!-- <el-icon><component :is="route.meta.icon || 'Document'" /></el-icon> -->
              {{ item.title }}
              <el-icon class="breadcrumb-close" @click="removeBreadcrumb(item, $event)">
                <Close />
              </el-icon>
              <!-- 只有非当前页面才显示删除按钮 -->
              <!-- <el-icon
                v-if="item.path !== route.path"
                class="breadcrumb-close"
                @click="removeBreadcrumb(item, $event)"
              >
                <Close />
              </el-icon> -->
            </el-breadcrumb-item>
          </el-breadcrumb>

当前项单独设置类样式:

复制代码

 :class="{ 'current-breadcrumb': item.path === route.path }"

css 复制代码

$breadcrumb-item-color: #409eff;

// 面包屑样式
::v-deep .el-breadcrumb {
  .el-breadcrumb__inner.is-link:hover {
    color: $breadcrumb-item-color;
  }
  /* 自定义当前项样式 */
  .current-breadcrumb .el-breadcrumb__inner {
    color: $breadcrumb-item-color;
    font-weight: bold;
  }

  // 最后一个元素
  .el-breadcrumb__item:last-child .el-breadcrumb__inner {
    color: inherit;
    cursor: pointer;
    font-weight: bold;
    &:hover {
      color: $breadcrumb-item-color;
    }
  }

  .current-breadcrumb:last-child .el-breadcrumb__inner {
    color: $breadcrumb-item-color;
  }
}