基于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自动查找select下拉的菜单并选择(示例代码)
Feb 26 Javascript
项目中常用的JS方法整理
Jan 30 Javascript
使用pjax实现无刷新更改页面url
Feb 05 Javascript
jQuery选择器源码解读(一):Sizzle方法
Mar 31 Javascript
7个去伪存真的JavaScript面试题
Jan 07 Javascript
APP中javascript+css3实现下拉刷新效果
Jan 27 Javascript
微信小程序中hidden不生效原因的解决办法
Apr 26 Javascript
浅谈vue中慎用style的scoped属性
Nov 28 Javascript
React中如何引入Angular组件详解
Aug 09 Javascript
详解javascript 变量提升(Hoisting)
Mar 12 Javascript
uni app仿微信顶部导航条功能
Sep 17 Javascript
微信小程序开发数据缓存基础知识辨析及运用实例详解
Nov 06 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实现对数字分隔加千分号的方法
2019/03/18 PHP
firefox中用javascript实现鼠标位置的定位
2007/06/17 Javascript
深入理解JavaScript系列(15) 函数(Functions)
2012/04/12 Javascript
JS+ACTIVEX实现网页选择本地目录路径对话框
2013/03/18 Javascript
js函数排序的实例代码
2013/07/01 Javascript
浅析js中的浮点型运算问题
2014/01/06 Javascript
jquery+ajax+C#实现无刷新操作数据库数据的简单实例
2014/02/08 Javascript
两种方法实现在HTML页面加载完毕后运行某个js
2014/06/16 Javascript
浅谈EasyUI中Treegrid节点的删除
2015/03/01 Javascript
详解JavaScript的变量和数据类型
2015/11/27 Javascript
JavaScript职责链模式概述
2016/09/17 Javascript
js Canvas实现圆形时钟教程
2016/09/19 Javascript
jquery实现企业定位式导航效果
2018/01/01 jQuery
Vue中用props给data赋初始值遇到的问题解决
2018/11/27 Javascript
基于VSCode调试网页JavaScript代码过程详解
2020/07/20 Javascript
OpenLayers3实现测量功能
2020/09/25 Javascript
python3实现磁盘空间监控
2018/06/21 Python
Python实现点阵字体读取与转换的方法
2019/01/29 Python
Python实现打砖块小游戏代码实例
2019/05/18 Python
Python从列表推导到zip()函数的5种技巧总结
2019/10/23 Python
Python socket模块方法实现详解
2019/11/05 Python
css3media响应式布局实例
2016/07/08 HTML / CSS
利用CSS3把图片变成灰色模式的实例代码
2016/09/06 HTML / CSS
html5录音功能实战示例
2019/03/25 HTML / CSS
亚马逊西班牙购物网站:amazon西班牙
2017/03/06 全球购物
几个Linux面试题笔试题
2012/12/01 面试题
港湾网络笔试题
2014/04/19 面试题
打架检讨书2000字
2014/02/22 职场文书
土木工程专业本科生求职信
2014/10/01 职场文书
镇党委书记群众路线整改措施思想汇报
2014/10/13 职场文书
婚前协议书范本两则
2014/10/16 职场文书
2014年控辍保学工作总结
2014/12/08 职场文书
劳动争议仲裁代理词
2015/05/25 职场文书
python 使用Tensorflow训练BP神经网络实现鸢尾花分类
2021/05/12 Python
学会用Python实现滑雪小游戏,再也不用去北海道啦
2021/05/20 Python
python 爬取吉首大学网站成绩单
2021/06/02 Python