官方给出的目录设置参见：https://code-farmer-i.github.io/vue-markdown-editor/zh/senior/toc.html#%E7%9B%B8%E5%85%B3%E9%85%8D%E7%BD%AE
在做实际使用中往往可能需要将目录结构独立出来，经过近一天的研究终于明白其实现逻辑，并将目录结构独立出来，支持独立渲染，独立处理目录点击事件，同时也兼容原来的点击事件处理逻辑。具体如下：
效果对比图
具体实现如下：
<!-- 注意组件的常规属性省略掉了 -->
<a-layout-sider >
<a-tabs >
<a-tab-pane key="1" tab="文件" >
<!-- 省略 -->
</a-tab-pane>
<a-tab-pane key="2" tab = "大纲">
<ScrollContainer>
<!-- 1.渲染目录的代码，基本就是复制的源码，样式什么的都是用的其本身的
关键点：a.定义目录项的点击事件handleNavClick
b.计算出目录项 fileTitles
-->
<ul class="v-md-editor__toc-nav">
<li :style="{paddingLeft: `${indent * (item.indent)}px`}"
@click="handleNavClick(item)"
class="v-md-editor__toc-nav-item"
v-for="item in fileTitles">
<span class="v-md-editor__toc-nav-title">{{ item.title }}</span>
</li>
</ul>
</ScrollContainer>
</a-tab-pane>
</a-tabs>
</a-layout-sider>
<a-layout-content >
<div style="width: 100%;height:100%;">
<!-- 2.mode使用纯预览模式 这个也影响点击事件的处理-->
<v-md-editor mode="preview" ref="mdEditorRef"></v-md-editor>
</div>
</a-layout-content>
<script lang="ts" setup >
const fileTitles = ref<Array<any>>([]);
const mdEditorRef = ref();
// b.计算出目录项 fileTitles
const updateToc = ()=>{
const noteEditorObj = mdEditorRef.value;
// 注意：若不是纯预览模式，这个方法会出问题，没有这个没有具体研究。
// 计算目录项使用的是其原来的方式，所以没有兼容问题。
let anchors = noteEditorObj.getPreviewScrollContainer().document.querySelectorAll(noteEditorObj.anchorsSelector);
let titles = Array.from(anchors).filter(function (title) {
return !!(title as any).innerText.trim();
});
if (!titles.length) {
return;
}
let hTags = Array.from(new Set(titles.map(function (title) {
return (title as any).tagName;
}))).sort();
titles = titles.map(function (el) {
return {
title: (el as any).innerText,
lineIndex: (el as any).getAttribute("data-v-md-line"),
indent: hTags.indexOf((el as any).tagName)
};
});
fileTitles.value.splice(0);
fileTitles.value.push(...titles); // 最终计算出目录项
}
// a.定义目录项的点击事件handleNavClick
const handleNavClick = (currentNav)=>{
console.log("currentNav",currentNav);
const noteEditorObj = mdEditorRef.value;
// 取预览模式下滚动容器，非预览模式下获取的方式可能有差异.
const previewScroller = noteEditorObj.$refs.previewScroller.$el.querySelector('.scrollbar__wrap');
let target = noteEditorObj.$el.querySelector("[data-v-md-line=\"" + currentNav.lineIndex + "\"]");
// 调用原始的方式滚动的对应位置.
noteEditorObj.$refs.preview.scrollToTarget({target: target,onScrollEnd:false,scrollContainer:previewScroller});
};
</script>
总结实现步骤其实就两步：
- 计算出目录数据项
- 重新写目录项点击事件。
而以上两步其实要与其原生保持一致，所以需要找到其源码在复制过来进行响应的调整。在此基础上我们就可以在目录上做我们自己的处理了，如目录渲染的位置及样式，点击事件增加自己的业务逻辑等
