2016-09-09 14:29:19 +08:00
|
|
|
<template>
|
|
|
|
<span>
|
2017-03-30 11:24:23 +08:00
|
|
|
<a v-if="href" :class="linkClasses" @click="handleClick">
|
2016-09-09 14:29:19 +08:00
|
|
|
<slot></slot>
|
|
|
|
</a>
|
|
|
|
<span v-else :class="linkClasses">
|
|
|
|
<slot></slot>
|
|
|
|
</span>
|
2017-03-05 22:02:46 +08:00
|
|
|
<span :class="separatorClasses" v-html="separator" v-if="!showSeparator"></span>
|
2017-03-03 21:05:30 +08:00
|
|
|
<span :class="separatorClasses" v-else>
|
|
|
|
<slot name="separator"></slot>
|
2016-09-09 14:29:19 +08:00
|
|
|
</span>
|
|
|
|
</span>
|
|
|
|
</template>
|
|
|
|
<script>
|
|
|
|
const prefixCls = 'ivu-breadcrumb-item';
|
|
|
|
|
|
|
|
export default {
|
2017-03-05 22:02:46 +08:00
|
|
|
name: 'BreadcrumbItem',
|
2016-09-09 14:29:19 +08:00
|
|
|
props: {
|
|
|
|
href: {
|
|
|
|
type: String
|
2017-03-30 11:24:23 +08:00
|
|
|
},
|
|
|
|
replace: {
|
|
|
|
type: Boolean,
|
|
|
|
default: false
|
2016-09-09 14:29:19 +08:00
|
|
|
}
|
|
|
|
},
|
2017-03-03 21:05:30 +08:00
|
|
|
data () {
|
|
|
|
return {
|
|
|
|
separator: '',
|
|
|
|
showSeparator: false
|
2017-03-04 09:14:14 +08:00
|
|
|
};
|
2017-03-03 21:05:30 +08:00
|
|
|
},
|
2016-09-09 14:29:19 +08:00
|
|
|
computed: {
|
|
|
|
linkClasses () {
|
|
|
|
return `${prefixCls}-link`;
|
|
|
|
},
|
|
|
|
separatorClasses () {
|
|
|
|
return `${prefixCls}-separator`;
|
|
|
|
}
|
2017-03-30 11:24:23 +08:00
|
|
|
},
|
|
|
|
mounted () {
|
|
|
|
this.showSeparator = this.$slots.separator !== undefined;
|
|
|
|
},
|
|
|
|
methods: {
|
|
|
|
handleClick () {
|
|
|
|
const isRoute = this.$router;
|
|
|
|
if (isRoute) {
|
|
|
|
this.replace ? this.$router.replace(this.href) : this.$router.push(this.href);
|
|
|
|
} else {
|
|
|
|
window.location.href = this.href;
|
|
|
|
}
|
|
|
|
}
|
2016-09-09 14:29:19 +08:00
|
|
|
}
|
2016-12-25 22:49:42 +08:00
|
|
|
};
|
|
|
|
</script>
|