Breadcrumb 面包屑

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

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

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

文字样式

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

面性样式

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

自定义分隔符

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

带链接

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

长文字

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

API

Breadcrumb Attributes

属性名	说明	类型	默认值
separator	分隔符	string	/
separator-icon	图标分隔符	string / Component	—
variant	样式类型	'text' | 'filled'	'text'
label-max-width	节点默认最大宽度	string / number	'10em'

Breadcrumb Slots

插槽名	说明
default	自定义默认内容（BreadcrumbItem）

BreadcrumbItem Attributes

属性名	说明	类型	默认值
to	路由跳转目标（同 vue-router 的 to）	string / object	''
replace	若为 true，导航不会留下历史记录	boolean	false
title	悬停时显示的完整名称，未传时自动读取节点文字	string	—
max-width	单个节点最大宽度	string / number	'10em'

BreadcrumbItem Slots

插槽名	说明
default	自定义默认内容

更多信息见 Element Plus Breadcrumb 文档。