1. 首页
  2. 文章资讯

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

54 阅读 0 评论

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

何时使用

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

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

核心代码：

<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-
routesrouter 的路由栈信息[routes]-
separator分隔符自定义string|slot‘/’

item 属性

参数参数类型默认值版本
href链接的目的地string-1.5.0
overlay下拉菜单的内容Menu | () => Menu-1.5.0

事件

事件名称说明回调参数版本
click单击事件(e:MouseEvent)=>void-1.5.0

本站资源均来自互联网，仅供研究学习，禁止违法使用和商用，产生法律纠纷本站概不负责！如果侵犯了您的权益请与我们联系！

转载请注明出处： 免费源码网-免费的源码资源网站 » Python私教张大鹏 Vue3整合AntDesignVue之Breadcrumb 面包屑

点赞(0) 打赏

评论列表 共有 0 条评论

暂无评论

微信公众账号

微信扫一扫加关注

 发表
评论 返回
顶部