Vue3 前端 引入 markmap 思维导图，通过markdown解析成思维导图
https://img-blog.csdnimg.cn/direct/86d06166dbcf46cb877e9c5476f152b6.png安装
//
npm install markmap-lib
//
npm install markmap-view
//
npm install markmap-common
完整代码
<script setup>
import { ref, onMounted, onUpdated } from 'vue'
import { Transformer } from 'markmap-lib'
import { Markmap } from 'markmap-view'
import * as htmlToImage from 'html-to-image'
import { saveAs } from 'file-saver'
const transformer = new Transformer()
const initValue = `
# 思维导图
1. 标题1
- 子标题1
- 子标题2
3. 标题2
4. 标题3
- beautiful
- useful
- easy
- interactive
`
const mm = ref()
const svgRef = ref()
const update = () => {
const { root } = transformer.transform(initValue)
mm.value.setData(root)
mm.value.fit()
}
const zoomIn = () => mm.value.rescale(1.25)
const zoomOut = () => mm.value.rescale(0.8)
const fitToScreen = () => mm.value.fit()
const onSave = async () => {
const dataUrl = await htmlToImage.toPng(svgRef.value)
saveAs(dataUrl, 'markmap.png')
}
onMounted(() => {
// 初始化markmap思维导图
mm.value = Markmap.create(svgRef.value)
// 更新思维导图渲染
update()
})
onUpdated(update)
</script>
<template>
<div class="mind">
<div class="svg-container">
<svg ref="svgRef"></svg>
</div>
<div class="controls">
<button @click="zoomIn">放大</button>
<button @click="zoomOut">缩小</button>
<button @click="fitToScreen">适应屏幕</button>
<button @click="onSave">下载</button>
</div>
</div>
</template>
<style lang="scss" scoped>
.mind {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
.svg-container {
flex: 1;
svg {
width: 100%;
height: 100%;
}
}
.controls {
display: flex;
justify-content: center;
align-items: center;
height: 50px;
}
}
.controls {
margin-top: 10px;
}
</style>
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]