文章自动生成目录及侧边栏目录滚动特效的插件toc-helper(v2)

toc-helper

toc-helper 是一款给文章自动生成目录的插件

v1 入口
v2 在线预览 Demo

一、 v2 特性

• 用法精简，减少了大量的配置，去除不必要的API，仅需要引入一个js文件
• 性能优化，联动滚动更加流畅，自动停靠顶部更加精准
• 目录支持自动展开、折叠
• 自动定位，初始目录高亮位置自动识别
• 支持显示、隐藏、自适应宽度变化
• 支持非标题标签, 但需要提供 data-level 属性
• 支持局部滚动（非body, 内容div滚动）
• 支持 React、Vue、Svelte

二、 使用

浏览器

1. 引入JS

<script src="lib/umd/index.js"></script>

esmodule 引入 lib/es/index.js

2. 使用

new TocHelper(el [, options])

npm方式

1. 安装

npm install toc-helper --save 
# 或者
yarn add toc-helper

2. 使用

2.1 require

const TocHelper = require('toc-helper')
new TocHelper(el [, options])

2.2 import

import TocHelper from 'toc-helper'
new TocHelper(el [, options])

2.3 React 示例

2.3.1 普通模式

import TocHelper from 'toc-helper'
class App extends React.PureComponent{
   
  constructor(props){
   
    super(props)
    this.ref = null
  }
  componentDidMount