Awesome

vue-side-catalog

中文文档

v1.0

A vue-based side catalog component.

online example

Install

npm install vue-side-catalog -S

Start

<template>
 <div id="app">
   <div id="demo">
      <h1>JavaScript</h1>
      <h2>History</h2>
      <h3>Creation at Netscape</h3>
      <p>
        The Mosaic web browser was released in 1993. 
        As the first browser with a graphical user interface accessible to non-technical people, 
        it played a prominent role in the rapid growth of the nascent World Wide Web
      </p>
      <h3>Adoption by Microsoft</h3>
      <h3>The rise of JScript</h3>
      <h2>Trademark</h2>
      <h2>Website client-side usage</h2>
   </div>
  <side-catalog 
    class="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:{
         container: '#demo',
      },
    };
  },
}
<style>
  .catalog {
    position: fixed;
    top: 50px;
    right: 50px;
  }
</style>

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

The effect is as follows：

Custom catalog labels

By default, the component will use the <h> tag of a direct subset of the container element as the catalog content., The corresponding rule is:

• h2 => First level catalog

• h3 => Secondary catalog

• h4 => Tertiary catalog

• h5 => Fourth level catalog

To modify this rule, you can use the levelList 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 container element

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

h1 as first-level catalog:

Scrolling inside the container

You can use the innerScroll attribute to specify the scroll event to listen for container, if you do not specify this attribute, the default is to listen for Window

 data(){
    return {
      catalogProps:{
        container: '#demo',
        innerScroll: true,
        height: 'calc(100% - 20px)'
      },
    };
  },

Note：If the catalog is too long, you need to set a fixed height for the catalog to automatically scroll.You can use the height parameter, or add css directly from the outside

The effect is as follows:：

online example

Customize catalog style

You can customize each row of catalog or icon through slot

Custom icon

Iconfont is used here

  <side-catalog 
    class="catalog"
    v-bind="catalogProps"
  >
    <template #default="{level, isActive}">
      <i :class="['iconfont', isActive ? 'icon-smile' : 'icon-normal']"></i>
    </template>
  </side-catalog>

online example

Use the iconLeft parameter to align all icons to the left, and lineLeft to adjust the left line position

  <side-catalog 
    class="catalog"
    v-bind="catalogProps"
  >
    <template #default="{level, isActive}">
      <i :class="['line-style', isActive ? 'line-style--active' : '']"></i>
    </template>
  </side-catalog>

 data(){
    return {
      catalogProps:{
        container: "#demo",
        iconLeft: true,
        lineLeft: 0
      },
    };
  },

.line-style {
  display: inline-block;
  height: 20px;
  width: 3px;
  background: transparent;
}
.line-style--active {
  background: currentColor;
}

online example

Customize each line of catalog

  <side-catalog 
    class="catalog"
    v-bind="catalogProps"
  >
    <template #row="{level, isActive, title}">
      // ...
    </template>
  </side-catalog>

Props

Methods

Slot