1 | <template>
|
2 | <span class="el-breadcrumb__item">
|
3 | <span
|
4 | :class="['el-breadcrumb__inner', to ? 'is-link' : '']"
|
5 | ref="link"
|
6 | role="link">
|
7 | <slot></slot>
|
8 | </span>
|
9 | <i v-if="separatorClass" class="el-breadcrumb__separator" :class="separatorClass"></i>
|
10 | <span v-else class="el-breadcrumb__separator" role="presentation">{{separator}}</span>
|
11 | </span>
|
12 | </template>
|
13 | <script>
|
14 | export default {
|
15 | name: 'ElBreadcrumbItem',
|
16 | props: {
|
17 | to: {},
|
18 | replace: Boolean
|
19 | },
|
20 | data() {
|
21 | return {
|
22 | separator: '',
|
23 | separatorClass: ''
|
24 | };
|
25 | },
|
26 |
|
27 | inject: ['elBreadcrumb'],
|
28 |
|
29 | mounted() {
|
30 | this.separator = this.elBreadcrumb.separator;
|
31 | this.separatorClass = this.elBreadcrumb.separatorClass;
|
32 | const link = this.$refs.link;
|
33 | link.setAttribute('role', 'link');
|
34 | link.addEventListener('click', _ => {
|
35 | const { to, $router } = this;
|
36 | if (!to || !$router) return;
|
37 | this.replace ? $router.replace(to) : $router.push(to);
|
38 | });
|
39 | }
|
40 | };
|
41 | </script>
|