面包屑 Breadcrumb

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

基础使用

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

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

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

WARNING

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

• Home
• >
• Breadcrumb

<template>
	<px-breadcrumb @select="selectHandler">
		<px-breadcrumb-item index="Home" href="/pixelium-design/" target="_self">
			<template #icon>
				<IconHome></IconHome>
			</template>
			Home
		</px-breadcrumb-item>
		<px-breadcrumb-item index="Current" label="Breadcrumb"></px-breadcrumb-item>
	</px-breadcrumb>
</template>

<script setup lang="ts">
import { IconHome } from '@pixelium/web-vue/icon-hn/es'

const selectHandler = (index: number | string | symbol) => {
	$message.info(`${String(index)} Selected`)
}
</script>

禁用和不可点击

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

• Town Hall
• >
• Keep
• >
• Castle

• Great Hall
• >
• Stronghold
• >
• Fortress

<template>
	<px-space direction="vertical">
		<px-breadcrumb @select="selectHandler">
			<px-breadcrumb-item disabled index="Town Hall">Town Hall</px-breadcrumb-item>
			<px-breadcrumb-item disabled index="Keep">Keep</px-breadcrumb-item>
			<px-breadcrumb-item disabled index="Castle">Castle</px-breadcrumb-item>
		</px-breadcrumb>
		<px-breadcrumb @select="selectHandler">
			<px-breadcrumb-item :clickable="false" index="Great Hall">Great Hall</px-breadcrumb-item>
			<px-breadcrumb-item :clickable="false" index="Stronghold">Stronghold</px-breadcrumb-item>
			<px-breadcrumb-item :clickable="false" index="Fortress">Fortress</px-breadcrumb-item>
		</px-breadcrumb>
	</px-space>
</template>

<script setup lang="ts">
const selectHandler = (index: number | string | symbol) => {
	$message.info(`${String(index)} Selected`)
}
</script>

选项属性

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

• Home
• >
• Breadcrumb

<template>
	<px-breadcrumb @select="selectHandler" :options="options"> </px-breadcrumb>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const selectHandler = (index: number | string | symbol) => {
	$message.info(`${String(index)} Selected`)
}

const options = ref([{ index: 'Home', label: 'Home', href: '/pixelium-design/' }, 'Breadcrumb'])
</script>

分隔符

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

• Home
• /
• Dashboard
• /
• Statistic

• Home
• →
• Dashboard
• →
• Statistic

<template>
	<px-space direction="vertical">
		<px-breadcrumb splitter="/" @select="selectHandler">
			<px-breadcrumb-item index="Home">Home</px-breadcrumb-item>
			<px-breadcrumb-item index="Dashboard">Dashboard</px-breadcrumb-item>
			<px-breadcrumb-item index="Statistic">Statistic</px-breadcrumb-item>
		</px-breadcrumb>
		<px-breadcrumb @select="selectHandler">
			<px-breadcrumb-item index="Home">Home</px-breadcrumb-item>
			<px-breadcrumb-item index="Dashboard">Dashboard</px-breadcrumb-item>
			<px-breadcrumb-item index="Statistic">Statistic</px-breadcrumb-item>
			<template #splitter> → </template>
		</px-breadcrumb>
	</px-space>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const selectHandler = (index: number | string | symbol) => {
	$message.info(`${String(index)} Selected`)
}
</script>

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
}