标题列表
安装
此功能为外部插件, 使用前请安装quill-header-list插件,完整文档请查看插件文档。
bash
npm install quill-header-list基本用法
创建一个元素用于存放标题列表,并将其传入header-list的container属性。
设置滚动容器
默认情况下,编辑器会指定自身为滚动容器,可通过传递scrollContainer属性来指定滚动容器。
当页面中存在fixed元素处于顶部时,你可能会需要进行额外的滚动 offset(比如此文档页面),否则会导致滚动后的标题被fixed元素遮挡。可以设置topOffset额外滚动距离。
参数选项
| 名称 | 类型 | 说明 | 默认值 | 必填 |
|---|---|---|---|---|
| container | string | HTMLElement | 列表存放位置 | - | true |
| scrollContainer | string | HTMLElement | 滚动容器 | - | true |
| hideClass | number | 隐藏时container类名 | fe-hidden | false |
| topOffset | number | () => number | 滚动距离顶部偏移量, 单位px | 0 | false |
| onBeforeShow | () => boolean | 列表显示前执行回调, 返回true可阻止显示 | - | false |
| onBeforeHide | () => boolean | 列表隐藏前执行回调, 返回true可阻止隐藏 | - | false |
| onItemClick | (id: string) => void | 列表项点击后时执行回调, 参数id为对应跳转至的标题id | - | false |