1. 概述
gimtoc 是一个用于生成目录的 npm 包,可以帮助前端开发者在网页中快速生成一个目录,让用户更方便地查看网页内容。
该包支持自定义样式和项数限制等高级功能,可以为网页增添更多个性化特色。
2. 安装
在 npm 中安装 gimtoc:
$ npm install gimtoc --save
3. 使用
使用 gimtoc 生成默认目录:
import Gimtoc from 'gimtoc'; new Gimtoc({ className: 'gimtoc', title: '目录', contents: ['.header', '.article'] }).apply();
以上代码将在网页中自动生成一个默认样式的目录,目录包括 .header 和 .article 两个区块的标题。
3.1 自定义样式
使用 gimtoc 时,可以通过 className 属性定义目录的 className,从而为其添加样式:
new Gimtoc({ className: 'my-gimtoc', title: '目录', contents: ['.header', '.article'], style: 'color: green;' }).apply();
以上代码会生成一个 className 为 my-gimtoc 的、字体颜色为绿色的目录。
也可以通过定义 style 属性为其添加样式,如下:
new Gimtoc({ title: '目录', contents: ['.header', '.article'], style: 'color: green;' }).apply();
3.2 itemNum
itemNum 属性表示目录的项目数量,默认为 0,表示不限制数量。
new Gimtoc({ title: '目录', contents: ['.header', '.article'], style: 'color: green;', itemNum: 2 }).apply();
以上代码将只生成两个目录项目。
3.3 callback
callback 属性为目录项指定回调函数。
new Gimtoc({ title: '目录', contents: ['.header', '.article'], callback: function(index, el) { console.log(index); console.log(el); } }).apply();
以上代码在点击某一目录项时,将依次执行该回调函数。其中,index 为目录项的下标,el 为相应的目录项 DOM 元素。
4. 示例代码
-- -------------------- ---- ------- --------- ----- ------ ------ ------------- ------------ ----- ---------------- ------- ------- - ---------- ----- - -------- - ---------- ----- - ---------- -- - ----------- ----- -------- -- - ---------- -- -- - ------------ ----- - -------- ------- ------ ---- --------------- ---------- --------- ------ ---- ---------------- ------ ------- --------- ---------- --- ------------------------------------------ ------------------------------------------ ------ ------- ---- --- --- ----------- ------ --- ------- ------ ------------ ------ ------- ----- ------ ----------- ----- ------ ------ ---- --------- --- -------- ---------- --------- ------ ----- --------- ----------- ----------- ----------- ------ ------ ------- ------------------ - -------- ----- --- -------- ------ ----- --------- ----------- ------------ ------ ------- -------- -------- - ----------- ------ ----------------- --- ------- ----- --- -------- ------ ----- --------- ----------- ------------ --------- --------------- --- - ------------------- ---------------- - ----------- ------ ------ ------- --------- ------------- --- ------------------------------------------- ------ ------- -------------------------------------------------------- -------- --- -------- ---------- ------------ ------ ----- --------- ----------- ------------ ------ ------- -------- -------- - ----------- --------- ------- -------
来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/5f6aa9cda9b7065299ccb880