ant design of vue 组件库的使用:
1: Breadcrumb面包屑 (面包屑导航使用)
基本使用方法: a 标签表示链接。 跳转的位置
<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>
2: 带有icon 图标的写法:
设置一个<a-icon>标签 type 属性表示需要展示:icon的字体图标:
<template>
<a-breadcrumb>
<a-breadcrumb-item href="">
<a-icon type="home" />
</a-breadcrumb-item>
<a-breadcrumb-item href="">
<a-icon type="user" />
<span>Application List</span>
</a-breadcrumb-item>
<a-breadcrumb-item>
Application
</a-breadcrumb-item>
</a-breadcrumb>
</template>
3: 自定分隔符:
使用separator=">"
可以自定义分隔符,或者使用slot="separator"自定义更复杂的分隔符
<template>
<div>
<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>
<span slot="separator" style="color: red">></span>
<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>
</div>
</template>
slot : 标签表示自定义分隔符:
4: API 接口: itemRender: 自定义函数, 和vue-router 配置使用, 也可以使用 slot = "itemRender" 和 slot- scope = "props";
5: params: 路由的传参。
6: routers: routers 的路由栈信息。
7: separator: 分割符自定义。
二: Breadcrumb.item
href: 链接的目的: 类型:
overlay: 下拉框的内容: