基於Vue的側邊目錄組件

最近要作一個側邊目錄的功能，沒有找到相似的組件，索性本身寫了一個供你們參考

vue-side-catalog

一個基於vue的側邊目錄組件。

源碼地址：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>肇始於網景</h3>
      <h3>微軟採納</h3>
      <h3>標準化</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 屬性是必需的，指定文章的容器。

效果以下圖：

示例

自定義目錄標籤

組件默認會把containerElementSelector元素的直接子集的header標籤做爲目錄內容,
對應規則爲：
h2 => 一級目錄
h3 => 二級目錄
h4 => 三級目錄
h5 => 四級目錄
要修改這一規則能夠使用 headList 屬性，這個屬性的默認值爲["h2", "h3", "h4", "h5"]對應上述規則

注意：自定義題目標籤目前只支持 containerElementSelector元素的直接子集的html標籤

data(){
    return {
      catalogProps:{
        headList: ["h1", "h2", "h3", "h4", "h5"], // 使h1做爲一級目錄
        // headList: ["h3", "h1", "p", "span"], // 指定不一樣的標籤爲目錄
      },
    };
  },

自定義目錄元素

跟上面的自定義目錄標籤不一樣，自定義目錄元素能夠支持任意層級的含有ref屬性的元素，也能夠支持組件
須要用到 refList 屬性

<template>
    <h1>JavaScript</h1>
    <h2 ref="t1">歷史</h2>
    <h3 ref="t1-1">肇始於網景</h3>
    <h3 ref="t1-2">微軟採納</h3>
    <h3 ref="t1-3">標準化</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: '版本' // 組件須要單獨設置title(默認取innerText)
          },
        ]
      },
    };
  },
}

效果以下圖：

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

指定元素滾動

也能夠使用 scrollElementSelector 對固定元素的內容生成目錄，若是不指定該屬性則默認監聽Window的scroll事件

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

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

效果以下圖：

在線示例

點擊這裏

Props

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

Methods

Name	Parameters	Description
initActive	-	使目錄第一行處於active狀態
setRefList	-	計算每級目錄的offsetTop

Slot

Name	Description
-	目錄的題目