vue-catalogue

1.0.1 • Public • Published

说明

这是一个文章目录组件,用于生成文章的目录,并附带平滑滚动和目录定位功能。

示例

目录示例

快速开始

npm install --save vue-catalogue
<template>
  <div>
    <div id="article" v-html="content" />
    <Catalogue selector="#article" />
  </div>
</template>
 
<script>
import Catalogue from 'vue-catalogue'
export default {
  components: { Catalogue }
}
</script>

配置项

样式采用stylus,使用前请确保安装相应的依赖。默认配置一共三项,组件部分细节如下:

export default {
    ···
    props: {
        selector: {
          type: String,
          required: true // 必须项,文章元素对应的选择器
        },
        title: {
          type: String,
          default: '目录'
        },
        asyncData: {
          type: Boolean,
          default: true
        }
    },
    ···
}

关于asyncData配置项的说明:一般来说,文章的内容都是通过ajax请求异步获取并渲染到页面上的,这意味着页面初始化时,目录组件是无法获取到dom元素的。以下是内部实现细节,通过父组件的updated钩子来触发目录组件的初始化。

···
mounted () {
    if (this.asyncData) {
        this.$parent.$once('hook:updated', this.init)
    } else {
        this.init()
    }
}
···

当然,如果你的文章内容是同步数据(即dom节点在组件初始化时已经存在在页面中),那么您可以通过设置:asyncData: false

<Catalogue selector="#article" :asyncData="false" />

当然,组件十分简单,总共不过200行代码,除去模板和样式,也许只有100行。如果您愿意,完全可以将组件从node_modules中拿出来自行修改。

Readme

Keywords

Package Sidebar

Install

npm i vue-catalogue

Weekly Downloads

1

Version

1.0.1

License

MIT

Unpacked Size

25.1 kB

Total Files

7

Last publish

Collaborators

  • qxy6675