A Catalog Component for Vue.js

vue-side-catalog

A vue-based side catalog component.

Install

npm install vue-side-catalog -S

Start

<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',
      },
    };
  },
}

Note: The containerElementSelector attribute is required and specifies the container of the article.

The effect is as follows:

Examples

Custom catalog labels

By default, the component will use the header tag of a direct subset of thecontainerElementSelector element as the directory content.,
The corresponding rule is:

  • h2 => First level directory

  • h3 => Secondary directory

  • h4 => Tertiary directory

  • h5 => Fourth level directory

To modify this rule, you can use the headList attribute. The default value of this attribute is["h2", "h3", "h4", "h5"]corresponding to the above rule

Note: Custom title tags currently only support html tags that are a direct subset of the containerElementSelector element

 data(){
    return {
      catalogProps:{
        headList: ["h1", "h2", "h3", "h4", "h5"], // make h1 a first-level directory
        // headList: ["h3", "h1", "p", "span"], // specifying different tags as directories
      },
    };
  },

h1 as first-level directory:

Custom catalog elements

Unlike the custom directory tags above, custom directory elements can support elements with ref attributes ofany level, as well as components
Requires refList properties

<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 // designated as a secondary directory
          },
          {
            ref: 't1-2',
            level: 2
          },
          {
            ref: 't1-3',
            level: 2
          },
          {
            ref: 't2'
          },
          {
            ref: 't3'
          },
          {
            ref: 't4',
            title: '版本' // the component needs to set the title separately (the innerText is taken by default)
          },
        ]
      },
    };
  },
}

The effect is as follows:

Note: If headList and refList are set at the same time, headList will be ignored.

Specify element scroll

You can also use scrollElementSelector to generate a directory for the content of a fixed element. If this attribute is not specified, the scroll event ofWindow is listened to by default.

 data(){
    return {
      catalogProps:{
        scrollElementSelector: '.demo',
      },
    };
  },
.demo {
  height: 400px;
  overflow: auto;
}

效果如下图:

Props

Name Type Default Description
headList Array ["h2", "h3", "h4", "h5"] Assign tags to each level of the directory
refList Array - Specify the ref element for each level of the directory, each item of the array is an object, and contains two attributes
  • refessential)RefName of the row directory object
  • titleThe name of the line directory (defaults to innerText)
  • level(Default is 1) the line directory level
containerElementSelector String - essential)Specify the container for the article
scrollElementSelector String Window Need to add a CSS selector for the scroll event, and listen to the scroll event of the Window by default
openDomWatch Boolean false Whether to enable dom monitoring. If there is a dom change in containerElementSelector, the offsetTop of each ref will be recalculated.

Methods

Name Parameters Description
initActive - Make the first line of the directory active
setRefList - Calculate the offsetTop of each level directory

Slot

Name Description
- Title of Directory

GitHub