一个骚气的文章目录自动生成器了解一下

Cympros 发布于2019-08-23 10:53 / 2260人阅读

摘要：左边的边栏线则是使用的来画出来的，根据层级相应做一些调整，辅以的的效果就可以呈现出不错的移动效果。

这个插件根据选定的目录内容中的 h1, h2, h3, h4, h5, h6 标签来自动生成目录插入到选定的目录容器中，并且提供一个漂亮的样式效果

监听内容区滚动

点击跳转功能

兼容性：IE10+ (由于使用了 node.classList)

地址戳这里 github地址，欢迎star，issue，pr ~

1. 预览

炫酷模式：

普通模式：

可以通过线上DEMO 来预览一下炫酷模式的效果

2. 实现思路

滚动的监听通过 getBoundingClientRect 获取元素大小以及相对视口的位置，判断我们的监听对象 h1~h6 标签是否在视口中，如果在则添加 linkActiveClass 类。

传统的锚点定位跳转会与hash模式的单页面应用的路由冲突，会导航到错误的路由路径，这里采用把要跳转的id放到 dataset 中，跳转的时候取出来使用 scrollIntoView 来进行平滑滚动到目标位置。

左边的边栏线则是使用 svg 的path来画出来的，根据层级相应做一些调整，辅以css的 transition 的效果就可以呈现出不错的移动效果。

3. Api

如果要使用默认的样式，请手动引入

import "progress-catalog/src/progress-catalog.css"

使用方法：

// 引入
import Catalog from "ProgressCatalog"

// 使用 
new Catalog({
    contentEl: "loading-animation",
    catalogEl: `catalog-content-wrapper`,
    selector: ["h2", "h3"]
})

构造函数接受的参数：

contentEl [String]

需要检索生成目录的内容区的id选择器，不需要加#

catalogEl [String]

将生成的目录append进的目录容器的id选择器，不需要加#

scrollWrapper [可选, String]

监听scroll事件的内容区容器的id选择器，不需要加#，如果不填则默认是 contentEl 的父元素

linkClass [可选, String]

所有目录项都有的类，默认值：cl-link

注意，如果设置了此值，则需要重写默认样式

linkActiveClass [可选, String]

激活的目录项所有的类，默认值：cl-link-active

注意，如果设置了此值，则需要重写默认样式

selector [可选, Array]

选择目录的标题标签，默认值：["h1", "h2", "h3", "h4", "h5", "h6"]

如果只希望生成目标内容区的 h2, h3 标签的目录，那么可以设置 selector: ["h2", "h3"]

activeHook [可选, Function]

当激活新的目录项标签的时候的回调函数

topMargin [可选, Number]

第一个目录标签在被认为可见之前需要向下移动的距离，默认值：0

bottomMargin [可选, Number]

同上，向下移动的距离，默认值：0

cool [可选, Boolean]

炫酷模式开关，默认值：true

网上的帖子大多深浅不一，甚至有些前后矛盾，在下的文章都是学习过程中的总结，如果发现错误，欢迎留言指出~

参考：

阮一峰 - SVG 图像入门教程

Codepen - Progress Nav

MDN - scrollIntoView

MDN - HTMLElement.dataset

PS：欢迎大家关注我的公众号【前端下午茶】，一起加油吧~

另外可以加入「前端下午茶交流群」微信群，长按识别下面二维码即可加我好友，备注加群，我拉你入群～

云服务器 GPU云服务器自动生成文章自动创建目录 php生成目录树 java的目录生成

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/96788.html

PHP-RabbitMQ学习日记（一）

摘要：通道，建立一个访问通道。队列，每个消息都会被投入到一个或多个队列。路由，根据这个关键字进行消息投递。消息消费者，就是接受消息的程序。给自己做一个记录本文主要介绍有一下 1.RabbitMQ是概念 2.RabbitMQ在windows上安装，启动，关闭 3.RabbitMQ其他小介绍下面一步一步走起来 1.RabbitMQ是概念 RabbitMQ是一个建立在AMQP（高级消息队列协...

SolomonXie 2019-06-28 14:23 评论0 收藏0
当大多数人对Vue理解到炉火纯青的时候，是不是该思考一下怎么让vue页面骚气起来

写在前面当大多数人Vue理解的炉火纯青的时候，你应该思考怎么让vue页面骚气起来，下面就我个人在接触Vue两年的时间里，在实际工作中门户网站在前端页面交互应用和技巧，炒几道小菜给大家分享一哈，我把它封装成一个项目vue-portal-webUI（github源码），不敢说是UI，但也是各种常见常遇到的情景吧，看懂代码需要一些vue、axios、es6、scss基础、数据基本上是mock，功能和场...

lingdududu 2019-08-26 12:12 评论0 收藏0