Tu View PlusBreadcrumb 面包屑导航
显示当前页面在系统层级结构中的位置，并能向上返回。
基础用法
面包屑的基本用法。
主页
/
频道
/
新闻
<template>
<tu-breadcrumb>
<tu-breadcrumb-item>主页</tu-breadcrumb-item>
<tu-breadcrumb-item>频道</tu-breadcrumb-item>
<tu-breadcrumb-item>新闻</tu-breadcrumb-item>
</tu-breadcrumb>
</template><template>
<tu-breadcrumb>
<tu-breadcrumb-item>主页</tu-breadcrumb-item>
<tu-breadcrumb-item>频道</tu-breadcrumb-item>
<tu-breadcrumb-item>新闻</tu-breadcrumb-item>
</tu-breadcrumb>
</template>自定义分隔符
通过 separator 属性或插槽自定义分隔符。面包屑子项也可通过 separator 属性或插槽自定义分隔符，且优先级高于父项。
主页
频道
新闻
主页
~
频道
~
新闻
<template>
<tu-breadcrumb class="mb-2">
<template #separator>
<tu-icon><ArrowRight /></tu-icon>
</template>
<tu-breadcrumb-item>主页</tu-breadcrumb-item>
<tu-breadcrumb-item>频道</tu-breadcrumb-item>
<tu-breadcrumb-item>新闻</tu-breadcrumb-item>
</tu-breadcrumb>
<br />
<tu-breadcrumb separator="~">
<tu-breadcrumb-item>主页</tu-breadcrumb-item>
<tu-breadcrumb-item>频道</tu-breadcrumb-item>
<tu-breadcrumb-item>新闻</tu-breadcrumb-item>
</tu-breadcrumb>
</template>
<script lang="ts" setup>
import { ArrowRight } from '@tu-view-plus/icons-vue';
</script><template>
<tu-breadcrumb class="mb-2">
<template #separator>
<tu-icon><ArrowRight /></tu-icon>
</template>
<tu-breadcrumb-item>主页</tu-breadcrumb-item>
<tu-breadcrumb-item>频道</tu-breadcrumb-item>
<tu-breadcrumb-item>新闻</tu-breadcrumb-item>
</tu-breadcrumb>
<br />
<tu-breadcrumb separator="~">
<tu-breadcrumb-item>主页</tu-breadcrumb-item>
<tu-breadcrumb-item>频道</tu-breadcrumb-item>
<tu-breadcrumb-item>新闻</tu-breadcrumb-item>
</tu-breadcrumb>
</template>
<script lang="ts" setup>
import { ArrowRight } from '@tu-view-plus/icons-vue';
</script>自定义尺寸
通过指定样式来自定义面包屑的尺寸。
主页
/
频道
/
新闻
主页
/
频道
/
新闻
<template>
<tu-breadcrumb class="mb-2">
<tu-breadcrumb-item>主页</tu-breadcrumb-item>
<tu-breadcrumb-item>频道</tu-breadcrumb-item>
<tu-breadcrumb-item>新闻</tu-breadcrumb-item>
</tu-breadcrumb>
<br />
<tu-breadcrumb :style="{ fontSize: '12px' }">
<tu-breadcrumb-item>主页</tu-breadcrumb-item>
<tu-breadcrumb-item>频道</tu-breadcrumb-item>
<tu-breadcrumb-item>新闻</tu-breadcrumb-item>
</tu-breadcrumb>
</template><template>
<tu-breadcrumb class="mb-2">
<tu-breadcrumb-item>主页</tu-breadcrumb-item>
<tu-breadcrumb-item>频道</tu-breadcrumb-item>
<tu-breadcrumb-item>新闻</tu-breadcrumb-item>
</tu-breadcrumb>
<br />
<tu-breadcrumb :style="{ fontSize: '12px' }">
<tu-breadcrumb-item>主页</tu-breadcrumb-item>
<tu-breadcrumb-item>频道</tu-breadcrumb-item>
<tu-breadcrumb-item>新闻</tu-breadcrumb-item>
</tu-breadcrumb>
</template>自定义图标
可以在内容中使用自定义图标。
/
/
<template>
<tu-breadcrumb>
<tu-breadcrumb-item>
<tu-icon><Cloudy /></tu-icon>
</tu-breadcrumb-item>
<tu-breadcrumb-item>
<tu-icon><PartlyCloudy /></tu-icon>
</tu-breadcrumb-item>
<tu-breadcrumb-item>
<tu-icon><Pouring /></tu-icon>
</tu-breadcrumb-item>
</tu-breadcrumb>
</template>
<script lang="ts" setup>
import { Cloudy, PartlyCloudy, Pouring } from '@tu-view-plus/icons-vue';
</script><template>
<tu-breadcrumb>
<tu-breadcrumb-item>
<tu-icon><Cloudy /></tu-icon>
</tu-breadcrumb-item>
<tu-breadcrumb-item>
<tu-icon><PartlyCloudy /></tu-icon>
</tu-breadcrumb-item>
<tu-breadcrumb-item>
<tu-icon><Pouring /></tu-icon>
</tu-breadcrumb-item>
</tu-breadcrumb>
</template>
<script lang="ts" setup>
import { Cloudy, PartlyCloudy, Pouring } from '@tu-view-plus/icons-vue';
</script>参数化配置
通过 routes 来传递面包屑数据。若是要自定义面包屑的话，建议使用 a-breadcrumb-item 组件。默认使用 a 标签的 href 属性绑定路径，可通过 item 插槽自定义渲染。
<template>
<tu-breadcrumb class="mb-2" :routes="routes" />
<br />
<tu-breadcrumb :routes="routes">
<template #item-render="{ route, paths }">
<tu-link :href="paths.join('/')">
{{ route.label }}
</tu-link>
</template>
</tu-breadcrumb>
</template>
<script lang="ts" setup>
const routes = [
{
path: '/',
label: '主页'
},
{
path: '/channel',
label: '频道'
},
{
path: '/news',
label: '新闻'
}
];
</script><template>
<tu-breadcrumb class="mb-2" :routes="routes" />
<br />
<tu-breadcrumb :routes="routes">
<template #item-render="{ route, paths }">
<tu-link :href="paths.join('/')">
{{ route.label }}
</tu-link>
</template>
</tu-breadcrumb>
</template>
<script lang="ts" setup>
const routes = [
{
path: '/',
label: '主页'
},
{
path: '/channel',
label: '频道'
},
{
path: '/news',
label: '新闻'
}
];
</script>带有下拉菜单
通过 droplist 或者 routes 来指定下拉菜单。
<template>
<tu-breadcrumb class="mb-2" :routes="routes" />
<br />
<tu-breadcrumb>
<tu-breadcrumb-item>主页</tu-breadcrumb-item>
<tu-breadcrumb-item :droplist="droplist">频道</tu-breadcrumb-item>
<tu-breadcrumb-item>新闻</tu-breadcrumb-item>
</tu-breadcrumb>
</template>
<script lang="ts" setup>
const routes = [
{
path: '/',
label: '主页'
},
{
path: '/channel',
label: '频道',
children: [
{
path: '/live',
label: '直播'
},
{
path: '/video',
label: '视频'
}
]
},
{
path: '/news',
label: '新闻'
}
];
const droplist = [
{
path: '/live',
label: '直播'
},
{
path: '/video',
label: '视频'
}
];
</script><template>
<tu-breadcrumb class="mb-2" :routes="routes" />
<br />
<tu-breadcrumb>
<tu-breadcrumb-item>主页</tu-breadcrumb-item>
<tu-breadcrumb-item :droplist="droplist">频道</tu-breadcrumb-item>
<tu-breadcrumb-item>新闻</tu-breadcrumb-item>
</tu-breadcrumb>
</template>
<script lang="ts" setup>
const routes = [
{
path: '/',
label: '主页'
},
{
path: '/channel',
label: '频道',
children: [
{
path: '/live',
label: '直播'
},
{
path: '/video',
label: '视频'
}
]
},
{
path: '/news',
label: '新闻'
}
];
const droplist = [
{
path: '/live',
label: '直播'
},
{
path: '/video',
label: '视频'
}
];
</script>显示省略
通过 max-count 来指定面包屑的最多渲染数量，超出的部分将显示为省略号。
主页
/
/
文章
主页
/
/
文章
<template>
<tu-breadcrumb class="mb-2" :max-count="2">
<tu-breadcrumb-item>主页</tu-breadcrumb-item>
<tu-breadcrumb-item>分类</tu-breadcrumb-item>
<tu-breadcrumb-item>频道</tu-breadcrumb-item>
<tu-breadcrumb-item>新闻</tu-breadcrumb-item>
<tu-breadcrumb-item>文章</tu-breadcrumb-item>
</tu-breadcrumb>
<br />
<tu-breadcrumb class="mb-2" :max-count="2">
<template #more-icon>
<tu-tooltip content="分类 / 频道 / 新闻">
<tu-icon><MoreFilled /></tu-icon>
</tu-tooltip>
</template>
<tu-breadcrumb-item>主页</tu-breadcrumb-item>
<tu-breadcrumb-item>分类</tu-breadcrumb-item>
<tu-breadcrumb-item>频道</tu-breadcrumb-item>
<tu-breadcrumb-item>新闻</tu-breadcrumb-item>
<tu-breadcrumb-item>文章</tu-breadcrumb-item>
</tu-breadcrumb>
</template>
<script lang="ts" setup>
import { MoreFilled } from '@tu-view-plus/icons-vue';
</script><template>
<tu-breadcrumb class="mb-2" :max-count="2">
<tu-breadcrumb-item>主页</tu-breadcrumb-item>
<tu-breadcrumb-item>分类</tu-breadcrumb-item>
<tu-breadcrumb-item>频道</tu-breadcrumb-item>
<tu-breadcrumb-item>新闻</tu-breadcrumb-item>
<tu-breadcrumb-item>文章</tu-breadcrumb-item>
</tu-breadcrumb>
<br />
<tu-breadcrumb class="mb-2" :max-count="2">
<template #more-icon>
<tu-tooltip content="分类 / 频道 / 新闻">
<tu-icon><MoreFilled /></tu-icon>
</tu-tooltip>
</template>
<tu-breadcrumb-item>主页</tu-breadcrumb-item>
<tu-breadcrumb-item>分类</tu-breadcrumb-item>
<tu-breadcrumb-item>频道</tu-breadcrumb-item>
<tu-breadcrumb-item>新闻</tu-breadcrumb-item>
<tu-breadcrumb-item>文章</tu-breadcrumb-item>
</tu-breadcrumb>
</template>
<script lang="ts" setup>
import { MoreFilled } from '@tu-view-plus/icons-vue';
</script>Breadcrumb API
Breadcrumb Attributes
| 参数名 | 描述 | 类型 | 默认值 |
|---|---|---|---|
| max-count | 最多展示的面包屑数量（0表示不限制） | Number | 0 |
| routes | 设置路径 | Array | - |
| separator | 分隔符文字 | StringNumber | - |
| custom-url | 自定义链接地址 | Function | - |
Breadcrumb Slots
| 参数名 | 描述 |
|---|---|
| more-icon | 自定义更多图标 |
| item-render | routes 设置时生效，自定义渲染面包屑 |
| separator | 自定义分隔符 |
Breadcrumb-Item Attributes
| 参数名 | 描述 | 类型 | 默认值 |
|---|---|---|---|
| separator | 分隔符文字 | StringNumber | - |
| droplist | 下拉菜单内容 | Object | - |
| dropdown-props | 下拉菜单属性 | Object | - |
Breadcrumb-Item Slots
| 参数名 | 描述 |
|---|---|
| droplist | 自定义下拉菜单 |
| separator | 自定义分隔符 |
BreadcrumbRoute
| 参数名 | 描述 | 类型 | 默认值 |
|---|---|---|---|
| label | 面包屑名称 | String | - |
| path | 跳转路径 (a标签的href) | String | - |
| children | 下拉菜单展示项 | Array | - |