4 changed files with 120 additions and 112 deletions
-
3src/components/blogs/header/NavigateMenu.vue
-
39src/components/blogs/leftsite/CataloGue.vue
-
16src/stores/index.ts
-
46src/views/blog/ContentDetail.vue
@ -1,11 +1,42 @@ |
|||
<template> |
|||
|
|||
<div> |
|||
<div class="catalogue" v-for="anchor in titles" :style="{ padding: `4px 0 4px ${anchor.indent * 20}px` }" |
|||
@click="handleAnchorClick(anchor)" :key="anchor.lineIndex"> |
|||
<a style="cursor: pointer">{{ anchor.title }}</a> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script setup lang='ts'> |
|||
<script setup lang="ts"> |
|||
import { computed } from 'vue'; |
|||
import { useContentStore } from '@/stores/index'; |
|||
|
|||
</script> |
|||
const store = useContentStore(); |
|||
|
|||
const titles = computed(() => store.titles); |
|||
|
|||
<style> |
|||
const handleAnchorClick = (anchor: { title: string; lineIndex: string }) => { |
|||
const heading = document.querySelector(`[data-v-md-line="${anchor.lineIndex}"]`); |
|||
|
|||
if (heading) { |
|||
heading.scrollIntoView({ behavior: 'smooth', block: 'start' }); |
|||
} else { |
|||
const observer = new MutationObserver((mutations, obs) => { |
|||
const heading = document.querySelector(`[data-v-md-line="${anchor.lineIndex}"]`); |
|||
if (heading) { |
|||
heading.scrollIntoView({ behavior: 'smooth', block: 'start' }); |
|||
obs.disconnect(); |
|||
} |
|||
}); |
|||
const container = document.querySelector('#content-container') as HTMLElement; |
|||
observer.observe(container, { childList: true, subtree: true }); |
|||
} |
|||
}; |
|||
</script> |
|||
|
|||
<style scoped> |
|||
.catalogue { |
|||
cursor: pointer; |
|||
} |
|||
</style> |
|||
|
Write
Preview
Loading…
Cancel
Save
Reference in new issue