# vue-catalog

> vue文章目录提取展示插件

Latest version **0.1.1** (published 2019-04-04) · MIT license · 0 weekly downloads

## Install

```sh
npm install vue-catalog
pnpm add vue-catalog
yarn add vue-catalog
bun add vue-catalog
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.1 |
| Published | 2019-04-04 |
| First published | 2019-04-04 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 455 KB |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| GitHub stars | 4 |
| Author | kdylan |
| Maintainers | kdylan |
| Keywords | vue, vue2, vue-catalog, catalog |

## Links

- npm: https://www.npmjs.com/package/vue-catalog
- Repository: https://github.com/k-dylan/vue-catalog
- Homepage: https://github.com/k-dylan/vue-catalog#readme
- Issues: https://github.com/k-dylan/vue-catalog/issues
- npm.io page: https://npm.io/package/vue-catalog

## Dependencies (1)

- [vue](https://npm.io/package/vue.md) ^2.6.6

## Alternatives

- [cli-color](https://npm.io/package/cli-color.md) — 3.4M weekly downloads
- [log](https://npm.io/package/log.md) — 1.3M weekly downloads
- [logstash-client](https://npm.io/package/logstash-client.md) — 4.5K weekly downloads
- [@nocobase/plugin-logger](https://npm.io/package/@nocobase/plugin-logger.md) — 2.0K weekly downloads
- [child-process-debug](https://npm.io/package/child-process-debug.md) — 695 weekly downloads

## Recent versions

- 0.1.1 (latest) — 2019-04-04
- 0.1.0 — 2019-04-04

## README

# vue-catalog
从html文章内容中提取目录结构，基于vue开发

## 安装
```sh
npm install --save vue-catalog
# or
yarn add vue-catalog
```

## 使用方法
```js
import {catalog, getCatalog} from 'vue-catalog';
export default {
  name: 'app',
  data () {
    return {
      catalog: {
        levels: [], // 有层级关系的目录结构数组
        noLevels: [], // 没有层级关系的目录结构数组
      }
    }
  },
  mounted () {
    // 获取文章目录结构
    let {levels, noLevels} = getCatalog(this.$refs.content)
    this.catalog = {
      levels,
      noLevels
    }
  },
  components: {
    catalog 
  }
}
```
- getCatalog：获取目录结构方法,有一个参数，要提取目录的dom节点对象或者节点ID；

- catalog： 目录显示插件，主要参数如下：

|参数名|类型|说明|默认|
|--|--|--|--|
|list|Array|要显示的目录结构（带层级），通过getCatalog提取|无|
|sequence|Array|要显示的目录结构（不带层级），如果未定义，则使用list中转换|无|
|catalogItemClassName|String|目录结构列表项class类名|catalog-item|
|curItemClassName|String|当前浏览的目录项class类名|catalog-item-cur|
|isShowCur|Boolean|是否为正在浏览的目录项添加类名|true|

---
_Source: https://npm.io/package/vue-catalog · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._