189 8069 5689

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

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

创新互联-专业网站定制、快速模板网站建设、高性价比青川网站开发、企业建站全套包干低至880元,成熟完善的模板库,直接使用。一站式青川网站制作公司更省心,省钱,快速模板网站建设找我们，业务覆盖青川地区。费用合理售后完善，10余年实体公司更值得信赖。

vue-side-catalog

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

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

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

安装

npm install vue-side-catalog -S

开始


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 属性是必需的，指定文章的容器。

效果如下图：

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

示例

自定义目录标签

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

注意：自定义题目标签目前只支持containerElementSelector元素的直接子集的html标签
 data(){
  return {
   catalogProps:{
    headList: ["h2", "h3", "h4", "h5", "h6"], // 使h2作为一级目录
    // headList: ["h4", "h2", "p", "span"], // 指定不同的标签为目录
   },
  };
 },

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

自定义目录元素

跟上面的自定义目录标签不同，自定义目录元素可以支持任意层级的含有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)
     },
    ]
   },
  };
 },
}

效果如下图：

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

注意：headList 和 refList 同时设置的话，会忽视headList

指定元素滚动

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

 data(){
  return {
   catalogProps:{
    scrollElementSelector: '.demo',
   },
  };
 },
.demo {
 height: 400px;
 overflow: auto;
}

效果如下图：

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

在线示例

点击这里

Props

NameTypeDefaultDescription
headListArray["h3", "h4", "h5", "h6"]为每级目录指定标签
refListArray-为每级目录指定ref元素，数组每项为对象,包含两个属性
  • ref（必需）该行目录对象的refName
  • title该行目录的名称（默认取innerText）
  • level(默认为1)该行目录级别
containerElementSelectorString-（必需）指定文章的容器
scrollElementSelectorStringWindow需要添加scroll事件的css选择器，默认监听window的scroll事件
openDomWatchBooleanfalse是否开启dom监听，如果containerElementSelector中有dom变化会重新计算每级目录的offsetTop

Methods

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

Slot

NameDescription
-目录的题目

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


名称栏目：基于Vue的侧边目录组件的实现
文章链接：http://cdxtjz.cn/article/pdccoj.html

其他资讯