<template>
|
<span class="el-breadcrumb__item">
|
<span
|
:class="['el-breadcrumb__inner', to ? 'is-link' : '']"
|
ref="link"
|
role="link">
|
<slot></slot>
|
</span>
|
<i v-if="separatorClass" class="el-breadcrumb__separator" :class="separatorClass"></i>
|
<span v-else class="el-breadcrumb__separator" role="presentation">{{separator}}</span>
|
</span>
|
</template>
|
<script>
|
export default {
|
name: 'ElBreadcrumbItem',
|
props: {
|
to: {},
|
replace: Boolean
|
},
|
data() {
|
return {
|
separator: '',
|
separatorClass: ''
|
};
|
},
|
|
inject: ['elBreadcrumb'],
|
|
mounted() {
|
this.separator = this.elBreadcrumb.separator;
|
this.separatorClass = this.elBreadcrumb.separatorClass;
|
const link = this.$refs.link;
|
link.setAttribute('role', 'link');
|
link.addEventListener('click', _ => {
|
const { to, $router } = this;
|
if (!to || !$router) return;
|
this.replace ? $router.replace(to) : $router.push(to);
|
});
|
}
|
};
|
</script>
|
