Python私教张大鹏 Vue3整合AntDesignVue之Breadcrumb 面包屑

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

何时使用

当系统拥有超过两级以上的层级结构时；
当需要告知用户『你在哪里』时；
当需要向上导航的功能时。

案例：面包屑导航基本使用

核心代码：

<template>
  <a-breadcrumb>
    <a-breadcrumb-item>Home</a-breadcrumb-item>
    <a-breadcrumb-item><a href="">Application Center</a></a-breadcrumb-item>
    <a-breadcrumb-item><a href="">Application List</a></a-breadcrumb-item>
    <a-breadcrumb-item>An Application</a-breadcrumb-item>
  </a-breadcrumb>
</template>

vue3示例：

<script setup>
</script>
<template>
  <a-breadcrumb>
    <a-breadcrumb-item>首页</a-breadcrumb-item>
    <a-breadcrumb-item>
      <a href="#">数据分析平台</a>
    </a-breadcrumb-item>
    <a-breadcrumb-item>销量分析</a-breadcrumb-item>
  </a-breadcrumb>
</template>

在这里插入图片描述

案例：带下拉菜单的面包屑

面包屑支持下拉菜单。

核心代码：

<template>
  <a-breadcrumb>
    <a-breadcrumb-item>Ant Design Vue</a-breadcrumb-item>
    <a-breadcrumb-item><a href="">Component</a></a-breadcrumb-item>
    <a-breadcrumb-item>
      <a href="">General</a>
      <template #overlay>
        <a-menu>
          <a-menu-item>
            <a target="_blank" rel="noopener noreferrer" href="http://www.alipay.com/">General</a>
          </a-menu-item>
          <a-menu-item>
            <a target="_blank" rel="noopener noreferrer" href="http://www.taobao.com/">Layout</a>
          </a-menu-item>
          <a-menu-item>
            <a target="_blank" rel="noopener noreferrer" href="http://www.tmall.com/">Navigation</a>
          </a-menu-item>
        </a-menu>
      </template>
    </a-breadcrumb-item>
    <a-breadcrumb-item>Button</a-breadcrumb-item>
  </a-breadcrumb>
</template>

vue3示例：

<script setup>
</script>
<template>
  <a-breadcrumb>
    <a-breadcrumb-item>首页</a-breadcrumb-item>
    <a-breadcrumb-item>
      <a href="#">数据分析平台</a>
      <template #overlay>
        <a-menu>
          <a-menu-item>
            <a href="#">选项1</a>
          </a-menu-item>
          <a-menu-item>
            <a href="#">选项2</a>
          </a-menu-item>
          <a-menu-item>
            <a href="#">选项3</a>
          </a-menu-item>
        </a-menu>
      </template>
    </a-breadcrumb-item>
    <a-breadcrumb-item>销量分析</a-breadcrumb-item>
  </a-breadcrumb>
</template>

在这里插入图片描述

案例：分隔符

用separator=">"可以自定义分隔符，或者使用slot="separator"自定义更复杂的分隔符。

核心代码：

<template>
  <a-breadcrumb separator=">">
    <a-breadcrumb-item>Home</a-breadcrumb-item>
    <a-breadcrumb-item href="">Application Center</a-breadcrumb-item>
    <a-breadcrumb-item href="">Application List</a-breadcrumb-item>
    <a-breadcrumb-item>An Application</a-breadcrumb-item>
  </a-breadcrumb>
  <a-breadcrumb>
    <template #separator><span style="color: red">></span></template>
    <a-breadcrumb-item>Home</a-breadcrumb-item>
    <a-breadcrumb-item href="">Application Center</a-breadcrumb-item>
    <a-breadcrumb-item href="">Application List</a-breadcrumb-item>
    <a-breadcrumb-item>An Application</a-breadcrumb-item>
  </a-breadcrumb>
</template>

vue3示例：

<template>
  <a-breadcrumb separator=">">
    <a-breadcrumb-item>首页</a-breadcrumb-item>
    <a-breadcrumb-item href="#">数据分析平台</a-breadcrumb-item>
    <a-breadcrumb-item>销量分析</a-breadcrumb-item>
  </a-breadcrumb>
</template>

在这里插入图片描述

案例：分隔符2

用separator=">"可以自定义分隔符，或者使用slot="separator"自定义更复杂的分隔符。

核心代码：

<template>
  <a-breadcrumb>
    <template #separator><span style="color: red">></span></template>
    <a-breadcrumb-item>Home</a-breadcrumb-item>
    <a-breadcrumb-item href="">Application Center</a-breadcrumb-item>
    <a-breadcrumb-item href="">Application List</a-breadcrumb-item>
    <a-breadcrumb-item>An Application</a-breadcrumb-item>
  </a-breadcrumb>
</template>

vue3示例：

<template>
  <a-breadcrumb>
    <template #separator>
      <span class="text-red-500"> > </span>
    </template>
    <a-breadcrumb-item>首页</a-breadcrumb-item>
    <a-breadcrumb-item href="#">数据分析平台</a-breadcrumb-item>
    <a-breadcrumb-item>销量分析</a-breadcrumb-item>
  </a-breadcrumb>
</template>

在这里插入图片描述

案例：图标

图标放在文字前面。

核心代码：

<template>
  <a-breadcrumb>
    <a-breadcrumb-item href="">
      <home-outlined />
    </a-breadcrumb-item>
    <a-breadcrumb-item href="">
      <user-outlined />
      <span>Application List</span>
    </a-breadcrumb-item>
    <a-breadcrumb-item>Application</a-breadcrumb-item>
  </a-breadcrumb>
</template>
<script lang="ts" setup>
import { HomeOutlined, UserOutlined } from '@ant-design/icons-vue';
</script>

vue3示例：

<script setup>
import {HomeOutlined, UserOutlined} from "@ant-design/icons-vue"
</script>
<template>
  <a-breadcrumb>
    <template #separator>
      <span class="text-red-500"> > </span>
    </template>
    <a-breadcrumb-item>
      <HomeOutlined/>
      首页
    </a-breadcrumb-item>
    <a-breadcrumb-item href="#">
      <UserOutlined/>
      数据分析平台
    </a-breadcrumb-item>
    <a-breadcrumb-item>销量分析</a-breadcrumb-item>
  </a-breadcrumb>
</template>

在这里插入图片描述

属性

参数	说明	类型	默认值
itemRender	自定义链接函数，和 vue-router 配置使用，也可使用 #itemRender=“props”	({route, params, routes, paths}) => vNode	-
params	路由的参数	object	-
routes	router 的路由栈信息	[routes]	-
separator	分隔符自定义	string\|slot	‘/’