快捷導(dǎo)航

基于Vue的側(cè)邊目錄組件的實現(xiàn)

更新時間：2020年02月05日 08:30:19 作者：啊姚

這篇文章主要介紹了基于Vue的側(cè)邊目錄組件的實現(xiàn),文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

最近要做一個側(cè)邊目錄的功能，沒有找到類似的組件，索性自己寫了一個供大家參考

vue-side-catalog

一個基于vue的側(cè)邊目錄組件。

源碼地址：https://github.com/yaowei9363/vue-side-catalog

安裝

npm install vue-side-catalog -S

開始

<template>
 <div id="app">
  <div class="demo">
   <h1>JavaScript</h1>
   <h2>歷史</h2>
   <h3>肇始于網(wǎng)景</h3>
   <h3>微軟采納</h3>
   <h3>標(biāo)準(zhǔn)化</h3>
   <h2>概論</h2>
   <h2>特性</h2>
  </div>
 <side-catalog 
  v-bind="catalogProps"
 ></side-catalog>
 </div>
</template>
import SideCatalog from 'vue-side-catalog'
import 'vue-side-catalog/lib/vue-side-catalog.css'
export default {
 components: {
  SideCatalog,
 },
 data() {
  return {
   catalogProps:{
     containerElementSelector: '.demo',
   },
  };
 },
}

注意： containerElementSelector 屬性是必需的，指定文章的容器。

效果如下圖：

示例

自定義目錄標(biāo)簽

組件默認(rèn)會把containerElementSelector元素的直接子集的header標(biāo)簽作為目錄內(nèi)容,
對應(yīng)規(guī)則為：
h2 => 一級目錄
h3 => 二級目錄
h4 => 三級目錄
h5 => 四級目錄
要修改這一規(guī)則可以使用 headList 屬性，這個屬性的默認(rèn)值為["h2", "h3", "h4", "h5"]對應(yīng)上述規(guī)則

注意：自定義題目標(biāo)簽?zāi)壳爸恢С?code>containerElementSelector元素的直接子集的html標(biāo)簽

 data(){
  return {
   catalogProps:{
    headList: ["h1", "h2", "h3", "h4", "h5"], // 使h1作為一級目錄
    // headList: ["h3", "h1", "p", "span"], // 指定不同的標(biāo)簽為目錄
   },
  };
 },

自定義目錄元素

跟上面的自定義目錄標(biāo)簽不同，自定義目錄元素可以支持任意層級的含有ref屬性的元素，也可以支持組件
需要用到 refList 屬性

<template>
  <h1>JavaScript</h1>
  <h2 ref="t1">歷史</h2>
  <h3 ref="t1-1">肇始于網(wǎng)景</h3>
  <h3 ref="t1-2">微軟采納</h3>
  <h3 ref="t1-3">標(biāo)準(zhǔn)化</h3>
  <h2 ref="t2">概論</h2>
  <h2 ref="t3">特性</h2>
  <version ref="t4"/>
  <!-- ... -->
</template>

//...
import Version from './components/Version';
export default {
 components: {
  // ...
  Version,
 },
 data() {
  return {
   catalogProps:{
     containerElementSelector: '.demo',
     refList:[
     {
      ref: 't1'
     },
     {
      ref: 't1-1',
      level: 2 // 指定為二級目錄
     },
     {
      ref: 't1-2',
      level: 2
     },
     {
      ref: 't1-3',
      level: 2
     },
     {
      ref: 't2'
     },
     {
      ref: 't3'
     },
     {
      ref: 't4',
      title: '版本' // 組件需要單獨設(shè)置title(默認(rèn)取innerText)
     },
    ]
   },
  };
 },
}

效果如下圖：

注意：headList 和 refList 同時設(shè)置的話，會忽視headList

指定元素滾動

也可以使用 scrollElementSelector 對固定元素的內(nèi)容生成目錄，如果不指定該屬性則默認(rèn)監(jiān)聽Window的scroll事件

 data(){
  return {
   catalogProps:{
    scrollElementSelector: '.demo',
   },
  };
 },

.demo {
 height: 400px;
 overflow: auto;
}

效果如下圖：

在線示例

點擊這里

Props

Name	Type	Default	Description
headList	Array	["h2", "h3", "h4", "h5"]	為每級目錄指定標(biāo)簽
refList	Array	-	為每級目錄指定ref元素，數(shù)組每項為對象,包含兩個屬性<ul><li>ref（必需）該行目錄對象的refName</li><li>title該行目錄的名稱（默認(rèn)取innerText）</li><li>level(默認(rèn)為1)該行目錄級別</li></ul>
containerElementSelector	String	-	（必需）指定文章的容器
scrollElementSelector	String	Window	需要添加scroll事件的css選擇器，默認(rèn)監(jiān)聽window的scroll事件
openDomWatch	Boolean	false	是否開啟dom監(jiān)聽，如果containerElementSelector中有dom變化會重新計算每級目錄的offsetTop