vue-article-view

项目简要说明 + 示例图

Usage no npm install needed!

<script type="module">
  import vueArticleView from 'https://cdn.skypack.dev/vue-article-view';
</script>

README

vue-article-view

Build Status NPM Download NPM Version NPM License PRs Welcome Automated Release Notes by gren

项目简要说明 + 示例图

Table of Contents

Introduction

⬆ Back to Top

Feature

  • 自动生成文章导航
  • 自动计算文章标题之间的距离,滚动到对应距离会对对应标题进行高亮
  • 文章滚动,右侧文章导航跟随滚动
  • 解析 markdown

⬆ Back to Top

Demo

⬆ Back to Top

Install

npm i -S vue-article-view or yarn add vue-article-view

⬆ Back to Top

Example

  • 普通模式
<template>
  <div class="basic-page">
      <vue-article-view :content="content" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      content: ''
    }
  },
  mounted() {
    fetch('./static/demo.html').then(res => res.text())
      .then(res => {
        this.content = res
      })
  }
}
</script>
  • 渲染模式为 markdown
<template>
  <div class="mode-page">
    <vue-article-view
      v-show="!loading"
      :content="content"
      mode="markdown"
      @loading="handleLoading"
      @loaded="handleLoaded"
    />
    <div class="loading-wrap" v-show="loading">
        <div class="donut"></div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      content: '',
      loading: false
    }
  },
  mounted() {
    this.loading = true
    fetch('./static/demo.md').then(res => res.text())
      .then(res => {
        setTimeout(() => this.content = res, 500)
      })
  },
  methods: {
    // 内部开始执行计算
    handleLoading() {
      console.log('loading')
    },
    handleLoaded() {
      console.log('loaded')
      this.loading = false
    }
  }
}
</script>

⬆ Back to Top

Reference

⬆ Back to Top

Contributors

Thanks goes to these wonderful people (emoji key):

This project follows the all-contributors specification. Contributions of any kind welcome!

⬆ Back to Top

License

MIT

⬆ Back to Top