mavonEditor实现文档标题描点定位

二级标题

    <!-- 目录栏 -->
    <section class="toc">
      <div class="title">文章目录</div>
      <!-- 遍历目录 -->
      <ul>
        <li
          v-for="(item, index) in tocs"
          :key="index"
          class="mean"
          :class="{ on: item.click }"
        >
        // a标签锚点跳转
          <a
            @click.stop="scrollToPosition(item)"
            v-html="item.name"
            :class="{ child: item.type, childh4: item.h4type }"
            :title="item.name"
          ></a>
        </li>
      </ul>
    </section>
    updated() {
        // 监听滚动事件
    document
      .getElementsByClassName('mavon')[0]
      .addEventListener('scroll', this.dataScroll, true)
      },
   watch: {
    // 监听scroll变量，只要滚动条位置变化就会执行方法loadScroll
    scroll() {
      this.loadScroll()
    }
  },
  methods: {
      // 锚点跳转后，目录栏实现目录高亮
    loadScroll() {
      for (let item of this.tocs) {
        if (this.scroll >= item.href.offsetTop - 80) {
        }
      }
    },
  dataScroll() {
      this.scroll =
        document.documentElement.scrollTop ||
        window.pageYOffset ||
        document.body.scrollTop
    },
        // 获取文章目录标签
    getTocs() {
      let aArr = []
      setTimeout(() => {
        aArr = document.getElementsByClassName('mavon')[0].querySelectorAll('a')
        this.tocs = []
        let tocs = []
        for (let item of aArr) {
          if (item.id) {
            tocs.push({
              href: item.id,
              name: item.nextSibling.data
            })
          }
        }
        // 获取的目录是重复，写了一个去重的方法去重
        this.tocs = this.setNum(tocs)
      }, 500)
    },
    // 实现滚动
    scrollToPosition(item) {
      for (let data of this.tocs) {
      // 用name判断
        this.$set(data, 'click', data.name === item.name)
      }
      setTimeout(() => {
        document
          .getElementById(item.href)
          // scrollIntoView()方法将调用它的元素滚动到浏览器窗口的可见区域。
          .scrollIntoView({ behavior: 'smooth', block: 'start' })
      }, 300)
    },
  }

1.实现功能的时候考虑过使用mavonEditor的原本的属性去实现这个需求，但是跟ui设计不相符，滚动过程是比较流畅的，但是不能完美匹配需求。放弃这个方法
2后续考虑过使用原生js：获取文档遍历的目录所属id去定位文档所在位置，可以解决UI设计以及功能的需要，但是由于定位目录所在位置的滚动过程不流畅，定位存在累加的偏差，回到文档头部位置定位不精准的原因放弃。。下图是实现过程，且代码量片偏多