基于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 相关文章推荐
javascript编程起步(第二课)
Feb 27 Javascript
JS 非图片动态loading效果实现代码
Apr 09 Javascript
关于javascript DOM事件模型的两件事
Jul 22 Javascript
js实现在页面上弹出蒙板技巧简单实用
Apr 16 Javascript
AngularJS内置指令
Feb 04 Javascript
javascript常用函数(2)
Nov 05 Javascript
[原创]jQuery常用的4种加载方式分析
Jul 25 Javascript
js判断出两个字符串最大子串的函数实现方法
Nov 01 Javascript
webpack入门必知必会
Jan 16 Javascript
浅谈react受控组件与非受控组件(小结)
Feb 09 Javascript
vue watch普通监听和深度监听实例详解(数组和对象)
Aug 16 Javascript
Vue Echarts实现可视化世界地图代码实例
May 07 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
全国FM电台频率大全 - 13 福建省
2020/03/11 无线电
PHP安全的URL字符串base64编码和解码
2014/06/19 PHP
PHP钩子与简单分发方式实例分析
2017/09/04 PHP
PHP实现用户登录的案例代码
2018/05/10 PHP
php使用goto实现自动重启swoole、reactphp、workerman服务的代码
2020/04/13 PHP
传递参数的标准方法(jQuery.ajax)
2008/11/19 Javascript
多浏览器支持的右下角浮动窗口
2010/04/01 Javascript
Javascript 中的 &amp;&amp; 和 || 使用小结
2010/04/25 Javascript
基于JavaScript实现动态创建表格和增加表格行数
2015/12/20 Javascript
利用jquery正则表达式在页面验证url网址输入是否正确
2017/04/04 jQuery
Vue 2.0入门基础知识之内部指令详解
2017/10/15 Javascript
JsChart组件使用详解
2018/03/04 Javascript
JS实现Cookie读、写、删除操作工具类示例
2018/08/28 Javascript
基于vue-upload-component封装一个图片上传组件的示例
2018/10/16 Javascript
Vue 实时监听窗口变化 windowresize的两种方法
2018/11/06 Javascript
微信小程序绘制图片发送朋友圈
2019/07/25 Javascript
JS控制下拉列表左右选择实例代码
2020/05/08 Javascript
js实现可爱的气泡特效
2020/09/05 Javascript
Python实现定时任务
2017/02/08 Python
使用python分析统计自己微信朋友的信息
2019/07/19 Python
django如何实现视图重定向
2019/07/24 Python
python+OpenCV实现车牌号码识别
2019/11/08 Python
django框架中ajax的使用及避开CSRF 验证的方式详解
2019/12/11 Python
python线程池如何使用
2020/05/28 Python
Jmeter调用Python脚本实现参数互相传递的实现
2021/01/22 Python
IMPORT的选项IGNORE有什么作用?缺省是什么设置?
2015/09/17 面试题
四个太阳教学反思
2014/02/01 职场文书
承诺书的格式范文
2014/03/28 职场文书
党支部换届选举方案
2014/05/08 职场文书
八项规定对照检查材料
2014/08/31 职场文书
傲慢与偏见读书笔记
2015/06/29 职场文书
2016重阳节红领巾广播稿
2015/12/18 职场文书
干部理论学习心得体会
2016/01/21 职场文书
检讨书范文
2019/04/16 职场文书
MySQL索引失效的典型案例
2021/06/05 MySQL
CSS中妙用 drop-shadow 实现线条光影效果
2021/11/11 HTML / CSS