当前位置：首页 > news >正文

v-md-editor高级使用之自定义目录

news 来源：原创 2024/5/10 1:01:29

官方给出的目录设置参见：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.定义目录项的点击事件handleNavClickb.计算出目录项 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.计算出目录项 fileTitlesconst 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.定义目录项的点击事件handleNavClickconst 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>

总结实现步骤其实就两步：

而以上两步其实要与其原生保持一致，所以需要找到其源码在复制过来进行响应的调整。在此基础上我们就可以在目录上做我们自己的处理了，如目录渲染的位置及样式，点击事件增加自己的业务逻辑等