2021-01-09 10:01:15 +08:00

63 lines
1.1 KiB
Vue

<template>
<router-link
v-if="item.path"
:class="{ active }"
:to="path"
v-html="itemName"
/>
<a v-else-if="item.link" :href="item.link" v-html="itemName" />
<a v-else v-html="itemName" />
</template>
<script>
export default {
name: 'VanDocNavLink',
props: {
base: String,
item: Object,
},
computed: {
itemName() {
const name = (this.item.title || this.item.name).split(' ');
return `${name[0]} <span>${name.slice(1).join(' ')}</span>`;
},
path() {
return `${this.base}${this.item.path}`;
},
active() {
if (this.$route.path === this.path) {
return true;
}
if (this.item.path === 'home') {
return this.$route.path === this.base;
}
return false;
},
},
watch: {
active() {
this.scrollIntoView();
},
},
mounted() {
this.scrollIntoView();
},
methods: {
scrollIntoView() {
if (this.active && this.$el && this.$el.scrollIntoViewIfNeeded) {
this.$el.scrollIntoViewIfNeeded();
}
},
},
};
</script>