介绍

• 本 js 库主要作用域给一个范围内的 html 通过一定的选择器（默认是 h1 - h6）,生成一个目录树

• 不依赖任何插件和 js 库的纯原生实现

• 可以内部挂载生成默认的节点

• 也可以导出平铺或者树形数据提供给其他插件或者库进行使用

• 注意：导出的数据默认包含了 children parent 等 循环依赖的数据

• 在提供给外部特定的库可能需要去掉对应的循环依赖字段

• 比如 jsTree 生成需要 titleKey: "text", clearParent: true

• 与 wow 等库进行结合时，由于元素 dispplay=none，此时 dom 节点的 innerText 获取不到参数，所以提供了 nodeToTitle 配置项，用于自定义处理，可以使用 innerHTML 或者 contentText 均可获取

• 内部使用 scrollIntoView 进行默认的滚动处理，兼容性尚可，并与之相对用有 scrollbehavior scrollParams 两个参数作为参数传递 后者优先级更高，请注意兼容性，部分浏览器不支持对象参数

在线 demo

效果

使用方式

使用默认样式和节点

// 一下几种引入均可 webpack
  const HtmlToc = require('t_html_toc')
  import HtmlToc = from 't_html_toc'
  require('t_html_toc/src/style.css')
// 如果是浏览器  可以使用  /dist/index.umd.js  /src/index.js


const options={}，tocOption={} // 具体在下方
const toc = new HtmlToc('#content',options)
toc.mountToc('#tree'，tocOption)

样式 可以不引入 自己实现即可

| className | 作用 | | | --------------------- | ----------------------------------- | ----------------------- | | html_toc_node | toc 生成的节点统一携带的 class 属性 | | | html_toc_node[active] | 激活的 toc 会带上 active 属性 | 默认情况 | | html_toc_node[hidden] | 隐藏的 toc 会带上 hidden 属性 | 默认情况 | | html_toc_node_level_X | toc 节点的层级相关 | X 代表第几级，从 0 开始 |

.html_toc_node {
  cursor: pointer;
  font-size: 14px;
  user-select: none;
}

.html_toc_node[active] {
  color: green;
}

.html_toc_node_level_0 {
  padding-left: 20px;
}

.html_toc_node_level_1 {
  padding-left: 40px;
}

.html_toc_node_level_2 {
  padding-left: 60px;
}

.html_toc_node_level_3 {
  padding-left: 80px;
}

.html_toc_node_level_4 {
  padding-left: 100px;
}

导出数据给其他 js 库生成个性化的树 比如 jquery 的 jsTree

  const toc = new HtmlToc('#root',{
    ...
    titleKey: "text",
    clearParent: true
  })

   const data = t2.getTreeData()
    $('#tree').jstree({
      'core': {
        'data': data,
        "plugins": ["checkbox"],
        'check_callback': function () { return true; }
      }
    }).on('changed.jstree', (e, data) => {
      // 这么取值完全是插件是这么设计的，
      let tocTarget = data.node.original._html_toc_node
      tocTarget.scrollIntoView({
        behavior: 'smooth'
      })
    })

除了导出 treeData 还可以导出平铺的数据

const toc = new HtmlToc(selector, options)
// 导出  树形数据
toc.getTreeData()
// 导出平铺数据
toc.createPlatData()

平铺数据

    [
      {
        title:'第一章' // 元素的文本内容
        _html_toc_level:1,  // 元素的层级  根据传入的选择器列表顺序
        _html_toc_node:node// 元素实际节点
      }
      ...
    ]

树形数据

    [
      {
        title:'第一章' // 元素的文本内容
        _html_toc_level:1,  // 元素的层级  根据传入的选择器列表顺序
        _html_toc_node:node// 元素实际节点
        _html_toc_parent:parent,  //父级data对象
        children:[...]  //子级节点
      }
      ...
    ]

实例属性以及事件介绍

| 键 | 作用 | 备注 | | ------------- | ---------------------- | ---------------------------------------------------------------------------------------- | | parseSelector | 解析选择器为 dom 节点 | | | getPlatData | 获取平铺数据 | | | getTreeData | 获取树形数据 | | | updateData | 更新 toc 的节点 | toc 不会监听 dom 变化自动更新，如果 dom 变化，调用此函数，然后在获取数据或者生成新的 toc | | addEvent | 给匹配到的节点添加事件 | {click:clickHandler,...}，添加的是原始的节点事件，不是 toc 上的事件 | | removeEvent | 给匹配到的节点移除事件 | | | mountToc | 使用默认的样式生成 toc | 第一个参数是目标节点，第二个参数是相关的配置对象 | | destory | 销毁 | |

进行配置的相关设置

const Default_selectors = ['h1', 'h2', 'h3', 'h5', 'h6']
const LevelKey = '_html_toc_level'
const nodeKey = '_html_toc_node'
const parentKey = '_html_toc_parent'
const containerActiveTocItemKey = '_html_old_active_toc'
const containerClickKey = '_htmlClick'
const tocItemClassPre = 'html_toc_node html_toc_node_level_'
const tocNodeKey = '_html_toc_node_data'
const DefaultOptions = {
  titleKey: 'title',
  nodeToTitle: (node) => node.innerText,
  childrenKey: 'children',
  clearEmptyChildren: true,
  clearParent: false,
}
const DefaultMountTocOptions = {
  scrollbehavior: 'smooth',
  isChildrenHiddenKey: 'hiddenChildren',
  isHiddenKey: 'hidden',
  isActiveKey: 'active',
  autoToggleChildren: false,
}

可配置的选项

实例化时的 Options

| 键 | 默认值 | 作用 | 如何配 | | ------------------ | ------------------------------ | ----------------------------------------------------------------------------------------------------- | ---------------------------------------------------------- | | selecters | ['h1', 'h2', 'h3', 'h5', 'h6'] | 用于生成 toc 的选择器列表 | 可以传入自定义选择器，比如['.t01', '.t02', '.t03', '.t04'] | | titleKey | title | 指定导出的数据，节点文本信息的 key | 实例化传入 option | | nodeToTitle | node => node.innerText | 匹配到节点时，获取文本的函数,用于一些特殊处理，比如 display=none 时，innerText 获取不到，可以自行处理 | 实例化传入 option | | childrenKey | children | 指定导出的数据，子节点的 key | 实例化传入 option | | clearEmptyChildren | true | 是否删除 空子节点的数据的 children 字段 | 实例化传入 option | | clearParent | false | 是否去掉数据节点父节点信息，jsTree 不去掉会内存溢出 | 实例化传入 option |

使用默认 Toc 挂载 时 Options

| 键 | 默认值 | 作用 | 如何配 | | ------------------- | -------------- | ------------------------------------------------------------------------------------------------------------------------- | ------------------------------ | | clickHanle | null | 点击 toc 元素的处理函数，如果存在，就不会默认滚动了 | mountToc 传入第二个参数 option | | scrollbehavior | smooth | 默认的处理滚动的 scrollIntoView 参数 behavior 在无 scrollParams 时有效 | mountToc 传入第二个参数 option | | scrollParams | null | 处理滚动的 scrollIntoView 参数 对象，优先级高于 scrollbehavior ,{ behavior: "smooth", block: "center", inline: "center" } | mountToc 传入第二个参数 option | | autoToggleChildren | false | 是否修改子节点的相关属性，用于折叠子级 toc | mountToc 传入第二个参数 | | isChildrenHiddenKey | hiddenChildren | 父节点中子级节点隐藏的属性 | mountToc 传入第二个参数 option | | isHiddenKey | hidden | 节点自身隐藏属性，修改为其他可以自己增加 css 效果 | mountToc 传入第二个参数 option | | isActiveKey | active | 节点当前是否激活属性 | mountToc 传入第二个参数 option |

不建议修改的配置

| 键 | 默认值 | 作用 | 如何配 | | ------------------------- | ------------------------------ | -------------------------------------------------- | -------------- | | Default_selectors | ['h1', 'h2', 'h3', 'h5', 'h6'] | 默认的选择器 | 修改源文件顶部 | | LevelKey | _html_toc_level | 绑定在节点以及生成的数据中代表层级的字段 | 修改源文件顶部 | | nodeKey | _html_toc_node | 绑定在数据中实际映射的 dom 节点 | 修改源文件顶部 | | parentKey | _html_toc_parent | 绑定在数据中，代表父级数据的 key 值 | 修改源文件顶部 | | containerActiveTocItemKey | _html_old_active_toc | 上一次点击的 toc 节点 | 修改源文件顶部 | | containerClickKey | _htmlClick | 绑定在 container 上，保存点击事件的 key | 修改源文件顶部 | | tocNodeKey | _html_toc_node_data | 绑定在 toc 的元素节点上，保存对应的 toc 数据的 key | 修改源文件顶部 |