vue-side-catalog

WebJar for vue-side-catalog

License

License

MIT
Categories

Categories

IDE Development Tools
GroupId

GroupId

org.webjars.npm
ArtifactId

ArtifactId

vue-side-catalog
Last Version

Last Version

2.0.0
Release Date

Release Date

Type

Type

jar
Description

Description

vue-side-catalog
WebJar for vue-side-catalog
Project URL

Project URL

https://www.webjars.org
Source Code Management

Source Code Management

https://github.com/yaowei9363/vue-side-catalog

Download vue-side-catalog

How to add to project

<!-- https://jarcasting.com/artifacts/org.webjars.npm/vue-side-catalog/ -->
<dependency>
    <groupId>org.webjars.npm</groupId>
    <artifactId>vue-side-catalog</artifactId>
    <version>2.0.0</version>
</dependency>
// https://jarcasting.com/artifacts/org.webjars.npm/vue-side-catalog/
implementation 'org.webjars.npm:vue-side-catalog:2.0.0'
// https://jarcasting.com/artifacts/org.webjars.npm/vue-side-catalog/
implementation ("org.webjars.npm:vue-side-catalog:2.0.0")
'org.webjars.npm:vue-side-catalog:jar:2.0.0'
<dependency org="org.webjars.npm" name="vue-side-catalog" rev="2.0.0">
  <artifact name="vue-side-catalog" type="jar" />
</dependency>
@Grapes(
@Grab(group='org.webjars.npm', module='vue-side-catalog', version='2.0.0')
)
libraryDependencies += "org.webjars.npm" % "vue-side-catalog" % "2.0.0"
[org.webjars.npm/vue-side-catalog "2.0.0"]

Dependencies

compile (2)

Group / Artifact Type Version
org.webjars.npm : lodash.debounce jar [4.0.8,5)
org.webjars.npm : lodash.throttle jar [4.1.1,5)

Project Modules

There are no modules declared in this project.

vue-side-catalog

中文文档

v1.0

A vue-based side catalog component. intro

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:

start.png

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:

levelList.png

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::

innerScroll.gif

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>

icon.png

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

leftIcon.gif online example

Customize each line of catalog

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

Props

Name Type Default Description
container String - (necessary)Specify the article's container
innerScroll Boolean false Whether to scroll inside the container
activeColor String #006bff Color when in current catalog
levelGap Number 20 Offsets of different levels of directories
iconLeft Boolean false Whether the icon of each level of catalog is left aligned and does not follow the offset
lineLeft Number 22 The left value of the left line of the catalog
lineShow Boolean true Whether to show the left line of the catalog
title String - Title at the top of the table of contents
height String - The height of the catalog can be set to the value of height in css.When the catalog is too long and exceeds the height, it will automatically scroll to the current catalog.Of course, you can also set the height directly in the parent component
watch Boolean false Whether to enable dom monitoring, if there is a dom change in container, it will recalculate the offsetTop of each level of catalog.For example, using v-html dynamic rendering, or folding the panel to expand and collapse, etc. need to be recalculated
levelList Array ["h2", "h3", "h4", "h5"] Assign tags to each level of catalog

Methods

Name Parameters Description
initActive - Make the first line of the catalog active
setTopList - Calculate the offsetTop of each level of the catalog. When the deviation between the article and the catalog does not correspond, you can call this method to recalculate

Slot

Name Description
default Customize the icon of each line of catalog, the parameter is {level, isActive}
row Customize each line of catalog, the parameter is {level, isActive, title}

Versions

Version
2.0.0