应用场景

1、系统开发说明文档

效果如下

1739257310455.png

vue

<template>
  <mavon-editor
    v-model="content"
    :editable="false"
    :subfield="false"
    defaultOpen="preview"
    :toolbarsFlag="false"
    :navigation="true"
    class="docs-md"
    v-if="content"
  />
</template>

加载本地文档

export const getLocalFileContent = (path) => {
  return request({
    baseURL:path,
    method: 'get',
  });
};

解析本地md 文档

静态文档资源存放在“src->assets->docs”文件目录下

export const requireDocs = (filePath) => {
  let newPath = new URL(`/src/assets/docs/${filePath}`, import.meta.url).href;
  return newPath;
};

完整示例

<template>
  <mavon-editor
    v-model="content"
    :editable="false"
    :subfield="false"
    defaultOpen="preview"
    :toolbarsFlag="false"
    :navigation="true"
    class="docs-md"
    v-if="content"
  />
</template>
<script lang="ts" setup>
import { getLocalFileContent } from '@/api';
import { requireDocs } from '@/utils/require';
// console.log('md', md);
let path = requireDocs('intstance/ssh/ssh.md');
const content = ref(``);
onMounted(() => {
  getLocalFileContent(path)
    .then((res) => {
      content.value = res;
    })
    .catch((error) => {
      console.error('Error fetching the Markdown file:', error);
    });
});
</script>
<style>
.docs-md{
  height: 100%;
  .single-show.v-note-show{
    max-width:calc(100% - 260px)
  }
  .v-note-navigation-close{
    display: none;
  }
}
</style>