开源软件名称：

开源软件地址：

开源软件介绍：

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(){    new TocHelper(this.ref [, options])  }  render(){    return <div ref={ref => this.ref = ref} />  }} 

2.3.2 Hook 模式

import TocHelper from 'toc-helper'export default App(){ const ref = useRef() useEffect(()=>{   new TocHelper(ref [, options]) }) return <div ref={ref} />}

2.4 vue 示例 v3

<script>  import TocHelper from 'toc-helper'  setup(props, { emit }) {    const toc = ref(null);    let helper = null;    onMounted(function () {      helper = new TocHelper(toc [, options]);    });    return { toc };  },</script><template>  <div ref="toc"></div></template>

2.5 svelte 示例

<script>  import TocHelper from 'toc-helper'  let toc = null  let helper = null  onMount(function(){    helper = new TocHelper(toc [, options])  })</script><div bind:this={toc}/>

三、API

TocHelper(selector [, options])

构造器方法, 只能通过 new 创建实例

selector
类型：string | HTMLElement
默认值：无
必须：是

selector 若为字符串，则必须是选择器，切可以通过ducument.querySelector获取相应的元素，否则将报错

options
类型：object | undefined
默认值：无
必须：可选

resetHeadings

无参

实例方法，调用后将重新解析 heading, 若数据是异步获取，该方法会有用

isEmpty

无参

实例方法，判断是否有 heading

四、配置

options

1. contentSelector

类型: string | HTMLElement
默认值: document.body

若为字符串，则必须是选择器，切可以通过ducument.querySelector获取相应的元素

通过该选择器解析内容中的目录元素

2. scrollSelector

类型: string | HTMLElement
默认值: document.body

若为字符串，则必须是选择器，切可以通过ducument.querySelector获取相应的元素

滚动元素的选择器; 若内容不是整个文档，且滚动也不是整个文档，是文档内的某个容器滚动则需要指定该值，否则目录无法同步滚动

3. fixedSelector

类型: string | HTMLElement
默认值: 目录本身

若为字符串，则必须是选择器，切可以通过ducument.querySelector获取相应的元素

文档滚动到该选择器元素的位置就fixed在顶部

4. headingSelector

类型: string
默认值: h1, h2, h3, h4, h5, h6

内容元素通过该选择器解析出所有的目录

1. 可以不是h标签，但是标签要提供属性 data-level 已指定当前目录的层级
2. 具体用法是[contentSelector].querySelectorAll(headingSelector), 所以需要正确配置 contentSelector和headingSelector, 否则解析的目录将会为空

5. collapsedLevel

类型: number
默认值: 3

该层级以上的目录将默认折叠(隐藏)，当内容滚动该位置对应的目录或点击后都将自动展开，之后又将折叠

6. idPrefix

类型: string
默认值: bitoc-heading-

目录ID的前缀

仅影响目录本身，对文档内容不产生副作用

7. levelClassPrefix

类型: string
默认值: bitoc-ml-

层级偏移样式前缀，默认二级目录(bitoc-ml-2)偏移1rem, 三级目录(bitoc-ml-3)偏移2rem, 以此累加；可用样式更改，默认样式名

• 一级目录: bitoc-ml-1
• 二级目录: bitoc-ml-2
• 三级目录: bitoc-ml-3
• 四级目录: bitoc-ml-4
• 五级目录: bitoc-ml-5
• 六级目录: bitoc-ml-6

8. scrollDuration

类型: number
默认值: 200

默认支持滚动动画，动画的持续时间由该值控制

9. scrollOffset

类型: number
默认值: 0

滚动偏移量

该值只针对内容，点击目录后内容会自动滚动到对应的位置；若内容顶部有fixed或absolute定位，滚动的位置将会有偏差，解决的方案有两种:假设fixed定位元素的高度为 64px:

• 方案一: 使用css将所有的标题padding-top等于头部的高, margin-top等于头部高的相反值; 示例css代码如下

  [contentSelector] h1,[contentSelector] h2,[contentSelector] h3,[contentSelector] h4,[contentSelector] h5,[contentSelector] h6{  margin-top: -64px;  padding-top: 64px;}
• 方案二: 配置scrollOffset值为 64, 不要加单位
• 注意: 以上两种方案只能二选其一

10. fixedOffset

类型: number | false
默认值: 动态计算

目录滚动到该位置将自动停靠在顶部

1. 该值默认通过目录元素[fixedSelector]计算获取，若初始目录处于隐藏且整个文档有滚动的话，自动计算的值将会有很大的偏差，所以尽量要精确指定该值
2. 若顶部有fixed布局的元素，则需要减去fixed布局元素的高度，否则可能会有较大的抖动
3. 若该值为false, 将禁用停靠功能

11. fixedClassName

类型: string
默认值: .bitoc-fixed

目录停靠顶部样式，默认样式

.bitoc-fixed{  position: fixed !important;}

12. beforeFixed

类型: Function(isFixed: boolean) => false|void
默认值: null
目录 Fixed 前的钩子函数

isFixed = true,表示将要Fixed
isFixed = false, 表示将要取消Fixed
若返回false将取消fixed操作, 同时afterFixed也不会调用

13. afterFixed

类型: Function(isFixed: boolean) => void
默认值: null
目录Fixed后的钩子函数

isFixed = true,表示已经成功 Fixed
isFixed = false, 表示已经成功取消 Fixed

五、其他注意

1. 目录停靠默认没有指定top的偏移量，需要添加相应的样式；比如：假如顶部有fixed布局元素，且高度为64px,则需要添加样式

.bitoc-fixed{  top: 3.875rem;}

2. 目录本身并有宽度限制，fixed后整个目录将会被内容撑开，所以需要限制停靠后的目录宽度，示例:

 .bitoc-fixed {    max-width: 27rem;  }

使其支持响应式，示例:

 @media screen and (min-width: 1024px) and (max-width: 1216px) {    #toc-box.bitoc-fixed {      max-width: 19rem;    }  }

3. 目录本身没有高度限制，fixed后后目录可能会被内容撑开超出屏幕高度，需要添加高度限制，若目录达到该限制将自动滚动，无需添加其他样式，示例:

 .bitoc {   max-height: 20.5rem;}

六、开发

git clone https://github.com/itlangzi/toc-helpercd toc-helper

开发环境

yarn dev --open

在浏览访问 http://localhost:3000/demo

构建生产版本

yarn build