49 lines
1.4 KiB
Vue
49 lines
1.4 KiB
Vue
<template>
|
|
<component :is="headerTag" class="doc-section-label">
|
|
{{ $attrs.label }}
|
|
<Tag v-if="$attrs.badge" :value="$attrs.badge?.value ?? $attrs.badge" class="doc-section-label-badge" :severity="$attrs.badge?.severity || 'info'"></Tag>
|
|
<NuxtLink :id="$attrs.id" :to="`${checkRouteName}/#${$attrs.id}`" target="_self" @click="onClick"> # </NuxtLink>
|
|
</component>
|
|
<div v-if="$attrs" class="doc-section-description">
|
|
<slot></slot>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
inheritAttrs: false,
|
|
methods: {
|
|
onClick(event) {
|
|
const parentElement = event.currentTarget.parentElement;
|
|
const hash = window.location.hash.substring(1);
|
|
|
|
hash === this.$attrs.id && event.preventDefault();
|
|
|
|
setTimeout(() => {
|
|
parentElement.scrollIntoView({ block: 'start' });
|
|
}, 0);
|
|
}
|
|
},
|
|
computed: {
|
|
checkRouteName() {
|
|
const path = this.$router.currentRoute.value.path;
|
|
|
|
if (path.lastIndexOf('/') === path.length - 1) {
|
|
return path.slice(0, -1);
|
|
}
|
|
|
|
return path;
|
|
},
|
|
headerTag() {
|
|
if (this.$attrs.level === 3) {
|
|
return 'h4';
|
|
} else if (this.$attrs.level === 2) {
|
|
return 'h3';
|
|
}
|
|
|
|
return 'h2';
|
|
}
|
|
}
|
|
};
|
|
</script>
|