中国专业的网站建设,网站建设搜索优化app推广新闻营销,前十名少儿编程机构,服务器网站路径问题 官方给出的目录设置参见#xff1a;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
在做实际使用中往往可能需要将目录结构独立出来#xff0c;经过近一天的研究终于明白其实现逻辑#xff0c;并将目… 官方给出的目录设置参见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 key1 tab文件 !-- 省略 --/a-tab-panea-tab-pane key2 tab 大纲ScrollContainer!-- 1.渲染目录的代码基本就是复制的源码样式什么的都是用的其本身的关键点a.定义目录项的点击事件handleNavClickb.计算出目录项 fileTitles--ul classv-md-editor__toc-navli :style{paddingLeft: ${indent * (item.indent)}px}clickhandleNavClick(item)classv-md-editor__toc-nav-itemv-foritem in fileTitlesspan classv-md-editor__toc-nav-title{{ item.title }}/span/li/ul/ScrollContainer/a-tab-pane/a-tabs
/a-layout-sider
a-layout-content div stylewidth: 100%;height:100%; !-- 2.mode使用纯预览模式 这个也影响点击事件的处理--v-md-editor modepreview refmdEditorRef/v-md-editor/div
/a-layout-contentscript langts setup const fileTitles refArrayany([]);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总结实现步骤其实就两步
计算出目录数据项重新写目录项点击事件。
而以上两步其实要与其原生保持一致所以需要找到其源码在复制过来进行响应的调整。在此基础上我们就可以在目录上做我们自己的处理了如目录渲染的位置及样式点击事件增加自己的业务逻辑等
