vue-side-catalog v2.0.0
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
elementdata(){ 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
andrefList
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; }
The effect is as follows::
Online example
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 attributesref (essential)RefName of the row directory objecttitle The 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 |
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago