vue-article-view

项目简要说明 + 示例图

Table of Contents

• Introduction
• Feature
• Demo
• Install
• Example
• Reference
• Contributors
• License

Introduction

⬆ Back to Top

Feature

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

⬆ Back to Top

Demo

• doc and online 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