Breadcrumb 面包屑

简介

PlusBreadcrumb 展示面包屑。

基础用法

面包屑1/面包屑2/

<template>
  <PlusBreadcrumb :routes="routes" />
</template>

<script lang="ts" setup>
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
import type { PlusRouteRecordRaw } from 'plus-pro-components'

const routes: PlusRouteRecordRaw[] = [
  {
    path: '/breadcrumb/1',
    name: 'Breadcrumb1',
    meta: {
      title: '面包屑1'
    },
    children: []
  },
  {
    path: '/breadcrumb/2',
    name: 'Breadcrumb2',
    meta: {
      title: '面包屑2'
    },
    children: []
  }
]
</script>

不显示某一级

路由信息的meta 中添加 hideInBreadcrumb: true即可。 路由信息配置 PlusRouteRecordRaw

面包屑1/

<template>
  <PlusBreadcrumb :routes="routes" />
</template>

<script lang="ts" setup>
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
import type { PlusRouteRecordRaw } from 'plus-pro-components'

const routes: PlusRouteRecordRaw[] = [
  {
    path: '/breadcrumb/1',
    name: 'Breadcrumb1',
    meta: {
      title: '面包屑1'
    },
    children: []
  },
  {
    path: '/breadcrumb/2',
    name: 'Breadcrumb2',
    meta: {
      title: '面包屑2',
      hideInBreadcrumb: true
    },
    children: []
  }
]
</script>

自定义 (renderTitle)

注意

render 函数的优先级高于插槽

面包屑1/面包屑2/

<template>
  <PlusBreadcrumb :routes="routes" :title-render="renderTitle" />
</template>

<script lang="ts" setup>
import { h } from 'vue'
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
import type { PlusRouteRecordRaw } from 'plus-pro-components'

const routes = [
  {
    path: '/breadcrumb/1',
    name: 'Breadcrumb1',
    meta: {
      title: '面包屑1'
    },
    children: []
  },
  {
    path: '/breadcrumb/2',
    name: 'Breadcrumb2',
    meta: {
      title: '面包屑2'
    },
    children: []
  }
]

const renderTitle = (route: PlusRouteRecordRaw) => {
  return h(
    'p',
    {
      style: {
        color: 'red'
      }
    },
    () => route.name
  )
}
</script>

自定义 (jsx/tsx)

面包屑1/面包屑2/

<template>
  <PlusBreadcrumb :routes="routes" :title-render="renderTitle" />
</template>

<script lang="tsx" setup>
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
import type { PlusRouteRecordRaw } from 'plus-pro-components'

const routes: PlusRouteRecordRaw[] = [
  {
    path: '/breadcrumb/1',
    name: 'Breadcrumb1',
    meta: {
      title: '面包屑1'
    },
    children: []
  },
  {
    path: '/breadcrumb/2',
    name: 'Breadcrumb2',
    meta: {
      title: '面包屑2'
    },
    children: []
  }
]

const renderTitle = (route: PlusRouteRecordRaw) => {
  return <div style={{ color: '#000' }}>{route.name} </div>
}
</script>

自定义 (插槽)

注意

插槽优先级低于 render

Breadcrumb1

/

Breadcrumb2

/

<template>
  <PlusBreadcrumb :routes="routes">
    <template #breadcrumb-item-title="route">
      <h3 style="color: green; margin: 0">{{ route.name }}</h3>
    </template>
  </PlusBreadcrumb>
</template>

<script lang="ts" setup>
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
import type { PlusRouteRecordRaw } from 'plus-pro-components'

const routes: PlusRouteRecordRaw[] = [
  {
    path: '/breadcrumb/1',
    name: 'Breadcrumb1',
    meta: {
      title: '面包屑1'
    },
    children: []
  },
  {
    path: '/breadcrumb/2',
    name: 'Breadcrumb2',
    meta: {
      title: '面包屑2'
    },
    children: []
  }
]
</script>

Breadcrumb API

Breadcrumb Attributes

名称	说明	类型	默认值	是否必须
routes	面包屑的路由信息，不传默认取的是 route.matched	array PlusRouteRecordRaw[]		否
replace	面包屑跳转时是否是替换模式	boolean	false	否
renderTitle	自定义 面包屑显示	function		否
...	...	...	...	...

提示

...表示同时支持所有 el-breadcrumb Attributes

Breadcrumb Slots

插槽名	说明	作用域插槽参数
breadcrumb-item-title	自定义 面包屑显示	route PlusRouteRecordRaw

注意

render 函数的优先级高于插槽