@@ -24,22 +24,22 @@ A breadcrumb displays the current location within a hierarchy. It allows going b
24
24
25
25
### Breadcrumb.Item
26
26
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 | - | |
31
31
32
32
#### Events
33
33
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 |
37
37
38
38
### Breadcrumb.Separator ` 1.5.0 `
39
39
40
- | Property | Description | Type | Default | Version |
41
- | -------- | ---------------- | ----- ---- | ------- | ------- |
42
- | - | - | - | - | - |
40
+ | Property | Description | Type | Default | Version |
41
+ | -------- | ----------- | ---- | ------- | ------- |
42
+ | - | - | - | - | - |
43
43
44
44
> When using ` Breadcrumb.Separator ` ,its parent component must be set to ` separator="" ` , otherwise the default separator of the parent component will appear.
45
45
@@ -64,59 +64,55 @@ The link of Breadcrumb item targets `#` by default, you can use `itemRender` to
64
64
<template >
65
65
<a-breadcrumb :routes =" routes" >
66
66
<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 >
73
69
</template >
74
70
</a-breadcrumb >
75
71
</template >
76
72
<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 {
82
75
path: string;
83
76
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
+ }> ;
119
81
}
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
+ });
121
117
</script >
122
118
```
0 commit comments