首页 >> js开发 >> js基于Vue的侧边目录组件的实现js大全
js基于Vue的侧边目录组件的实现js大全
发布时间: 2021年1月13日 | 浏览:
| 分类:js开发
最近要做一个侧边目录的功能，没有找到类似的组件，索性自己写了一个供大家参考vue-side-catalogvue-side-catalogvue-side-catalog一个基于vue的侧边目录组件。
源码地址：https://github.com/yaowei9363/vue-side-cataloghttps://github.com/yaowei9363/vue-side-catalog安装
npm install vue-side-catalog -S
npm install vue-side-catalog -S开始
v-bind="catalogProps"
>
import SideCatalog from 'vue-side-catalog'
import 'vue-side-catalog/lib/vue-side-catalog.css'
export default {
components: {
SideCatalog,
},
data() {
return {
catalogProps:{
containerElementSelector: '.demo',
},
};
},
}
v-bind="catalogProps"
>
import SideCatalog from 'vue-side-catalog'
import 'vue-side-catalog/lib/vue-side-catalog.css'
export default {
components: {
SideCatalog,
},
data() {
return {
catalogProps:{
containerElementSelector: '.demo',
},
};
},
}注意： containerElementSelector 属性是必需的，指定文章的容器。containerElementSelector效果如下图：
示例示例示例自定义目录标签组件默认会把containerElementSelector元素的直接子集的header标签作为目录内容,
对应规则为：
h2 => 一级目录
h3 => 二级目录
h4 => 三级目录
h5 => 四级目录
要修改这一规则可以使用 headList 属性，这个属性的默认值为["h2", "h3", "h4", "h5"]对应上述规则containerElementSelectorheaderh2一级目录h3二级目录h4三级目录h5四级目录headList["h2", "h3", "h4", "h5"]注意：自定义题目标签目前只支持containerElementSelector元素的直接子集的html标签containerElementSelector
data(){
return {
catalogProps:{
headList: ["h1", "h2", "h3", "h4", "h5"], // 使h1作为一级目录
// headList: ["h3", "h1", "p", "span"], // 指定不同的标签为目录
},
};
},
data(){
return {
catalogProps:{
headList: ["h1", "h2", "h3", "h4", "h5"], // 使h1作为一级目录
// headList: ["h3", "h1", "p", "span"], // 指定不同的标签为目录
},
};
},自定义目录元素自定义目录元素跟上面的自定义目录标签不同，自定义目录元素可以支持任意层级的含有ref属性的元素，也可以支持组件
需要用到 refList 属性任意层级含有ref属性的元素refList
//...
import Version from './components/Version';
export default {
components: {
// ...
Version,
},
data() {
return {
catalogProps:{
containerElementSelector: '.demo',
refList:[
{
ref: 't1'
},
{
ref: 't1-1',
level: 2 // 指定为二级目录
},
{
ref: 't1-2',
level: 2
},
{
ref: 't1-3',
level: 2
},
{
ref: 't2'
},
{
ref: 't3'
},
{
ref: 't4',
title: '版本' // 组件需要单独设置title(默认取innerText)
},
]
},
};
},
}
//...
import Version from './components/Version';
export default {
components: {
// ...
Version,
},
data() {
return {
catalogProps:{
containerElementSelector: '.demo',
refList:[
{
ref: 't1'
},
{
ref: 't1-1',
level: 2 // 指定为二级目录
},
{
ref: 't1-2',
level: 2
},
{
ref: 't1-3',
level: 2
},
{
ref: 't2'
},
{
ref: 't3'
},
{
ref: 't4',
title: '版本' // 组件需要单独设置title(默认取innerText)
},
]
},
};
},
}效果如下图：
注意：headList 和 refList 同时设置的话，会忽视headListheadListrefListheadList指定元素滚动指定元素滚动也可以使用 scrollElementSelector 对固定元素的内容生成目录，如果不指定该属性则默认监听Window的scroll事件scrollElementSelectorWindow
data(){
return {
catalogProps:{
scrollElementSelector: '.demo',
},
};
},
data(){
return {
catalogProps:{
scrollElementSelector: '.demo',
},
};
},
.demo {
height: 400px;
overflow: auto;
}
.demo {
height: 400px;
overflow: auto;
}效果如下图：
在线示例在线示例在线示例点击这里点击这里Props
Name
Type
Default
Description
headList
Array
["h2", "h3", "h4", "h5"]
为每级目录指定标签
refList
Array
-
为每级目录指定ref元素，数组每项为对象,包含两个属性
containerElementSelector
String
-
（必需）指定文章的容器
scrollElementSelector
String
Window
需要添加scroll事件的css选择器，默认监听window的scroll事件
openDomWatch
Boolean
false
是否开启dom监听，如果containerElementSelector中有dom变化会重新计算每级目录的offsetTop
Name
Type
Default
Description
Name
Type
Default
Description
NameTypeDefaultDescription
headList
Array
["h2", "h3", "h4", "h5"]
为每级目录指定标签
refList
Array
-
为每级目录指定ref元素，数组每项为对象,包含两个属性
containerElementSelector
String
-
（必需）指定文章的容器
scrollElementSelector
String
Window
需要添加scroll事件的css选择器，默认监听window的scroll事件
openDomWatch
Boolean
false
是否开启dom监听，如果containerElementSelector中有dom变化会重新计算每级目录的offsetTop
headList
Array
["h2", "h3", "h4", "h5"]
为每级目录指定标签
headListArray["h2", "h3", "h4", "h5"]为每级目录指定标签
refList
Array
-
为每级目录指定ref元素，数组每项为对象,包含两个属性
refListArray-为每级目录指定ref元素，数组每项为对象,包含两个属性
containerElementSelector
String
-
（必需）指定文章的容器
containerElementSelectorString-（必需）指定文章的容器
scrollElementSelector
String
Window
需要添加scroll事件的css选择器，默认监听window的scroll事件
scrollElementSelectorStringWindow需要添加scroll事件的css选择器，默认监听window的scroll事件
openDomWatch
Boolean
false
是否开启dom监听，如果containerElementSelector中有dom变化会重新计算每级目录的offsetTop
openDomWatchBooleanfalse是否开启dom监听，如果containerElementSelector中有dom变化会重新计算每级目录的offsetTopMethods
Name
Parameters
Description
initActive
-
使目录第一行处于active状态
setRefList
-
计算每级目录的offsetTop
Name
Parameters
Description
Name
Parameters
Description
NameParametersDescription
initActive
-
使目录第一行处于active状态
setRefList
-
计算每级目录的offsetTop
initActive
-
使目录第一行处于active状态
initActive-使目录第一行处于active状态
setRefList
-
计算每级目录的offsetTop
setRefList-计算每级目录的offsetTopSlot
Name
Description
-
目录的题目
Name
Description
Name
Description
NameDescription
-
目录的题目
-
目录的题目
-目录的题目以上就是本文的全部内容，希望对大家的学习有所帮助。
源码地址：https://github.com/yaowei9363/vue-side-cataloghttps://github.com/yaowei9363/vue-side-catalog安装
npm install vue-side-catalog -S
npm install vue-side-catalog -S开始
JavaScript
历史
肇始于网景
微软采纳
标准化
概论
特性
v-bind="catalogProps"
>
import SideCatalog from 'vue-side-catalog'
import 'vue-side-catalog/lib/vue-side-catalog.css'
export default {
components: {
SideCatalog,
},
data() {
return {
catalogProps:{
containerElementSelector: '.demo',
},
};
},
}
JavaScript
历史
肇始于网景
微软采纳
标准化
概论
特性
v-bind="catalogProps"
>
import SideCatalog from 'vue-side-catalog'
import 'vue-side-catalog/lib/vue-side-catalog.css'
export default {
components: {
SideCatalog,
},
data() {
return {
catalogProps:{
containerElementSelector: '.demo',
},
};
},
}注意： containerElementSelector 属性是必需的，指定文章的容器。containerElementSelector效果如下图：
示例示例示例自定义目录标签组件默认会把containerElementSelector元素的直接子集的header标签作为目录内容,
对应规则为：
h2 => 一级目录
h3 => 二级目录
h4 => 三级目录
h5 => 四级目录
要修改这一规则可以使用 headList 属性，这个属性的默认值为["h2", "h3", "h4", "h5"]对应上述规则containerElementSelectorheaderh2一级目录h3二级目录h4三级目录h5四级目录headList["h2", "h3", "h4", "h5"]注意：自定义题目标签目前只支持containerElementSelector元素的直接子集的html标签containerElementSelector
data(){
return {
catalogProps:{
headList: ["h1", "h2", "h3", "h4", "h5"], // 使h1作为一级目录
// headList: ["h3", "h1", "p", "span"], // 指定不同的标签为目录
},
};
},
data(){
return {
catalogProps:{
headList: ["h1", "h2", "h3", "h4", "h5"], // 使h1作为一级目录
// headList: ["h3", "h1", "p", "span"], // 指定不同的标签为目录
},
};
},自定义目录元素自定义目录元素跟上面的自定义目录标签不同，自定义目录元素可以支持任意层级的含有ref属性的元素，也可以支持组件
需要用到 refList 属性任意层级含有ref属性的元素refList
JavaScript
历史
肇始于网景
微软采纳
标准化
概论
特性
JavaScript
历史
肇始于网景
微软采纳
标准化
概论
特性
//...
import Version from './components/Version';
export default {
components: {
// ...
Version,
},
data() {
return {
catalogProps:{
containerElementSelector: '.demo',
refList:[
{
ref: 't1'
},
{
ref: 't1-1',
level: 2 // 指定为二级目录
},
{
ref: 't1-2',
level: 2
},
{
ref: 't1-3',
level: 2
},
{
ref: 't2'
},
{
ref: 't3'
},
{
ref: 't4',
title: '版本' // 组件需要单独设置title(默认取innerText)
},
]
},
};
},
}
//...
import Version from './components/Version';
export default {
components: {
// ...
Version,
},
data() {
return {
catalogProps:{
containerElementSelector: '.demo',
refList:[
{
ref: 't1'
},
{
ref: 't1-1',
level: 2 // 指定为二级目录
},
{
ref: 't1-2',
level: 2
},
{
ref: 't1-3',
level: 2
},
{
ref: 't2'
},
{
ref: 't3'
},
{
ref: 't4',
title: '版本' // 组件需要单独设置title(默认取innerText)
},
]
},
};
},
}效果如下图：
注意：headList 和 refList 同时设置的话，会忽视headListheadListrefListheadList指定元素滚动指定元素滚动也可以使用 scrollElementSelector 对固定元素的内容生成目录，如果不指定该属性则默认监听Window的scroll事件scrollElementSelectorWindow
data(){
return {
catalogProps:{
scrollElementSelector: '.demo',
},
};
},
data(){
return {
catalogProps:{
scrollElementSelector: '.demo',
},
};
},
.demo {
height: 400px;
overflow: auto;
}
.demo {
height: 400px;
overflow: auto;
}效果如下图：
在线示例在线示例在线示例点击这里点击这里Props
Name
Type
Default
Description
headList
Array
["h2", "h3", "h4", "h5"]
为每级目录指定标签
refList
Array
-
为每级目录指定ref元素，数组每项为对象,包含两个属性
- ref（必需）该行目录对象的refName
- title该行目录的名称（默认取innerText）
- level(默认为1)该行目录级别
containerElementSelector
String
-
（必需）指定文章的容器
scrollElementSelector
String
Window
需要添加scroll事件的css选择器，默认监听window的scroll事件
openDomWatch
Boolean
false
是否开启dom监听，如果containerElementSelector中有dom变化会重新计算每级目录的offsetTop
Name
Type
Default
Description
Name
Type
Default
Description
NameTypeDefaultDescription
headList
Array
["h2", "h3", "h4", "h5"]
为每级目录指定标签
refList
Array
-
为每级目录指定ref元素，数组每项为对象,包含两个属性
- ref（必需）该行目录对象的refName
- title该行目录的名称（默认取innerText）
- level(默认为1)该行目录级别
containerElementSelector
String
-
（必需）指定文章的容器
scrollElementSelector
String
Window
需要添加scroll事件的css选择器，默认监听window的scroll事件
openDomWatch
Boolean
false
是否开启dom监听，如果containerElementSelector中有dom变化会重新计算每级目录的offsetTop
headList
Array
["h2", "h3", "h4", "h5"]
为每级目录指定标签
headListArray["h2", "h3", "h4", "h5"]为每级目录指定标签
refList
Array
-
为每级目录指定ref元素，数组每项为对象,包含两个属性
- ref（必需）该行目录对象的refName
- title该行目录的名称（默认取innerText）
- level(默认为1)该行目录级别
refListArray-为每级目录指定ref元素，数组每项为对象,包含两个属性
- ref（必需）该行目录对象的refName
- title该行目录的名称（默认取innerText）
- level(默认为1)该行目录级别
containerElementSelector
String
-
（必需）指定文章的容器
containerElementSelectorString-（必需）指定文章的容器
scrollElementSelector
String
Window
需要添加scroll事件的css选择器，默认监听window的scroll事件
scrollElementSelectorStringWindow需要添加scroll事件的css选择器，默认监听window的scroll事件
openDomWatch
Boolean
false
是否开启dom监听，如果containerElementSelector中有dom变化会重新计算每级目录的offsetTop
openDomWatchBooleanfalse是否开启dom监听，如果containerElementSelector中有dom变化会重新计算每级目录的offsetTopMethods
Name
Parameters
Description
initActive
-
使目录第一行处于active状态
setRefList
-
计算每级目录的offsetTop
Name
Parameters
Description
Name
Parameters
Description
NameParametersDescription
initActive
-
使目录第一行处于active状态
setRefList
-
计算每级目录的offsetTop
initActive
-
使目录第一行处于active状态
initActive-使目录第一行处于active状态
setRefList
-
计算每级目录的offsetTop
setRefList-计算每级目录的offsetTopSlot
Name
Description
-
目录的题目
Name
Description
Name
Description
NameDescription
-
目录的题目
-
目录的题目
-目录的题目以上就是本文的全部内容，希望对大家的学习有所帮助。
刚刚发布热门点击发布时间
- [07/09]Chrome抓取页面内容代码|chrome插件获取页面数据
- [07/09]谷歌浏览器数据采集插件开发|谷歌浏览器的采集功能
- [07/09]Chrome插件轻松抓取网络数据,Chrome插件轻松抓取网页源码数据
- [07/09]chrome插件怎么安装?chrome插件开发如何安装chrome插件
- [07/09]快速chrome插件开发-北京chrome插件开发外包
- [12/31]清大光德落地护眼灯|清大光德儿童护眼灯
- [07/20]网站无障碍适老化外包改造私有化过程遇到问题整理
- [07/19]适老化改造工信部明确APP适老化规范：禁广告弹窗，网站需提供特大字体
- [07/19]适老化改造包括哪些方面?
- [07/19]什么是适老化改造？
- [07/19]适老化与信息无障碍是什么关系，二者有何异同？
- [07/19]网站如何进行适老化改造？
- [07/12]老年群体面临“数字鸿沟” 数字化网站适老化改造服务彰显人文关怀
- [07/12]数字适老化改造方案 老龄群体数字化改造受关注
- [07/11]什么是重绘?什么是回流?常见引起回流属性和方法：
