vue实现文章目录

目录是我们再阅读文章的时候非常常见的一种功能。它不仅有利于我们能够快速的了解本篇文章要介绍哪几个点，也有助于我们快速的定位到标题。

下面来看看我的实现方法。

1、设置ref

<div v-html="xxx" ref="ff">
<!---内容区域--->
</div>

2、获取文章中的小标题。

getTitle() {
      // 生成目录
      this.$nextTick(() => {
        // 根据之前设置的ref来获取文章的小标题
        const article_content = this.$refs.ff;//这里的ff改成你具体设置的
        // 想获取的标题，将想获取的小标题的标签添加到这
        const titleTag = ["H1", "H2", "H3"];
        //存放小标题的数组
        let titles = [];
        article_content.childNodes.forEach((e, index) => {
          //具体执行步骤，比如：打印看看
          console.log(e, index);
          if (titleTag.includes(e.nodeName)) {
            //具体封装过程
            console.log(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
            });
          }
        });
          //再data中定义catalog
        this.catalog = titles;
        console.log("23", this.catalog);
      });
    },

3、展示文章目录

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

<style>
.cc{
  background-color: rgb(254,242,235);
}
</style>

4、判断哪个小标题内容正在被阅读

原理：根据小标题和屏幕顶部之间的距离来判断的。

getReading(){
  //获取页面滚动值
  var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
  //遍历小标题
  for(let i=0;i<this.catalog.length;i++){
    //获取小标题距离屏幕顶端的距离
    var offsetTop = document.querySelector("#"+this.catalog[i].id).offsetTop;
      //根据条件做出判断，我这里是当小标题和屏幕顶端的距离小于300且没有被标明在读时，就将其背景颜色改变。
    if((offsetTop-scrollTop)<300&&(offsetTop-scrollTop)>0&&this.catalog[i].read==false){
      this.catalog[i].read = true
      //再将其他小标题背景色改成未读的背景色
      for(let j=0;j<this.catalog.length;j++){
        if(j!=i){
          this.catalog[j].read = false
        }
      }
    }
  }
}