28 lines
807 B
Vue
28 lines
807 B
Vue
<script setup lang="ts">
|
|
interface TocItem {
|
|
text: string
|
|
id: string
|
|
children?: TocItem[]
|
|
|
|
[key: string]: any
|
|
}
|
|
interface Props {
|
|
link: TocItem;
|
|
}
|
|
|
|
const props = defineProps<Props>();
|
|
const hasChildren = computed(() => {
|
|
return props.link && props.link.children && props.link.children.length > 0 || false;
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<div class="tree-item">
|
|
<div class="tree-item-self" :class="{'is-clickable': hasChildren}" data-path="{{ props.link.title }}">
|
|
<NuxtLink no-prefetch class="tree-item-inner" :href="{hash: '#' + props.link.id}">{{ props.link.text }}</NuxtLink>
|
|
</div>
|
|
<div class="tree-item-children">
|
|
<TocLink v-if="hasChildren" v-for="link of props.link.children" :link="link" />
|
|
</div>
|
|
</div>
|
|
</template> |