关于富文本取到H1到H6标签 生成目录

<div class="textbox" ref="richTextContent" v-html="message" @click="targetNodeNameClick">     
  </div>

this.$nextTick(function(){
            const richTextContent = this.$refs.richTextContent;
             const h2Tags = richTextContent.querySelectorAll('h1, h2, h3, h4, h5, h6');
             h2Tags.forEach((h2Tag, index) => {
              h2Tag.setAttribute('ref', `heading${index}`);
            });

            h2Tags.forEach(headingTag => {
              // this.headingsArray.push(headingTag.textContent);
              this.headingsArray.push(headingTag);
            });

           })

拿到标签之后的渲染
<div class="mulu-title" :class="{ 'activexxx': isActive == index }" 
@click="titleTTT(index)" 
v-for="(item , index) in headingsArray" :key="'sss'+ index" v-html="item.outerHTML">
                    
 </div>



  titleTTT(isref){
        this.isActive = isref
        let id = 'heading' + isref
        let tar =  this.$refs.richTextContent.querySelector(`[ref="${id}"]`);
        const elementPosition = tar.getBoundingClientRect();
        // 计算滚动的位置（当前滚动位置 + 元素相对于视口顶部的位置 - 80px的偏移量）
        const scrollPosition = window.scrollY + elementPosition.top - 80;
        // 使用window.scrollTo滚动到计算得到的位置
        window.scrollTo({ top: scrollPosition, behavior: 'smooth' });
      },