vue-markdown-doc

vue-markdown-doc

vue的markdown组件，可渲染markdown文件

安装

NPM

$ npm install --save vue-markdown-doc

Yarn

$ yarn add vue-markdown-doc

示例代码

<template>
  <div id="app">
      <MarkdownDoc
              :images="images"
              :mdRaw="mdRaw"
              :prevPage="{
                  title: 'SmartLinkTree 树',
                  url: '/docs/components/smart-link-tree'
              }"
              :nextPage="{
                  title: 'smartLinkInput 输入框',
                  url: '/docs/components/smart-link-input'
              }"
      />
  </div>
</template>

<script>
import "vue-markdown-doc/lib/index.css";
import MarkdownDoc from "vue-markdown-doc";

export default {
  name: 'FormDoc',
  components: {
      MarkdownDoc
  },
  data() {
    return {
      mdRaw: require('./component.md').default,
      images: {
          'todo-ui-form.png': require('./images/todo-ui-form.png')
      }
    }
  }
}
</script>

raw-loader

获取.md文件流需要使用raw-loader，配置参考官方文档

使用vue-cli的raw-loader配置

配置vue.config.js

function resolve(dir) {
    return path.join(__dirname, dir);
}

module.exports = {
    ...,
    chainWebpack: config => {
        config.module
            .rule('raw-loader')
            .test(/\.md$/)
            .use('raw-loader')
            .loader('raw-loader')
            .end()
    }
}

VueMarkdownDoc props

参数	类型	说明	默认值
mdRaw	String	markdown字符串	-
images	Object	配置markdown中使用的图片，对于上例，在markdown中使用图片的格式为：{{"image": "todo-ui-form.png","width":1000,"height":530}}	-
prevPage	Object	格式：{title: String, url: String}，配置上一个模块的跳转	-
nextPage	Object	格式：{title: String, url: String}，配置下一个模块的跳转	-
navFix	Boolean	目录栏固定在顶端	true
scrollElementParent	Object	页面滚动事件挂载的dom元素	window