Breadcrumb 面包屑 ​

显示当前页面在系统层级中的位置，帮助用户快速感知路径，并支持逐级返回。

ts
import { createApp } from 'vue'
import { Breadcrumb as ElBreadcrumb, BreadcrumbItem as ElBreadcrumbItem } from '@szhn/dh-design-pc'

const app = createApp()
app.use(ElBreadcrumb)
app.use(ElBreadcrumbItem)

文字样式 ​

适用于主内容区的常规路径展示。前续页面为浅色文字，当前页面为深色加粗文字。

<script setup lang="ts">
import { ArrowRight } from '@szhn/dh-design-pc/icons'
import { Breadcrumb as ElBreadcrumb, BreadcrumbItem as ElBreadcrumbItem } from '@szhn/dh-design-pc'

const longLabel = '上级页面上级页面上级页面'
</script>

<template>
  <el-breadcrumb :separator-icon="ArrowRight">
    <el-breadcrumb-item :to="{ path: '/' }">上级页面</el-breadcrumb-item>
    <el-breadcrumb-item :to="{ path: '/' }">上级页面</el-breadcrumb-item>
    <el-breadcrumb-item :title="longLabel">{{ longLabel }}</el-breadcrumb-item>
    <el-breadcrumb-item :to="{ path: '/' }">上级页面</el-breadcrumb-item>
    <el-breadcrumb-item>当前页面</el-breadcrumb-item>
  </el-breadcrumb>
</template>

面性样式 ​

通过 variant="filled" 使用带底色的节点样式，适合需要更强层级提示的场景。

<template>
  <div class="breadcrumb-demo-surface">
    <el-breadcrumb variant="filled" :separator-icon="ArrowRight">
      <el-breadcrumb-item :to="{ path: '/' }">上级页面</el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path: '/' }">上级页面</el-breadcrumb-item>
      <el-breadcrumb-item :title="longLabel">{{ longLabel }}</el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path: '/' }">上级页面</el-breadcrumb-item>
      <el-breadcrumb-item>当前页面</el-breadcrumb-item>
    </el-breadcrumb>
  </div>
</template>

<script lang="ts" setup>
import { ArrowRight } from '@szhn/dh-design-pc/icons'
import { Breadcrumb as ElBreadcrumb, BreadcrumbItem as ElBreadcrumbItem } from '@szhn/dh-design-pc'

const longLabel = '上级页面上级页面上级页面'
</script>

<style scoped>
.breadcrumb-demo-surface {
  padding: 24px;
  border-radius: 8px;
  background: var(--dh-color-surface-soft);
}
</style>

自定义分隔符 ​

可以通过 separator 自定义任意字符作为分隔符。

<template>
  <el-breadcrumb separator=">">
    <el-breadcrumb-item>首页</el-breadcrumb-item>
    <el-breadcrumb-item>活动管理</el-breadcrumb-item>
    <el-breadcrumb-item>活动列表</el-breadcrumb-item>
    <el-breadcrumb-item>活动详情</el-breadcrumb-item>
  </el-breadcrumb>
</template>

<script lang="ts" setup>
import { Breadcrumb as ElBreadcrumb, BreadcrumbItem as ElBreadcrumbItem } from '@szhn/dh-design-pc'

</script>

带链接 ​

el-breadcrumb-item 的 to 属性与 vue-router 的 to 一致，可实现路由跳转。

<template>
  <el-breadcrumb :separator-icon="ArrowRight">
    <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
    <el-breadcrumb-item :to="{ path: '/promotion' }">活动管理</el-breadcrumb-item>
    <el-breadcrumb-item>
      <a href="#">活动列表</a>
    </el-breadcrumb-item>
    <el-breadcrumb-item>活动详情</el-breadcrumb-item>
  </el-breadcrumb>
</template>

<script lang="ts" setup>
import { ArrowRight } from '@szhn/dh-design-pc/icons'
import { Breadcrumb as ElBreadcrumb, BreadcrumbItem as ElBreadcrumbItem } from '@szhn/dh-design-pc'

</script>

长文字 ​

节点文字默认最多显示约 10 个汉字宽度，超出后以省略号截断，悬停时显示完整名称。也可以通过 label-max-width 或单个节点的 max-width 调整宽度。

API ​

属性名说明类型默认值
separator分隔符string/
separator-icon图标分隔符string / Component—
variant样式类型'text' | 'filled''text'
label-max-width节点默认最大宽度string / number'10em'
插槽名说明
default自定义默认内容（BreadcrumbItem）
属性名说明类型默认值
to路由跳转目标（同 vue-router 的 to）string / object''
replace若为 true，导航不会留下历史记录booleanfalse
title悬停时显示的完整名称，未传时自动读取节点文字string—
max-width单个节点最大宽度string / number'10em'
插槽名说明
default自定义默认内容

更多信息见 Element Plus Breadcrumb 文档。