基于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 相关文章推荐
jQuery ajax 路由和过滤器使用说明
Aug 02 Javascript
js中继承的几种用法总结(apply,call,prototype)
Dec 26 Javascript
基于jquery实现的文字向上跑动类似跑马灯的效果
Jun 17 Javascript
window.location.reload 刷新使用分析(去对话框)
Nov 11 Javascript
js改变html的原有内容实现方法
Oct 05 Javascript
关于JavaScript中事件绑定的方法总结
Oct 26 Javascript
bootstrap 通过加减按钮实现输入框组功能
Nov 15 Javascript
JS 实现百度搜索功能
Feb 01 Javascript
JS函数节流和防抖之间的区分和实现详解
Jan 11 Javascript
Node.js中出现未捕获异常的处理方法
Jun 29 Javascript
JavaScript undefined及null区别实例解析
Jul 21 Javascript
Vue-router编程式导航的两种实现代码
Mar 04 Vue.js
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 应用程序的安全 -- 不能违反的四条安全规则
2006/11/26 PHP
基于wordpress主题制作的具体实现步骤
2013/05/10 PHP
thinkPHP学习笔记之安装配置篇
2015/03/05 PHP
合格的PHP程序员必备技能
2015/11/13 PHP
thinkPHP3.1验证码的简单实现方法
2016/04/22 PHP
php格式文件打开的四种方法
2018/02/24 PHP
jquery的flexigrid无法显示数据提示获取到数据
2013/07/19 Javascript
js 本地预览的简单实现方法
2014/02/18 Javascript
编程语言JavaScript简介
2014/10/16 Javascript
详解JavaScript中数组和字符串的lastIndexOf()方法使用
2016/03/13 Javascript
老生常谈JavaScript数组的用法
2016/06/10 Javascript
JavaScript实战之菜单特效
2016/08/16 Javascript
深入理解(function(){... })();
2016/08/16 Javascript
JavaScript中的ajax功能的概念和示例详解
2016/10/17 Javascript
vue一个页面实现音乐播放器的示例
2018/02/06 Javascript
vue指令只能输入正数并且只能输入一个小数点的方法
2018/06/08 Javascript
vue实现循环切换动画
2018/10/17 Javascript
JS实现判断有效的数独算法示例
2019/02/25 Javascript
javascript设计模式 ? 职责链模式原理与用法实例分析
2020/04/16 Javascript
js实现弹幕墙效果
2020/12/10 Javascript
[52:02]DOTA2-DPC中国联赛 正赛 Phoenix vs Dragon BO3 第二场 2月26日
2021/03/11 DOTA
Python通过RabbitMQ服务器实现交换机功能的实例教程
2016/06/29 Python
Django中的Model操作表的实现
2018/07/24 Python
python得到电脑的开机时间方法
2018/10/15 Python
使用python对文件中的单词进行提取的方法示例
2018/12/21 Python
通过celery异步处理一个查询任务的完整代码
2019/11/19 Python
OpenCV 使用imread()函数读取图片的六种正确姿势
2020/07/09 Python
基于python实现判断字符串是否数字算法
2020/07/10 Python
信息系统专业个人求职信范文
2013/12/07 职场文书
先进德育工作者事迹材料
2014/01/24 职场文书
奥巴马获胜演讲稿
2014/05/15 职场文书
学校党委干部个人对照检查材料思想汇报
2014/10/09 职场文书
2015年社区计生工作总结
2015/04/21 职场文书
邹越演讲观后感
2015/06/15 职场文书
物业公司管理制度
2015/08/05 职场文书
灵能百分百第三季什么时候来?
2022/03/15 日漫