基于Vue的侧边目录组件的实现

npm install vue-side-catalog -S

<template>
 <div id="app">
  <div class="demo">
   <h2>JavaScript</h2>
   <h3>历史</h3>
   <h4>肇始于网景</h4>
   <h4>微软采纳</h4>
   <h4>标准化</h4>
   <h3>概论</h3>
   <h3>特性</h3>
  </div>
 <side-catalog 
  v-bind="catalogProps"
 ></side-catalog>
 </div>
</template>
import SideCatalog from 'vue-side-catalog'
import 'vue-side-catalog/lib/vue-side-catalog.css'
export default {
 components: {
  SideCatalog,
 },
 data() {
  return {
   catalogProps:{
     containerElementSelector: '.demo',
   },
  };
 },
}

 data(){
  return {
   catalogProps:{
    headList: ["h2", "h3", "h4", "h5", "h6"], // 使h2作为一级目录
    // headList: ["h4", "h2", "p", "span"], // 指定不同的标签为目录
   },
  };
 },

<template>
  <h2>JavaScript</h2>
  <h3 ref="t1">历史</h3>
  <h4 ref="t1-1">肇始于网景</h4>
  <h4 ref="t1-2">微软采纳</h4>
  <h4 ref="t1-3">标准化</h4>
  <h3 ref="t2">概论</h3>
  <h3 ref="t3">特性</h3>
  <version ref="t4"/>
  <!-- ... -->
</template>

//...
import Version from './components/Version';
export default {
 components: {
  // ...
  Version,
 },
 data() {
  return {
   catalogProps:{
     containerElementSelector: '.demo',
     refList:[
     {
      ref: 't1'
     },
     {
      ref: 't1-1',
      level: 2 // 指定为二级目录
     },
     {
      ref: 't1-2',
      level: 2
     },
     {
      ref: 't1-3',
      level: 2
     },
     {
      ref: 't2'
     },
     {
      ref: 't3'
     },
     {
      ref: 't4',
      title: '版本' // 组件需要单独设置title(默认取innerText)
     },
    ]
   },
  };
 },
}

 data(){
  return {
   catalogProps:{
    scrollElementSelector: '.demo',
   },
  };
 },

.demo {
 height: 400px;
 overflow: auto;
}