Commit 345c6863bf79e995b25274ba03ff3523867703bc
1 parent
762c8ddf
update Breadcrumb
support router and replace
Showing
2 changed files
with
19 additions
and
5 deletions
Show diff stats
examples/routers/breadcrumb.vue
... | ... | @@ -8,7 +8,7 @@ |
8 | 8 | <div> |
9 | 9 | <Breadcrumb separator="<b class='demo-breadcrumb-separator'>=></b>"> |
10 | 10 | <Breadcrumb-item href="/">Home4</Breadcrumb-item> |
11 | - <Breadcrumb-item href="/components/breadcrumb">Components</Breadcrumb-item> | |
11 | + <Breadcrumb-item href="/checkbox" replace>Components</Breadcrumb-item> | |
12 | 12 | <Breadcrumb-item>Breadcrumb</Breadcrumb-item> |
13 | 13 | </Breadcrumb> |
14 | 14 | <Breadcrumb separator=""> | ... | ... |
src/components/breadcrumb/breadcrumb-item.vue
1 | 1 | <template> |
2 | 2 | <span> |
3 | - <a v-if="href" :href="href" :class="linkClasses"> | |
3 | + <a v-if="href" :class="linkClasses" @click="handleClick"> | |
4 | 4 | <slot></slot> |
5 | 5 | </a> |
6 | 6 | <span v-else :class="linkClasses"> |
... | ... | @@ -20,6 +20,10 @@ |
20 | 20 | props: { |
21 | 21 | href: { |
22 | 22 | type: String |
23 | + }, | |
24 | + replace: { | |
25 | + type: Boolean, | |
26 | + default: false | |
23 | 27 | } |
24 | 28 | }, |
25 | 29 | data () { |
... | ... | @@ -28,9 +32,6 @@ |
28 | 32 | showSeparator: false |
29 | 33 | }; |
30 | 34 | }, |
31 | - mounted () { | |
32 | - this.showSeparator = this.$slots.separator !== undefined; | |
33 | - }, | |
34 | 35 | computed: { |
35 | 36 | linkClasses () { |
36 | 37 | return `${prefixCls}-link`; |
... | ... | @@ -38,6 +39,19 @@ |
38 | 39 | separatorClasses () { |
39 | 40 | return `${prefixCls}-separator`; |
40 | 41 | } |
42 | + }, | |
43 | + mounted () { | |
44 | + this.showSeparator = this.$slots.separator !== undefined; | |
45 | + }, | |
46 | + methods: { | |
47 | + handleClick () { | |
48 | + const isRoute = this.$router; | |
49 | + if (isRoute) { | |
50 | + this.replace ? this.$router.replace(this.href) : this.$router.push(this.href); | |
51 | + } else { | |
52 | + window.location.href = this.href; | |
53 | + } | |
54 | + } | |
41 | 55 | } |
42 | 56 | }; |
43 | 57 | </script> | ... | ... |