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

最近要做一个侧边目录的功能，没有找到类似的组件，索性自己写了一个供大家参考

vue-side-catalog

一个基于vue的侧边目录组件。

源码地址：https://github.com/yaowei9363/vue-side-catalog

安装

npm install vue-side-catalog -S

开始

<template>
 <div id="app">
  <div class="demo">
   <h1>JavaScript</h1>
   <h2>历史</h2>
   <h3>肇始于网景</h3>
   <h3>微软采纳</h3>
   <h3>标准化</h3>
   <h2>概论</h2>
   <h2>特性</h2>
  </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',
   },
  };
 },
}

注意：

containerElementSelector

属性是必需的，指定文章的容器。

效果如下图：

示例

自定义目录标签

组件默认会把

containerElementSelector

元素的直接子集的

header

标签作为目录内容,
对应规则为：

h2

=>

一级目录

h3

=>

二级目录

h4

=>

三级目录

h5

=>

四级目录

要修改这一规则可以使用

headList

属性，这个属性的默认值为

["h2", "h3", "h4", "h5"]

对应上述规则

注意：自定义题目标签目前只支持

containerElementSelector

元素的直接子集的html标签

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