Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

vue-catalogue

Package Overview
Dependencies
Maintainers
1
Versions
1
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

vue-catalogue

make a catalog for articles

  • 1.0.1
  • latest
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
0
decreased by-100%
Maintainers
1
Weekly downloads
 
Created
Source

说明

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

示例

目录示例

快速开始

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中拿出来自行修改。

Keywords

FAQs

Package last updated on 22 Apr 2020

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc