Breadcrumb 面包屑
面包屑导航。参考 Naive UI 设计（MIT 许可），支持可点击项、自定义分隔符、href 链接。
基本用法
vue
<ABreadcrumb>
<ABreadcrumbItem>首页</ABreadcrumbItem>
<ABreadcrumbItem>产品</ABreadcrumbItem>
<ABreadcrumbItem>详情</ABreadcrumbItem>
</ABreadcrumb>自定义分隔符
vue
<ABreadcrumb separator="›">
<ABreadcrumbItem>首页</ABreadcrumbItem>
<ABreadcrumbItem>用户</ABreadcrumbItem>
<ABreadcrumbItem>设置</ABreadcrumbItem>
</ABreadcrumb>可点击 & 链接
vue
<ABreadcrumb>
<ABreadcrumbItem href="/">首页</ABreadcrumbItem>
<ABreadcrumbItem href="/components">组件</ABreadcrumbItem>
<ABreadcrumbItem>面包屑</ABreadcrumbItem>
</ABreadcrumb>自定义分隔符（单个项）
vue
<ABreadcrumb>
<ABreadcrumbItem>首页</ABreadcrumbItem>
<ABreadcrumbItem separator="→">产品</ABreadcrumbItem>
<ABreadcrumbItem>详情</ABreadcrumbItem>
</ABreadcrumb>点击事件
Props
ABreadcrumb
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| separator | string | '/' | 分隔符 |
ABreadcrumbItem
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| separator | string | — | 覆盖分隔符，不传则使用 ABreadcrumb 的 separator |
| href | string | — | 链接地址，传入后渲染为 <a> |
| clickable | boolean | true | 是否可点击 |
| showSeparator | boolean | true | 是否显示分隔符 |
| onClick | (e: MouseEvent) => void | — | 点击回调 |