基于Vue的側(cè)邊目錄組件的實現(xiàn)

npm install vue-side-catalog -S

<template>
 <div id="app">
  <div class="demo">
   <h2>JavaScript</h2>
   <h3>歷史</h3>
   <h4>肇始于網(wǎng)景</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">肇始于網(wǎng)景</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: '版本' // 組件需要單獨設(shè)置title(默認取innerText)
     },
    ]
   },
  };
 },
}

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

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