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> | ... | ... |