應(yīng)用場(chǎng)景
1私植、系統(tǒng)開(kāi)發(fā)說(shuō)明文檔
效果如下
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 文檔
靜態(tài)文檔資源存放在“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>
