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

toc-helper是一款用于文章自动生成目录的插件,v2版本简化了用法,提升了性能,并增加了目录自动展开、折叠等功能。支持浏览器直接引入和npm安装,提供API和配置项,方便开发者自定义设置。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

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

  1. 使用
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
  }
  comp
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值