面包屑 Breadcrumb

一点也联想不到面包屑和这个 UI 组件有什么关系...

基础使用

使用 Breadcrumb 和 BreadcrumbItem 搭建面包屑导航条。

默认情况下最后一项会作为普通文本渲染，可通过 Breadcrumb 的 renderLastText 属性修改。

BreadcrumbItem 根据 href 或 route 属性把选项渲染 <a> 标签或者 Vue Router 的 RouterLink 组件。

WARNING

href 和 route 将直接渲染到 <a> 标签中，如果传递类似 javascript:alert(1) 这样的值或恶意 URL，可能会导致 XSS 或开放重定向漏洞。

• Home
• >
• Breadcrumb

隐藏源代码

禁用和不可点击

使用 BreadcrumbItem 的 disabled 设置禁用，clickable 设置子项是否可点击。

• Town Hall
• >
• Keep
• >
• Castle

• Great Hall
• >
• Stronghold
• >
• Fortress

隐藏源代码

选项属性

使用 options 属性创建面包屑导航条。选项的字符串值和 index 字段作为唯一标识，推荐确保它们的唯一性。

• Home
• >
• Breadcrumb

隐藏源代码

分隔符

通过 Breadcrumb 的 splitter 属性或者 splitter 插槽设置分隔符。

• Home
• /
• Dashboard
• /
• Statistic

• Home
• →
• Dashboard
• →
• Statistic

隐藏源代码

API

BreadcrumbProps

属性	类型	可选	默认值	描述	版本
options	(string | BreadcrumbOption)[]	是		面包屑的子项。	0.1.0
splitter	string	是	'>'	子项之间的分隔符。	0.1.0
renderLastText	boolean	是	true	是否把最后一项渲染为纯文本。	0.1.0

BreadcrumbEvents

事件	参数	描述	版本
select	index: string | number | symbol, event: MouseEvent	选择面包屑子项时触发的回调。	0.1.0

BreadcrumbSlots

插槽	参数	描述	版本
default		面包屑子项的插槽。	0.1.0
splitter		分隔符的插槽。	0.1.0

BreadcrumbItemProps

属性	类型	可选	默认值	描述	版本
label	string	是		文本标签。	0.1.0
index	string | number | symbol	否		唯一标识。	0.1.0
disabled	boolean	是	false	是否禁用。	0.1.0
clickable	boolean	是	true	是否可点击。	0.1.0
href	string	是		<a> 标签的 href 属性，传入 href 参数时，将以 <a> 标签渲染文本标签。	0.1.0
route	string | object	是		Vue Router 的 RouterLink 的 to 参数，传入后，将以 RouterLink 作为 <a> 渲染文本标签。如果使用该属性，请确保在全局的 Vue App 中注册 Vue Router。	0.1.0
target	string	是		<a> 标签的 target 属性。	0.1.0

BreadcrumbItemSlots

插槽	参数	描述	版本
default		文本标签。	0.1.0
icon		图标。	0.1.0

BreadcrumbOption

export interface BreadcrumbOption extends NavigationOption {
	disabled?: boolean
	clickable?: boolean
	href?: string
	route?: string | object
	target?: string
}

export interface NavigationOption {
	index: string | number | symbol
	label?: string
}