資訊專欄INFORMATION COLUMN
摘要：左邊的邊欄線則是使用的來畫出來的，根據(jù)層級相應(yīng)做一些調(diào)整，輔以的的效果就可以呈現(xiàn)出不錯的移動效果。
這個插件根據(jù)選定的目錄內(nèi)容中的 h1, h2, h3, h4, h5, h6 標(biāo)簽來自動生成目錄插入到選定的目錄容器中，并且提供一個漂亮的樣式效果
監(jiān)聽內(nèi)容區(qū)滾動
點擊跳轉(zhuǎn)功能
兼容性：IE10+ (由于使用了 node.classList)
地址戳這里 github地址，歡迎star，issue，pr ~
1. 預(yù)覽炫酷模式：
普通模式：
可以通過 線上DEMO 來預(yù)覽一下炫酷模式的效果
2. 實現(xiàn)思路滾動的監(jiān)聽通過 getBoundingClientRect 獲取元素大小以及相對視口的位置，判斷我們的監(jiān)聽對象 h1~h6 標(biāo)簽是否在視口中，如果在則添加 linkActiveClass 類。
傳統(tǒng)的錨點定位跳轉(zhuǎn)會與hash模式的單頁面應(yīng)用的路由沖突，會導(dǎo)航到錯誤的路由路徑，這里采用把要跳轉(zhuǎn)的id放到 dataset 中，跳轉(zhuǎn)的時候取出來使用 scrollIntoView 來進行平滑滾動到目標(biāo)位置。
左邊的邊欄線則是使用 svg 的path來畫出來的，根據(jù)層級相應(yīng)做一些調(diào)整，輔以css的 transition 的效果就可以呈現(xiàn)出不錯的移動效果。
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"]
})
構(gòu)造函數(shù)接受的參數(shù)：
contentEl [String]需要檢索生成目錄的內(nèi)容區(qū)的id選擇器，不需要加#
catalogEl [String]將生成的目錄append進的目錄容器的id選擇器，不需要加#
scrollWrapper [可選, String]監(jiān)聽scroll事件的內(nèi)容區(qū)容器的id選擇器，不需要加#，如果不填則默認是 contentEl 的父元素
linkClass [可選, String]所有目錄項都有的類，默認值：cl-link
注意，如果設(shè)置了此值，則需要重寫默認樣式
linkActiveClass [可選, String]激活的目錄項所有的類，默認值：cl-link-active
注意，如果設(shè)置了此值，則需要重寫默認樣式
selector [可選, Array]選擇目錄的標(biāo)題標(biāo)簽，默認值：["h1", "h2", "h3", "h4", "h5", "h6"]
如果只希望生成目標(biāo)內(nèi)容區(qū)的 h2, h3 標(biāo)簽的目錄，那么可以設(shè)置 selector: ["h2", "h3"]
activeHook [可選, Function]當(dāng)激活新的目錄項標(biāo)簽的時候的回調(diào)函數(shù)
topMargin [可選, Number]第一個目錄標(biāo)簽在被認為可見之前需要向下移動的距離，默認值：0
bottomMargin [可選, Number]同上，向下移動的距離，默認值：0
cool [可選, Boolean]炫酷模式開關(guān)，默認值：true
網(wǎng)上的帖子大多深淺不一，甚至有些前后矛盾，在下的文章都是學(xué)習(xí)過程中的總結(jié)，如果發(fā)現(xiàn)錯誤，歡迎留言指出~
參考：
阮一峰 - SVG 圖像入門教程
Codepen - Progress Nav
MDN - scrollIntoView
MDN - HTMLElement.dataset
PS：歡迎大家關(guān)注我的公眾號【前端下午茶】，一起加油吧~
另外可以加入「前端下午茶交流群」微信群，長按識別下面二維碼即可加我好友，備注加群，我拉你入群～
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/96788.html
摘要：通道，建立一個訪問通道。隊列，每個消息都會被投入到一個或多個隊列。路由，根據(jù)這個關(guān)鍵字進行消息投遞。消息消費者，就是接受消息的程序。 給自己做一個記錄 本文主要介紹有一下 1.RabbitMQ是概念 2.RabbitMQ在windows上安裝，啟動，關(guān)閉 3.RabbitMQ其他小介紹 下面一步一步走起來 1.RabbitMQ是概念 RabbitMQ是一個建立在AMQP（高級消息隊列協(xié)...
寫在前面 當(dāng)大多數(shù)人Vue理解的爐火純青的時候，你應(yīng)該思考怎么讓vue頁面騷氣起來，下面就我個人在接觸Vue兩年的時間里，在實際工作中門戶網(wǎng)站在前端頁面交互應(yīng)用和技巧，炒幾道小菜給大家分享一哈，我把它封裝成一個項目vue-portal-webUI（github源碼），不敢說是UI，但也是各種常見常遇到的情景吧，看懂代碼需要一些vue、axios、es6、scss基礎(chǔ)、數(shù)據(jù)基本上是mock，功能和場...
閱讀 2340·2023-04-26 00:01
閱讀 815·2021-10-27 14:13
閱讀 1857·2021-09-02 15:11
閱讀 3395·2019-08-29 12:52
閱讀 546·2019-08-26 12:00
閱讀 2578·2019-08-26 10:57
閱讀 3420·2019-08-26 10:32
閱讀 2862·2019-08-23 18:29
