toc-helper
是一款给文章自动生成目录的插件
data-level
属性body
, 内容div
滚动)React、Vue、Svelte
<script src="lib/umd/index.js"></script>
esmodule
引入lib/es/index.js
new TocHelper(el [, options])
npm install toc-helper --save
# 或者
yarn add toc-helper
require
const TocHelper = require('toc-helper')
new TocHelper(el [, options])
import
import TocHelper from 'toc-helper'
new TocHelper(el [, options])
React
示例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} />
}
}
import TocHelper from 'toc-helper'
export default App(){
const ref = useRef()
useEffect(()=>{
new TocHelper(ref [, options])
})
return <div ref={ref} />
}
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>
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}/>
TocHelper(selector [, options])
构造器方法, 只能通过 new 创建实例
selector
类型:string
| HTMLElement
默认值:无
必须:是
selector 若为字符串,则必须是选择器,切可以通过
ducument.querySelector
获取相应的元素,否则将报错
options
类型:object
| undefined
默认值:无
必须:可选
reset
无参
实例方法,调用后将重新解析 heading
, 若数据是异步获取,该方法会有用
isEmpty
无参
实例方法,判断是否有 heading
syncScroll
无参
实例方法,同步滚动,隐藏到显示可调用该方法进行同步
options
contentSelector
类型: string
| HTMLElement
默认值: document.body
若为字符串,则必须是选择器,切可以通过
ducument.querySelector
获取相应的元素
通过该选择器解析内容中的目录元素
scrollSelector
类型: string
| HTMLElement
默认值: document.body
若为字符串,则必须是选择器,切可以通过
ducument.querySelector
获取相应的元素
滚动元素的选择器; 若内容不是整个文档,且滚动也不是整个文档,是文档内的某个容器滚动则需要指定该值,否则目录无法同步滚动
fixedSelector
类型: string
| HTMLElement
默认值: 目录本身
若为字符串,则必须是选择器,切可以通过
ducument.querySelector
获取相应的元素
文档滚动到该选择器元素的位置就fixed
在顶部
headingSelector
类型: string
默认值: h1, h2, h3, h4, h5, h6
内容元素通过该选择器解析出所有的目录
- 可以不是
h
标签,但是标签要提供属性data-level
已指定当前目录的层级- 具体用法是
[contentSelector].querySelectorAll(headingSelector)
, 所以需要正确配置contentSelector
和headingSelector
, 否则解析的目录将会为空
collapsedLevel
类型: number
默认值: 3
该层级以上的目录将默认折叠(隐藏),当内容滚动该位置对应的目录或点击后都将自动展开,之后又将折叠
idPrefix
类型: string
默认值: bitoc-heading-
目录ID的前缀
仅影响目录本身,对文档内容不产生副作用
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
scrollDuration
类型: number
默认值: 200
默认支持滚动动画,动画的持续时间由该值控制
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
, 不要加单位二选其一
fixedOffset
类型: number
| false
默认值: 动态计算
目录滚动到该位置将自动停靠在顶部
fixedSelector
]计算获取,若初始目录处于隐藏且整个文档有滚动的话,自动计算的值将会有很大的偏差,所以尽量要精确指定该值fixed
布局的元素,则需要减去fixed
布局元素的高度,否则可能会有较大的抖动false
, 将禁用停靠功能fixedClassName
类型: string
默认值: .bitoc-fixed
目录停靠顶部样式,默认样式
.bitoc-fixed{
position: fixed !important;
}
beforeFixed
类型: Function(isFixed: boolean) => false|void
默认值: null
目录 Fixed
前的钩子函数
isFixed = true
,表示将要Fixed
isFixed = false
, 表示将要取消Fixed
若返回false
将取消fixed
操作, 同时afterFixed
也不会调用
afterFixed
类型: Function(isFixed: boolean) => void
默认值: null
目录Fixed
后的钩子函数
isFixed = true
,表示已经成功Fixed
isFixed = false
, 表示已经成功取消Fixed
top
的偏移量,需要添加相应的样式;比如:假如顶部有fixed
布局元素,且高度为64px
,则需要添加样式.bitoc-fixed{
top: 3.875rem;
}
fixed
后整个目录将会被内容撑开,所以需要限制停靠后的目录宽度,示例: .bitoc-fixed {
max-width: 27rem;
}
使其支持响应式,示例:
@media screen and (min-width: 1024px) and (max-width: 1216px) {
#toc-box.bitoc-fixed {
max-width: 19rem;
}
}
fixed
后后目录可能会被内容撑开超出屏幕高度,需要添加高度限制,若目录达到该限制将自动滚动,无需添加其他样式,示例: .bitoc {
max-height: 20.5rem;
}
git clone https://github.com/itlangzi/toc-helper
cd toc-helper
yarn dev --open
yarn build
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。
1. 开源生态
2. 协作、人、软件
3. 评估模型