基于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的渐进增强与平稳退化浅谈
Nov 12 Javascript
FF(火狐)浏览器无法执行window.close()解决方案
Nov 13 Javascript
Node.js读写文件之批量替换图片的实现方法
Sep 07 Javascript
JS 事件绑定、事件监听、事件委托详细介绍
Sep 28 Javascript
正则表达式,替换所有HTML标签的简单实例
Nov 28 Javascript
jQuery插件zTree实现的多选树效果示例
Mar 08 Javascript
JS关于刷新页面的相关总结
May 09 Javascript
jQuery实现输入框的放大和缩小功能示例
Jul 21 jQuery
详解vue-cli 3.0 build包太大导致首屏过长的解决方案
Nov 10 Javascript
angular2 NgModel模块的具体使用方法
Apr 10 Javascript
解决vant中 tab栏遇到的坑 van-tabs
Nov 04 Javascript
解决Vue-cli3没有vue.config.js文件夹及配置vue项目域名的问题
Dec 04 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
使用无限生命期Session的方法
2006/10/09 PHP
Wordpress 相册插件 NextGEN-Gallery 添加目录将中文转为拼音的解决办法
2010/12/29 PHP
通过dbi使用perl连接mysql数据库的方法
2014/04/16 PHP
Ubuntu下安装PHP的mongodb扩展操作命令
2015/07/04 PHP
WordPress分页伪静态加html后缀
2016/06/08 PHP
PHP生成制作验证码的简单实例
2016/06/12 PHP
PHP对象克隆clone用法示例
2016/09/28 PHP
Yii2配置Nginx伪静态的方法
2017/05/05 PHP
PHP CURL与java http使用方法详解
2018/01/26 PHP
利用PHP如何统计Nginx日志的User Agent数据
2019/03/06 PHP
google地图的路线实现代码
2009/08/20 Javascript
学习JavaScript设计模式(接口)
2015/11/26 Javascript
JS实现DIV容器赋值的方法
2015/12/14 Javascript
浅谈javascript 函数表达式和函数声明的区别
2016/01/05 Javascript
Bootstrap入门教程一Hello Bootstrap初识
2017/03/02 Javascript
JS实现table表格内针对某列内容进行即时搜索筛选功能
2018/05/11 Javascript
JS实现数组的增删改查操作示例
2018/08/29 Javascript
Vue-component全局注册实例
2018/09/06 Javascript
vue中各种通信传值方式总结
2019/02/14 Javascript
详解关闭令人抓狂的ESlint 语法检测配置方法
2019/10/28 Javascript
[46:55]Ti4 冒泡赛第二轮 LGD vs C9
2014/07/14 DOTA
Python lxml模块安装教程
2015/06/02 Python
Python函数式编程指南(四):生成器详解
2015/06/24 Python
详解Python如何获取列表(List)的中位数
2016/08/12 Python
python实现随机梯度下降(SGD)
2020/03/24 Python
Python 字符串换行的多种方式
2018/09/06 Python
判断python对象是否可调用的三种方式及其区别详解
2019/01/31 Python
Python实战之制作天气查询软件
2019/05/14 Python
Python协程 yield与协程greenlet简单用法示例
2019/11/22 Python
python安装mysql的依赖包mysql-python操作
2021/01/01 Python
现代化办公人员工作的自我评价
2013/10/16 职场文书
护理中职生求职信范文
2014/02/24 职场文书
珍惜时间演讲稿
2014/05/14 职场文书
施工安全承诺书
2014/05/22 职场文书
高等教育学专业自荐书
2014/06/17 职场文书
领导班子四风对照检查材料
2014/09/23 职场文书