基于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面象对象设计
Apr 28 Javascript
jQuery.Autocomplete实现自动完成功能(详解)
Jul 13 Javascript
JavaScript中的this关键字介绍与使用实例
Jun 21 Javascript
js实现索引图片切换效果
Nov 21 Javascript
javascript生成img标签的3种实现方法(对象、方法、html)
Dec 25 Javascript
javascript用正则表达式过滤空格的实现代码
Jun 14 Javascript
浅谈Javascript中的函数、this以及原型
Oct 09 Javascript
深入浅析Vue组件开发
Nov 25 Javascript
javascript中this用法实例详解
Apr 06 Javascript
Easyui使用Dialog行内按钮布局的实例
Jul 27 Javascript
vue组件文档(.md)中如何自动导入示例(.vue)详解
Jan 25 Javascript
如何正确解决VuePress本地访问出现资源报错404的问题
Dec 03 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
codeigniter使用技巧批量插入数据实例方法分享
2013/12/31 PHP
php switch语句多个值匹配同一代码块应用示例
2014/07/29 PHP
php实现的SSO单点登录系统接入功能示例分析
2016/10/12 PHP
PHP XML和数组互相转换详解
2016/10/26 PHP
利用Laravel事件系统如何实现登录日志的记录详解
2017/05/20 PHP
借用Google的Javascript API Loader来加速你的网站
2009/01/28 Javascript
js点击页面其它地方将某个显示的DIV隐藏
2012/07/12 Javascript
js仿新浪微博消息发布功能
2017/02/17 Javascript
小程序云开发初探(小结)
2018/10/24 Javascript
JS实现判断数组是否包含某个元素示例
2019/05/24 Javascript
微信小程序图片左右摆动效果详解
2019/07/13 Javascript
原生js拖拽实现图形伸缩效果
2020/02/10 Javascript
JS实现随机点名器
2020/04/12 Javascript
玩转python selenium鼠标键盘操作(ActionChains)
2020/04/12 Python
Python学习小技巧之列表项的排序
2017/05/20 Python
python读取LMDB中图像的方法
2018/07/02 Python
python Django中models进行模糊查询的示例
2019/07/18 Python
关于Python3 类方法、静态方法新解
2019/08/30 Python
Python装饰器实现方法及应用场景详解
2020/03/26 Python
Python获取excel内容及相关操作代码实例
2020/08/10 Python
CSS3实现简易版的刮刮乐效果
2016/09/27 HTML / CSS
利用HTML5 Canvas API绘制矩形的超级攻略
2016/03/21 HTML / CSS
Finishline官网:美国一家领先的运动品牌鞋类、服装零售商
2016/07/20 全球购物
Bailey帽子官方商店:Bailey Hats
2018/09/25 全球购物
街头时尚在线:JESSICABUURMAN
2019/06/16 全球购物
Interflora澳大利亚:同日鲜花速递
2019/06/25 全球购物
Aquatalia官网:意大利著名鞋履品牌
2019/09/26 全球购物
迷你西餐厅创业计划书范文
2013/12/31 职场文书
学生会招新策划书
2014/02/14 职场文书
文明寄语大全
2014/04/11 职场文书
小学生评语大全
2014/04/18 职场文书
暑期培训心得体会
2014/09/02 职场文书
党员演讲稿
2014/09/04 职场文书
婚礼迎宾词大全
2015/08/10 职场文书
2016入党心得体会范文
2016/01/06 职场文书
Django + Taro 前后端分离项目实现企业微信登录功能
2022/04/07 Python