文章页目录插件

article-catalog 是一个文章页目录插件，根据文章内容中的 H2 和 H3 标签生成一级和二级子目录，暂时不支持第三级目录。

体验DEMO

使用前提

使用这个插件的前提是，满足以下这种格式的 HTML 才可以使用：

<h2 id="7种组件通信方式随你选">
    <a href="" class="headerlink" title="7种组件通信方式随你选"></a>
    7种组件通信方式随你选
</h2>
<!-- 这里是部分文章内容 -->
<h3 id="props-on-emit">
    <a href="" class="headerlink" title="props/@on+$emit"></a>
    props/@on+$emit
</h3>
<!-- 这里是部分文章内容 -->
<h3 id="$attrs和$listeners">
    <a href="" class="headerlink" title="$attrs和$listeners"></a>
    $attrs和$listeners
</h3>
<!-- 这里是部分文章内容 -->

安装

npm install article-catalog -D

使用方式

import articleCatalog from 'article-catalog'

articleCatalog({
    lineHeight: 28,           // 每个菜单的行高是 28
    moreHeight: 10,           // 菜单左侧的线比菜单多出的高度
    surplusHeight: 180,       // 除了菜单高度+留白高度
    delay: 200,               // 防抖的延迟时间
    duration: 200,            // 滚动的动画持续时间
    toTopDistance: 80,        // 距离视口顶部多少高度之内时候触发高亮
    selector: '.headerlink',  // 文章内容中标题标签的 selector
})

注意传入参数也是瞎传的，需要配合该插件的样式，否则容易程问题。比如明明页面中子目录的真实行高是 28px，你却传入 lineHeight: 24，那肯定是不行的。