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

npm install vue-side-catalog -S

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"], // 指定不同的标签为目录
   },
  };
 },

//...
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;
}