npm 包 gimtoc 使用教程

阅读时长 6 分钟读完

1. 概述

gimtoc 是一个用于生成目录的 npm 包,可以帮助前端开发者在网页中快速生成一个目录,让用户更方便地查看网页内容。

该包支持自定义样式和项数限制等高级功能,可以为网页增添更多个性化特色。

2. 安装

在 npm 中安装 gimtoc:

3. 使用

使用 gimtoc 生成默认目录:

以上代码将在网页中自动生成一个默认样式的目录,目录包括 .header 和 .article 两个区块的标题。

3.1 自定义样式

使用 gimtoc 时,可以通过 className 属性定义目录的 className,从而为其添加样式:

以上代码会生成一个 className 为 my-gimtoc 的、字体颜色为绿色的目录。

也可以通过定义 style 属性为其添加样式,如下:

3.2 itemNum

itemNum 属性表示目录的项目数量,默认为 0,表示不限制数量。

以上代码将只生成两个目录项目。

3.3 callback

callback 属性为目录项指定回调函数。

以上代码在点击某一目录项时,将依次执行该回调函数。其中,index 为目录项的下标,el 为相应的目录项 DOM 元素。

4. 示例代码

-- -------------------- ---- -------
--------- -----
------
------
  ------------- ------------
  ----- ----------------
  -------
    ------- -
      ---------- -----
    -
    -------- -
      ---------- -----
    -
    ---------- -- -
      ----------- -----
      -------- --
    -
    ---------- -- -- -
      ------------ -----
    -
  --------
-------
------

  ---- ---------------
    ---------- ---------
  ------

  ---- ----------------
    ------ -------
    --------- ---------- --- ------------------------------------------
    ------------------------------------------
    ------ -------
    ---- --- --- -----------
    ------ --- ------- ------ ------------
    ------ -------
    ----- ------ -----------
    -----
      ------ ------ ---- ---------

      --- --------
        ---------- ---------
        ------ -----
        --------- ----------- -----------
      -----------
    ------
    ------ -------
    ------------------ - --------
    -----
      --- --------
        ------ -----
        --------- ----------- ------------
        ------ ------- --------
        -------- -
      -----------
    ------
    ----------------- --- -------
    -----
      --- --------
        ------ -----
        --------- ----------- ------------
        --------- --------------- --- -
          -------------------
          ----------------
        -
      -----------
    ------
    ------ -------
    --------- ------------- --- -------------------------------------------
  ------

  ------- --------------------------------------------------------
  --------
    --- --------
      ---------- ------------
      ------ -----
      --------- ----------- ------------
      ------ ------- --------
      -------- -
    -----------
  ---------
-------
-------

来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/5f6aa9cda9b7065299ccb880

纠错
反馈