ant design of vue 组件库

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：  下拉框的内容：