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

Methods

Slot

GitHub