关于在Vue使用mavonEditor组件，自制文章目录

渡清沙

已于 2022-02-08 23:39:52 修改

阅读量3.2k

点赞数 1

CC 4.0 BY-SA版权

文章标签： vue.js javascript 前端

于 2022-02-07 17:59:50 首次发布

本文链接：https://blog.csdn.net/qq_45790967/article/details/122811937

本文介绍了如何在Vue项目中利用mavonEditor组件创建自定义文章目录，并实现目录跳转功能，避免使用jQuery直接操作DOM。通过在mavonEditor标签上设置ref，在组件挂载后获取DOM，然后遍历目录，结合$nextTick处理DOM更新。同时定义了scrollToPosition和scrollToToc方法，实现在不同目录间平滑滚动的效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

文章目录

前言
一、通过ref操作Dom
- 1.在mavonEditor标签内加入ref
- 2.在挂载完成并dom更新后获取dom
二、目录跳转实现
总结

前言

使用mavonEditor组件的文章目录:navigation时，该导航目录在当前组件所在的位置。我想将他移出或者干脆自己写目录导航效果。写了个不使用JQuery的方法。
毕竟在vue内在用jquery操作dom有点太大了。所以我使用了refs这个属性

提示：以下是本篇文章正文内容，下面案例可供参考

一、通过ref操作Dom

1.在mavonEditor标签内加入ref

<!-- markdown内容 -->
<!-- https://github.com/hinesboy/mavonEditor/blob/master/README.md -->
<!-- :navigation="isPC"导航栏不需要我自己做 -->
<!-- :toolbarsFlag="false"隐藏编辑栏 -->
<!-- :subfield="false" 显示一个 -->
<!-- defaultOpen="preview"显示预览 -->
<!-- codeStyle="tomorrow-night-eighties" 代码样式 -->
<!-- 如不需要hightlight代码高亮显示，你应该设置ishljs为false -->
<!--ref: vShowContent-->
<mavonEditor
  v-model="content"
  :toolbarsFlag="false"
  :subfield="false"
  defaultOpen="preview"
  :ishljs="false"
  ref="markdown"
/>

2.在挂载完成并dom更新后获取dom

通过使用$nextTick使回调延迟到下次DOM更新循环之后执行
for循环遍历nodelist对象获取id存在的值。因为在文档中每个目录小节的a标签有着自己的独特id
并取出父节点大概是h3标签的内容赋给data()中的tocs值存储了id的值和内容
当然也可以存储节点元素，这样操作dom不需再次遍历

mounted() {
   
   
    //   $nextTick 将回调延迟到下次DOM更新循环之后执行。在修改数据之后立即使用它,然后等待DOM更新。
    this.$nextTick(() => {
   
   
      const aArr = this.$refs.markdown.$refs.vShowContent.querySelectorAll(