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


Posted in Javascript onFebruary 05, 2020

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

vue-side-catalog

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

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

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

安装

npm install vue-side-catalog -S

开始

<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',
   },
  };
 },
}
注意: containerElementSelector 属性是必需的,指定文章的容器。

效果如下图:

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

示例

自定义目录标签

组件默认会把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"], // 指定不同的标签为目录
   },
  };
 },

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

自定义目录元素

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

<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 // 指定为二级目录
     },
     {
      ref: 't1-2',
      level: 2
     },
     {
      ref: 't1-3',
      level: 2
     },
     {
      ref: 't2'
     },
     {
      ref: 't3'
     },
     {
      ref: 't4',
      title: '版本' // 组件需要单独设置title(默认取innerText)
     },
    ]
   },
  };
 },
}

效果如下图:

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

注意:headListrefList 同时设置的话,会忽视headList

指定元素滚动

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

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

效果如下图:

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

在线示例

点击这里

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
- 目录的题目

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js 目录列举函数
Nov 06 Javascript
扒一扒JavaScript 预解释
Jan 28 Javascript
JavaScript中的fontsize()方法使用详解
Jun 08 Javascript
jquery插件unobtrusive实现片段式加载
Jun 15 Javascript
jquery 获取select数组与name数组长度的实现代码
Jun 20 Javascript
探讨AngularJs中ui.route的简单应用
Nov 16 Javascript
详解Vue 动态添加模板的几种方法
Apr 25 Javascript
angularjs之$timeout指令详解
Jun 13 Javascript
node.js支持多用户web终端实现及安全方案
Nov 29 Javascript
NW.js 简介与使用方法
Feb 01 Javascript
微信小程序页面间传值与页面取值操作实例分析
Apr 30 Javascript
VUE项目初建和常见问题总结
Sep 12 Javascript
Js视频播放器插件Video.js使用方法详解
Feb 04 #Javascript
jQuery单页面文字搜索插件jquery.fullsearch.js的使用方法
Feb 04 #jQuery
JS代码优化的8点建议
Feb 04 #Javascript
9种方法优化jQuery代码详解
Feb 04 #jQuery
JS代码检查工具ESLint介绍与使用方法
Feb 04 #Javascript
使用typescript改造koa开发框架的实现
Feb 04 #Javascript
Vue解析剪切板图片并实现发送功能
Feb 04 #Javascript
You might like
PHP GD 图像处理组件的常用函数总结
2010/04/28 PHP
php中关于普通表单多文件上传的处理方法
2011/03/25 PHP
隐性调用php程序的方法
2015/06/13 PHP
php开发微信支付获取用户地址
2015/10/04 PHP
Yii 实现数据加密和解密
2021/03/09 PHP
初识JQuery 实例一(first)
2011/03/16 Javascript
在Ubuntu上安装最新版本的Node.js
2014/07/14 Javascript
探寻Javascript执行效率问题
2014/11/12 Javascript
微信浏览器内置JavaScript对象WeixinJSBridge使用实例
2015/05/25 Javascript
详解JavaScript编程中的数组结构
2015/10/24 Javascript
js中的事件委托或是事件代理使用详解
2017/06/23 Javascript
微信小程序实现图片预览功能
2018/01/31 Javascript
vue+koa2实现session、token登陆状态验证的示例
2019/08/30 Javascript
jQuery实现小火箭返回顶部特效
2020/02/03 jQuery
vue treeselect获取当前选中项的label实例
2020/08/31 Javascript
[01:46]2020完美世界全国高校联赛秋季赛报名开启
2020/10/15 DOTA
python网络编程学习笔记(一)
2014/06/09 Python
Python用list或dict字段模式读取文件的方法
2017/01/10 Python
python select.select模块通信全过程解析
2017/09/20 Python
python http接口自动化脚本详解
2018/01/02 Python
django之对FileField字段的upload_to的设定方法
2019/07/28 Python
python小白切忌乱用表达式
2020/05/29 Python
Python生成器next方法和send方法区别详解
2020/05/30 Python
美国战术品牌:5.11 Tactical
2019/05/01 全球购物
简述网络文件系统NFS,并说明其作用
2016/10/19 面试题
后勤服务中心总经理工作职责
2014/03/03 职场文书
2014大学生全国两会学习心得体会
2014/03/13 职场文书
关键在于落实心得体会
2014/09/03 职场文书
2015年中秋节演讲稿
2015/03/20 职场文书
2015年小学数学教研组工作总结
2015/05/21 职场文书
全陪导游词开场白
2015/05/29 职场文书
初中语文教学反思范文
2016/03/03 职场文书
ES6 解构赋值的原理及运用
2021/05/25 Javascript
Opencv实现二维直方图的计算及绘制
2021/07/21 Python
Python字符串格式化方式
2022/04/07 Python
canvas 中如何实现物体的框选
2022/08/05 Javascript