对于vue中v-html渲染的文章内容，实现其目录功能

一、思路

主要有以下几个步骤：

1. 获取文章内容；
2. 将文章内容渲染到页面；
3. 根据文章内容生成目录；
4. 渲染目录到页面；
5. 实现目录锚点跳转；
6. 样式优化。

二、实现

2.1、获取文章内容

content: '<h1>第一步</h1><h2>1.1、代码块展示</h2><pre class="ql-syntax line-numbers language-js" spellcheck="false"><code class="language-js">var str = "hello world!"</code></pre><h2>1.2、666</h2><p>66666666</p><h1>第二步</h1><p>给个赞呗！！！！！！！！！！！！</p><h1>第三步</h1><p>你学废了吗？</p>'  

2.2、将文章内容渲染到页面

<div class="detail_con" :style="loading ? 'height:200px;' : 'height:auto;'" v-loading="loading" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.8)">
     <div v-highlight ref="blogContentRef" @click="clickImage" v-html="blogInfo.content"></div>
</div>

2.3、根据文章内容生成目录

// 获取博客文章目录
getTitle() {
    // 生成目录
    this.$nextTick(() => {
        // 根据ref来获取文章的标题
        const articleContent = this.$refs.blogContentRef
        // 想获取的标题，将想获取的标题的标签添加到这
        const titleTag = ['H1', 'H2', 'H3']
        // 存放标题的数组
        const titles = []
        // 遍历标题节点
        articleContent.childNodes.forEach((e, index) => {
          // 找出需要做成目录的标题并在内容中给这些标题添加id属性(可用于锚点跳转)
          if (titleTag.includes(e.nodeName)) {
            // 具体封装过程
            const id = 'header-' + index
            // 设置元素id
            e.setAttribute('id', id)
            // 最终目录
            titles.push({
              id: id,
              title: e.innerHTML,
              level: Number(e.nodeName.substring(1, 2)),
              nodeName: e.nodeName,
              // read：后期主要用来判断当前阅读的是哪一个小标题的内容
              read: false
            })
          }
        })
        // 最终目录赋值给catalog
        this.catalog = titles
        // loading
        this.loading = false
    })
},

2.4、渲染目录到页面

<div class="directory">
   <h2>目录</h2>
     <ul>
         <template v-for="(item, index) in catalog">
            <!---根据read属性，动态绑定样式：为true即为正在阅读此内容--->
            <li :key="index" :style="{ paddingLeft: item.level * 30 - 44 + 'px' }" :class="{ ll: item.read == true }">
               <!---设置href，用于目录的跳转；动态绑定id，判断当前正在阅读的是哪一个小标题的内容--->
               <a :id="item.id" @click="goAnchor(index, '#' + item.id)" :class="{ cc: item.read == true }" v-html="item.title"></a>
            </li>
        </template>
    </ul>
</div>

2.5、实现目录锚点跳转

// 目录锚点跳转
goAnchor(index, id) {
   // 被点击的目录对应内容中的标题样式改变
   for (let i = 0; i < this.catalog.length; i++) {
      if (index === i) {
         this.catalog[i].read = true
         document.getElementById(this.catalog[i].id).style.color = '#0eba8a'
      } else {
         this.catalog[i].read = false
         document.getElementById(this.catalog[i].id).style.color = '#666'
      }
   }

   // 参数是id选择器
   document.querySelector(id).scrollIntoView({
      behavior: 'smooth', // 动画过渡效果-behavior: "auto" 或 "smooth" 默认为 "auto"
      block: 'center', // 垂直方向对齐-block: "start", "center", "end", 或 "nearest" 默认为 "start"
      inline: 'center' // 水平方向对齐-inline: "start", "center", "end", 或 "nearest" 默认为 "nearest"
   })
},

2.6、样式优化

可根据自身情况进行调整。

三、效果展示