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

自定义目录元素

跟上面的自定义目录标签不同，自定义目录元素可以支持

任意层级

的

含有ref属性的元素

，也可以支持组件
需要用到

refList

属性

<template>
  <h1>JavaScript</h1>
  <h2 ref="t1">历史</h2>
  <h3 ref="t1-1">肇始于网景</h3>
  <h3 ref="t1-2">微软采纳</h3>
  <h3 ref="t1-3">标准化</h3>
  <h2 ref="t2">概论</h2>
  <h2 ref="t3">特性</h2>
  <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)
     },
    ]   },
  };
 },
}

效果如下图：

注意：

headList

和

refList

同时设置的话，会忽视

headList

指定元素滚动

也可以使用

scrollElementSelector

对固定元素的内容生成目录，如果不指定该属性则默认监听

Window

的scroll事件

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

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

效果如下图：

在线示例

点击这里

Props

Name	Type	Default	Description
headList	Array	[“h2”, “h3”, “h4”, “h5”]