基于Vue的侧边目录组件的实现

2023-08-02 04:21:04 310

最近要做一个侧边目录的功能，没有找到类似的组件，索性自己写了一个供大家参考

vue-side-catalog

一个基于vue的侧边目录组件。

源码地址：https://github.com/yaowei9363/vue-side-catalog

安装

npminstallvue-side-catalog-S

开始


importSideCatalogfrom'vue-side-catalog'
import'vue-side-catalog/lib/vue-side-catalog.css'
exportdefault{
components:{
SideCatalog,
},
data(){
return{
catalogProps:{
containerElementSelector:'.demo',
},
};
},
}

注意：containerElementSelector属性是必需的，指定文章的容器。

效果如下图：

示例

自定义目录标签

组件默认会把containerElementSelector元素的直接子集的header标签作为目录内容,
对应规则为：
h2=>一级目录
h3=>二级目录
h4=>三级目录
h5=>四级目录
要修改这一规则可以使用headList属性，这个属性的默认值为["h2","h3","h4","h5"]对应上述规则

注意：自定义题目标签目前只支持containerElementSelector元素的直接子集的html标签

data(){
return{
catalogProps:{
headList:["h1","h2","h3","h4","h5"],//使h1作为一级目录
//headList:["h3","h1","p","span"],//指定不同的标签为目录
},
};
},

自定义目录元素

跟上面的自定义目录标签不同，自定义目录元素可以支持任意层级的含有ref属性的元素，也可以支持组件
需要用到refList属性

//...
importVersionfrom'./components/Version';
exportdefault{
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同时设置的话，会忽视headList

指定元素滚动

也可以使用scrollElementSelector对固定元素的内容生成目录，如果不指定该属性则默认监听Window的scroll事件

data(){
return{
catalogProps:{
scrollElementSelector:'.demo',
},
};
},

.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

Methods

Name	Parameters	Description
initActive	-	使目录第一行处于active状态
setRefList	-	计算每级目录的offsetTop

Slot

Name	Description
-	目录的题目

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

基于Vue的侧边目录组件的实现

JavaScript

历史

肇始于网景

微软采纳

标准化

概论

特性

JavaScript

随机推荐

基于Vue的侧边目录组件的实现

JavaScript

历史

肇始于网景

微软采纳

标准化

概论

特性

JavaScript

热门推荐

随机推荐