NUR

主题

Breadcrumb 面包屑 ​

显示当前页面在系统层级结构中的位置，并能向上返回。

基础用法 ​

vue
<my-breadcrumb :items="[
  { label: '首页', to: '/' },
  { label: '产品中心', to: '/products' },
  { label: '产品详情' },
]" />

导航层级 ​

深层级导航路径，展示完整的页面层级关系。

vue
<my-breadcrumb :items="[
  { label: '首页', to: '/', icon: '...' },
  { label: '管理后台', to: '/admin' },
  { label: '系统设置', to: '/admin/settings' },
  { label: '角色管理', to: '/admin/settings/roles' },
  { label: '编辑角色' },
]" />

自定义分隔符 ​

通过 separator 属性或 #separator 插槽自定义分隔符。

vue
<!-- 字符串分隔符 -->
<my-breadcrumb :items="items" separator="/" />
<my-breadcrumb :items="items" separator=">" />

<!-- 插槽自定义 -->
<my-breadcrumb :items="items">
  <template #separator><span>·</span></template>
</my-breadcrumb>

带图标 ​

每级导航可携带图标，便于视觉识别。

vue
<my-breadcrumb :items="[
  { label: '首页', to: '/', icon: '...' },
  { label: '用户列表', to: '/users', icon: '...' },
  { label: '编辑用户' },
]" />

自定义插槽 ​

通过 #item 插槽完全自定义每一项的渲染。

vue
<my-breadcrumb :items="items">
  <template #item="{ item, isLast }">
    <span :class="{ 'font-bold': isLast }">{{ item.label }}</span>
  </template>
</my-breadcrumb>

组件结构 ​

<nav> 根元素遍历 items 数组，依次渲染面包屑项（链接 <a> 或文本 <span>）和分隔符。最后一项不带链接，标记为 is-active。

CSS 类名 ​

类名说明
.my-breadcrumb根元素
.my-breadcrumb__item面包屑项
.is-active当前项（最后一项）
.my-breadcrumb__link可点击链接
.my-breadcrumb__text纯文本（当前项）
.my-breadcrumb__icon图标
.my-breadcrumb__separator分隔符

API ​

属性说明类型默认值
items面包屑列表BreadcrumbItem[][]
separator分隔符文字string—
事件说明回调
item-click点击导航项(item: BreadcrumbItem, index: number)
名称说明作用域
separator自定义分隔符—
item自定义每一项{ item, index, isLast }
ts
interface BreadcrumbItem {
  label: string
  to?: string
  icon?: string  // SVG string
}