@@ -24,22 +24,22 @@ A breadcrumb displays the current location within a hierarchy. It allows going b
2424
2525### Breadcrumb.Item
2626
27- | Property | Description | Type | Default | Version |
28- | --- | --- | --- | --- | --- |
29- | href | Target of hyperlink | string | - | |
30- | overlay | The dropdown menu | [ Menu] ( /components/menu ) \| () => Menu | - | |
27+ | Property | Description | Type | Default | Version |
28+ | -------- | ------------------- | -------------------------------------- | ------- | ---- --- |
29+ | href | Target of hyperlink | string | - | |
30+ | overlay | The dropdown menu | [ Menu] ( /components/menu ) \| () => Menu | - | |
3131
3232#### Events
3333
34- | Events Name | Description | Arguments | Version |
35- | -------- | -------- | -------------------- | ---- |
36- | click | handler to handle click event | (e: MouseEvent )=>void | - | 1.5.0 |
34+ | Events Name | Description | Arguments | Version |
35+ | ----------- | ----------------------------- | -------------------- | ------- | - ---- |
36+ | click | handler to handle click event | (e: MouseEvent )=>void | - | 1.5.0 |
3737
3838### Breadcrumb.Separator ` 1.5.0 `
3939
40- | Property | Description | Type | Default | Version |
41- | -------- | ---------------- | ----- ---- | ------- | ------- |
42- | - | - | - | - | - |
40+ | Property | Description | Type | Default | Version |
41+ | -------- | ----------- | ---- | ------- | ------- |
42+ | - | - | - | - | - |
4343
4444> When using ` Breadcrumb.Separator ` ,its parent component must be set to ` separator="" ` , otherwise the default separator of the parent component will appear.
4545
@@ -64,59 +64,55 @@ The link of Breadcrumb item targets `#` by default, you can use `itemRender` to
6464<template >
6565 <a-breadcrumb :routes =" routes" >
6666 <template #itemRender =" { route, params, routes, paths }" >
67- <span v-if =" routes.indexOf(route) === routes.length - 1" >
68- {{route.breadcrumbName}}
69- </span >
70- <router-link v-else :to =" paths.join('/')" >
71- {{route.breadcrumbName}}
72- </router-link >
67+ <span v-if =" routes.indexOf(route) === routes.length - 1" >{{route.breadcrumbName}}</span >
68+ <router-link v-else :to =" paths.join('/')" >{{route.breadcrumbName}}</router-link >
7369 </template >
7470 </a-breadcrumb >
7571</template >
7672<script lang =" ts" >
77- import { defineComponent , ref } from ' vue' ;
78- interface Route {
79- path: string;
80- breadcrumbName: string;
81- children?: Array < {
73+ import { defineComponent , ref } from ' vue' ;
74+ interface Route {
8275 path: string;
8376 breadcrumbName: string;
84- }> ;
85- }
86- export default defineComponent ({
87- setup () {
88- const routes = ref< Route[]> ([
89- {
90- path: ' index' ,
91- breadcrumbName: ' home' ,
92- },
93- {
94- path: ' first' ,
95- breadcrumbName: ' first' ,
96- children: [
97- {
98- path: ' /general' ,
99- breadcrumbName: ' General' ,
100- },
101- {
102- path: ' /layout' ,
103- breadcrumbName: ' Layout' ,
104- },
105- {
106- path: ' /navigation' ,
107- breadcrumbName: ' Navigation' ,
108- },
109- ],
110- },
111- {
112- path: ' second' ,
113- breadcrumbName: ' second' ,
114- },
115- ]);
116- return {
117- routes,
118- }
77+ children?: Array < {
78+ path: string;
79+ breadcrumbName: string;
80+ }> ;
11981 }
120- });
82+ export default defineComponent ({
83+ setup () {
84+ const routes = ref< Route[]> ([
85+ {
86+ path: ' index' ,
87+ breadcrumbName: ' home' ,
88+ },
89+ {
90+ path: ' first' ,
91+ breadcrumbName: ' first' ,
92+ children: [
93+ {
94+ path: ' /general' ,
95+ breadcrumbName: ' General' ,
96+ },
97+ {
98+ path: ' /layout' ,
99+ breadcrumbName: ' Layout' ,
100+ },
101+ {
102+ path: ' /navigation' ,
103+ breadcrumbName: ' Navigation' ,
104+ },
105+ ],
106+ },
107+ {
108+ path: ' second' ,
109+ breadcrumbName: ' second' ,
110+ },
111+ ]);
112+ return {
113+ routes,
114+ };
115+ },
116+ });
121117 </script >
122118```
0 commit comments