基于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 相关文章推荐
Gird组件 Part-3:范例RSSFeed Viewer
Mar 10 Javascript
javascript框架设计之浏览器的嗅探和特征侦测
Jun 23 Javascript
JavaScript实现下拉列表框数据增加、删除、上下排序的方法
Aug 11 Javascript
React.js入门学习第一篇
Mar 30 Javascript
jquery 全选、全不选、反选效果的实现代码【推荐】
May 05 Javascript
JavaScript作用域示例详解
Jul 07 Javascript
AngularJS extend用法详解及实例代码
Nov 15 Javascript
详解Vue-基本标签和自定义控件
Mar 24 Javascript
JS实现图片手风琴效果
Apr 17 Javascript
详解vue-router 路由元信息
Sep 13 Javascript
vue实现的请求服务器端API接口示例
May 25 Javascript
JS实现瀑布流效果
Mar 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
php5 apache 2.2 webservice 创建与配置(java)
2011/01/27 PHP
手把手编写PHP框架 深入了解MVC运行流程
2016/09/19 PHP
php版微信支付api.mch.weixin.qq.com域名解析慢原因与解决方法
2016/10/12 PHP
Gambit vs ForZe BO3 第三场 2.13
2021/03/10 DOTA
javascript编程起步(第三课)
2007/02/27 Javascript
鼠标滑上去后图片放大浮出效果的js代码
2011/05/28 Javascript
基于jquery的图片轮播 tab切换组件
2012/07/19 Javascript
Jquery中children与find之间的区别详细解析
2013/11/29 Javascript
JS+CSS实现弹出全屏灰黑色透明遮罩效果的方法
2014/12/20 Javascript
浅析Node.js中的内存泄漏问题
2015/06/23 Javascript
Node.js实现数据推送
2016/04/14 Javascript
angular4实现tab栏切换的方法示例
2017/10/21 Javascript
vue 运用mock数据的示例代码
2017/11/07 Javascript
微信小程序实现列表下拉刷新上拉加载
2020/07/29 Javascript
Vue Element 分组+多选+可搜索Select选择器实现示例
2018/07/23 Javascript
elementUI 设置input的只读或禁用的方法
2018/10/30 Javascript
微信小程序使用scroll-view标签实现自动滑动到底部功能的实例代码
2018/11/09 Javascript
详解Vue项目中实现锚点定位
2019/04/24 Javascript
Python open读写文件实现脚本
2008/09/06 Python
python读取csv文件示例(python操作csv)
2014/03/11 Python
python中使用xlrd、xlwt操作excel表格详解
2015/01/29 Python
python中关于for循环的碎碎念
2017/06/30 Python
对Python中Iterator和Iterable的区别详解
2018/10/18 Python
Python选择网卡发包及接收数据包
2019/04/04 Python
如何实现Django Rest framework版本控制
2019/07/25 Python
如何Tkinter模块编写Python图形界面
2020/10/14 Python
selenium学习教程之定位以及切换frame(iframe)
2021/01/04 Python
英国知名美妆护肤在线商城:Zest Beauty
2018/04/24 全球购物
优秀应届毕业生自荐信
2013/11/16 职场文书
历史教育专业个人求职信
2013/12/13 职场文书
教你打造完美的创业计划书
2014/01/06 职场文书
班级安全教育实施方案
2014/02/23 职场文书
领导干部个人对照检查材料(群众路线)
2014/09/26 职场文书
神农溪导游词
2015/02/11 职场文书
CSS3实现模糊背景的三种效果示例
2021/03/30 HTML / CSS
Go Plugins插件的实现方式
2021/08/07 Golang