yaowei9363 / vue-side-catalog

A Catalog Component for Vue.js

vue-side-catalog

中文文档

v1.0

A vue-based side catalog component.

online example

Install

npm install vue-side-catalog -S

Start

<template>
 <div id="app">
   <div id="demo">
      <h1>JavaScript</h1>
      <h2>History</h2>
      <h3>Creation at Netscape</h3>
      <p>
        The Mosaic web browser was released in 1993. 
        As the first browser with a graphical user interface accessible to non-technical people, 
        it played a prominent role in the rapid growth of the nascent World Wide Web
      </p>
      <h3>Adoption by Microsoft</h3>
      <h3>The rise of JScript</h3>
      <h2>Trademark</h2>
      <h2>Website client-side usage</h2>
   </div>
  <side-catalog 
    class="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:{
         container: '#demo',
      },
    };
  },
}
<style>
  .catalog {
    position: fixed;
    top: 50px;
    right: 50px;
  }
</style>

Note： The container attribute is required and specifies the container of the article.

The effect is as follows：

Custom catalog labels

By default, the component will use the <h> tag of a direct subset of the container element as the catalog content., The corresponding rule is:

• h2 => First level catalog

• h3 => Secondary catalog

• h4 => Tertiary catalog

• h5 => Fourth level catalog

To modify this rule, you can use the levelList attribute. The default value of this attribute is["h2", "h3", "h4", "h5"]corresponding to the above rule

Note: Custom title tags currently only support html tags that are a direct subset of the container element

 data(){
    return {
      catalogProps:{
        levelList: ["h1", "h2", "h3", "h4", "h5"], // make h1 a first-level catalog
        // levelList: ["h3", "h1", "p", "span"], // specifying different tags as directories
      },
    };
  },

h1 as first-level catalog:

Scrolling inside the container

You can use the innerScroll attribute to specify the scroll event to listen for container, if you do not specify this attribute, the default is to listen for Window

 data(){
    return {
      catalogProps:{
        container: '#demo',
        innerScroll: true,
        height: 'calc(100% - 20px)'
      },
    };
  },

Note：If the catalog is too long, you need to set a fixed height for the catalog to automatically scroll.You can use the height parameter, or add css directly from the outside

The effect is as follows:：

online example

Customize catalog style

You can customize each row of catalog or icon through slot

Custom icon

Iconfont is used here

  <side-catalog 
    class="catalog"
    v-bind="catalogProps"
  >
    <template #default="{level, isActive}">
      <i :class="['iconfont', isActive ? 'icon-smile' : 'icon-normal']"></i>
    </template>
  </side-catalog>

online example

---

Use the iconLeft parameter to align all icons to the left, and lineLeft to adjust the left line position

  <side-catalog 
    class="catalog"
    v-bind="catalogProps"
  >
    <template #default="{level, isActive}">
      <i :class="['line-style', isActive ? 'line-style--active' : '']"></i>
    </template>
  </side-catalog>

 data(){
    return {
      catalogProps:{
        container: "#demo",
        iconLeft: true,
        lineLeft: 0
      },
    };
  },

.line-style {
  display: inline-block;
  height: 20px;
  width: 3px;
  background: transparent;
}
.line-style--active {
  background: currentColor;
}

online example

Customize each line of catalog

  <side-catalog 
    class="catalog"
    v-bind="catalogProps"
  >
    <template #row="{level, isActive, title}">
      // ...
    </template>
  </side-catalog>

Props

Name	Type	Default	Description
container	String	-	(necessary)Specify the article's container
innerScroll	Boolean	false	Whether to scroll inside the container
activeColor	String	#006bff	Color when in current catalog
levelGap	Number	20	Offsets of different levels of directories
iconLeft	Boolean	false	Whether the icon of each level of catalog is left aligned and does not follow the offset
lineLeft	Number	22	The left value of the left line of the catalog
lineShow	Boolean	true	Whether to show the left line of the catalog
title	String	-	Title at the top of the table of contents
height	String	-	The height of the catalog can be set to the value of height in css.When the catalog is too long and exceeds the height, it will automatically scroll to the current catalog.Of course, you can also set the height directly in the parent component
watch	Boolean	false	Whether to enable dom monitoring, if there is a dom change in container, it will recalculate the offsetTop of each level of catalog.For example, using v-html dynamic rendering, or folding the panel to expand and collapse, etc. need to be recalculated
levelList	Array	["h2", "h3", "h4", "h5"]	Assign tags to each level of catalog

Methods

Name	Parameters	Description
initActive	-	Make the first line of the catalog active
setTopList	-	Calculate the offsetTop of each level of the catalog. When the deviation between the article and the catalog does not correspond, you can call this method to recalculate

Slot

Name	Description
default	Customize the icon of each line of catalog, the parameter is {level, isActive}
row	Customize each line of catalog, the parameter is {level, isActive, title}

vue-side-catalog's Issues

动态渲染V-html时组件失效

大佬请问setTopList这个方法如何使用，能不能给个例子

不能复用吗？

一个项目里面多个页面使用时，所有目录列表都一样了，目录叠加

大佬，现在使用refList时， 定义了t1, t1-1, t1-2, t1-3, t2, t2-1, t2-2, t2-3, 滚动时， 内容还在t1, 右侧的目录 显示在t2那几层了，删掉t2那基层，内容和 目录 才对应上。怎么解决

Describe your problem or other（描述你的问题或其他）

I found a problem ...

The addresses of the codesandbox to reproduce the problem（复现问题的codesandbox地址）

Fork the example of the corresponding version below, reproduce the problem, and give the link（fork下列对应版本的示例，重现问题，并给出链接）

• v1.x
• v2.x

e.g. https://codesandbox.io/s/vue-side-catalog-template-19vq4?file=/src/App.vue

Please complete the following information:

• Browser [e.g. chrome, safari]
• Version [e.g. 1.0.5]

v-html动态渲染的内容无法生成目录

v-html动态渲染的内容无法生成目录

v-html动态渲染的内容无法生成目录，已把watch设为true开启了dom监听

codesandbox地址：https://codesandbox.io/s/vue-side-catalogv2lefticon-forked-vp5ng?file=/src/App.vue

• Browser [e.g. chrome, safari]
• Version [e.g. 1.0.5]

右侧目录超出页面时可以自动滚动吗

当右侧目录很长，超过页面高度时，可以自动将当前目录移动页面高度中心吗？
https://juejin.im/post/5eb3bac66fb9a043271c64e9
比如上面链接中右侧的目录很长，可以保持把当前目录位置在页面中心吗

只能通过标签名来生成目录吗？

可以同过类名来层级生成目录吗？

使用v-html的时候没法显示目录

使用v-html的时候无法加载目录，或者目录只能显示一下，不改代码，刷新就没了。
具体的代码：

<template>
<div>
    <div v-if="article.course"><h1>{{ article.course }}:{{ article.title }}</h1></div>
    <div v-else><h1>{{ article.title }}</h1></div>
    <br><br>
    <div id="article" align="left" v-html="articlebody"></div>
    <side-catalog class="catalog" v-bind="catalogProps"></side-catalog>
</div>
</template>

<script>
// @ is an alias to /src
// import HelloWorld from '@/components/HelloWorld.vue'
import marked from 'marked';
import hljs from "highlight.js";
import 'highlight.js/styles/atom-one-light.css'
import axios from 'axios';
import SideCatalog from 'vue-side-catalog';
import 'vue-side-catalog/lib/vue-side-catalog.css'

export default {
    name: 'ArticleDetail',
    components: {
        SideCatalog,
    },
    data () {
        return {
            article: '',
            articlebody: '',
            catalogProps: {
                container: "#article",
                title: "目录"
            },
        }
    },
    methods: {
        getArticle () {
            axios.get('http://127.0.0.1:8000/api/articles/' + this.$route.params.id)
            .then(this.getArticleSucc)
        },
        getArticleSucc (res) {
            this.article = res.data
            this.articlebody = res.data.body
            marked.setOptions({
            renderer: new marked.Renderer(),
            gfm: true,
            tables: true,
            breaks: false,
            pedantic: false,
            sanitize: false,
            smartLists: true,
            smartypants: false,
            highlight: function(code) {
                return hljs.highlightAuto(code).value;
            },
        })
            this.articlebody = marked(this.articlebody)
        },
    },
    mounted () {
        this.getArticle()
    },
}

</script>

<style>
.catalog {
    position: fixed;
    top: 100px;
    right: 50px;
}
</style>

这个是我包含axios请求数据的全部代码，使用marked.js解析，文章是可以正常显示的，但是目录的地方就只能看见上面的文字，没有内容，就像这样：

成功的时候像这样（不改代码刷新就没了）：

如果是代码的问题，求路过的大佬帮帮忙；如果是包的问题，希望赶快解决。
在线急等

refList属性删掉了吗，不能用了吗

有没有支持vue3的版本？

使用vue3,安装时报错，发现貌似只支持vue2,请问能有vue3版本吗？

无法显示 目录

代码：

                <div id="codeView" class="entry-content" v-highlight >
                    <div id="blog_content" v-html="blog.content">{{blog.content}}</div>
                    <side-catalog class="catalog" v-bind="catalogProps"></side-catalog>
                </div>

import SideCatalog from "vue-side-catalog";
import "vue-side-catalog/lib/vue-side-catalog.css";

data(){
return{
catalogProps:{
container: '#blog_content',
title: "Contents",
levelList: ["h1", "h2", "h3", "h4", "h5"],
},
id:"",
showDonate: false,
blog:"",
comments: [],
imgUrl:"",

        }
    },

components: {
Banner,
sectionTitle,
SideCatalog,
},

页面上就显示着Contents的标题
都按着文档上写了 不知道哪里有问题

页面内容如果是通过v-html，无法加载侧边栏的问题

您好，非常感谢你提供的目录侧边栏插件。但是我们使用的过程中遇到了问题，就是假设我的内容是通过v-html动态生成的，例如下面的样子
<div class="news_con ck-content" v-html="blogData.content" >
那么我的目录无法显示，但是如果是静态的内容的话，是能够正常加载的

当页面的标题过多时，侧边栏无法展示全部的内容

Describe your problem or other（描述你的问题或其他）
您好，我现在遇到一个问题就是，当页面的标题过多时，侧边栏无法展示全部的内容， 异常示例

The addresses of the codesandbox to reproduce the problem（复现问题的codesandbox地址）
Fork the example and reproduce the problem（fork该示例，并重现问题）

codesanbox地址

Please complete the following information:

• Browser：Chrome
• Version： 1.0.5

示例使用refList报错

在demo中修改成使用refList报错：
Error in mounted hook (Promise/async): "TypeError: Cannot read property '_isVue' of undefined"

子组件获取不到父组件的ref

处于页面顶端时老是会跳到目录处

目录在 top 450px处 上面有个图片，header
在页面顶端时 老是会强制跳到当前目录
设置height: "calc(100% - 100px)", 也是一样 就很烦
有什么办法消除这个跳转效果？

请问为什么点击右侧的目录，左侧内容不会随着跳转呢

这是codesandbox地址：https://codesandbox.io/s/gallant-northcutt-w27rb6?file=/src/App.vue
vue2写的，实在找不到问题所在