基于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实现的在当前窗口中漂浮框的代码
Mar 15 Javascript
jquery插件珍藏(图片局部放大/信息提示框)
Jan 08 Javascript
Javascript中的匿名函数与封装介绍
Mar 15 Javascript
jQuery中(function($){})(jQuery)详解
Jul 15 Javascript
jQuery EasyUI之DataGrid使用实例详解
Jan 04 Javascript
体验jQuery和AngularJS的不同点及AngularJS的迷人之处
Feb 02 Javascript
分享12个非常实用的JavaScript小技巧
May 11 Javascript
概述VUE2.0不可忽视的很多变化
Sep 25 Javascript
jquery滚动条插件(可以自定义)
Dec 11 Javascript
Javascript实现页面滚动时导航智能定位
May 06 Javascript
vue使用stompjs实现mqtt消息推送通知
Jun 22 Javascript
vue-cli开发环境实现跨域请求的方法
Apr 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
PHP 超链接 抓取实现代码
2009/06/29 PHP
基于php-fpm 参数的深入理解
2013/06/03 PHP
一个js封装的不错的选项卡效果代码
2008/02/15 Javascript
基于jquery的返回顶部效果(兼容IE6)
2011/01/17 Javascript
autoPlay 基于jquery的图片自动播放效果
2011/12/07 Javascript
随窗体滑动的小插件sticky源码
2013/06/21 Javascript
javascript之IE版本检测超简单方法
2016/08/20 Javascript
AngularJS 单元测试(二)详解
2016/09/21 Javascript
bootstrap的常用组件和栅格式布局详解
2017/05/02 Javascript
angular-ngSanitize模块-$sanitize服务详解
2017/06/13 Javascript
JavaScript实用代码小技巧
2018/08/23 Javascript
详解vantUI框架在vue项目中的应用踩坑
2018/12/06 Javascript
初学node.js中实现删除用户路由
2019/05/27 Javascript
详解基于 Node.js 的轻量级云函数功能实现
2019/07/08 Javascript
layui实现下拉框三级联动
2019/07/26 Javascript
弱类型语言javascript开发中的一些坑实例小结【变量、函数、数组、对象、作用域等】
2019/08/07 Javascript
python解决网站的反爬虫策略总结
2016/10/26 Python
python安装Scrapy图文教程
2017/08/14 Python
教你使用python画一朵花送女朋友
2018/03/29 Python
在python下读取并展示raw格式的图片实例
2019/01/24 Python
Python面向对象思想与应用入门教程【类与对象】
2019/04/12 Python
python针对mysql数据库的连接、查询、更新、删除操作示例
2019/09/11 Python
2021年值得向Python开发者推荐的VS Code扩展插件
2021/01/25 Python
HTML5+CSS3 实现灵动的动画 TAB 切换效果(DEMO)
2017/09/15 HTML / CSS
欧洲顶级体育电子商务网站:SportsShoes.com
2018/03/27 全球购物
英文自荐信
2013/12/15 职场文书
优秀女职工事迹材料
2014/02/06 职场文书
档案室主任岗位职责
2014/02/12 职场文书
小学课外阅读总结
2014/07/09 职场文书
2014红色之旅心得体会
2014/10/07 职场文书
2014年居委会工作总结
2014/12/09 职场文书
导游词400字
2015/02/13 职场文书
党员读书活动心得体会
2016/01/14 职场文书
运动会主持人开幕词
2016/03/04 职场文书
2019最新公司租房合同(例文)
2019/07/18 职场文书
CSS3 实现NES游戏机的示例代码
2021/04/21 HTML / CSS