ToB企服应用市场:ToB评测及商务社交产业平台

标题: Vue3 前端 引入 markmap 思维导图，通过markdown解析成思维导图 [打印本页]

---

作者: 南七星之家    时间: 2024-7-13 06:26
标题: Vue3 前端 引入 markmap 思维导图，通过markdown解析成思维导图

 安装

1. //
2. npm install markmap-lib
4. //
5. npm install markmap-view
7. //
8. npm install markmap-common

复制代码

 完整代码

1. <script setup>
2. import { ref, onMounted, onUpdated } from 'vue'
3. import { Transformer } from 'markmap-lib'
4. import { Markmap } from 'markmap-view'
5. import * as htmlToImage from 'html-to-image'
6. import { saveAs } from 'file-saver'
8. const transformer = new Transformer()
10. const initValue = `
11. # 思维导图
13. 1. 标题1
14. - 子标题1
15. - 子标题2
16. 3. 标题2
17. 4. 标题3
18. - beautiful
19. - useful
20. - easy
21. - interactive
22. `
24. const mm = ref()
25. const svgRef = ref()
27. const update = () => {
28.   const { root } = transformer.transform(initValue)
29.   mm.value.setData(root)
30.   mm.value.fit()
31. }
33. const zoomIn = () => mm.value.rescale(1.25)
35. const zoomOut = () => mm.value.rescale(0.8)
37. const fitToScreen = () => mm.value.fit()
39. const onSave = async () => {
40.   const dataUrl = await htmlToImage.toPng(svgRef.value)
42.   saveAs(dataUrl, 'markmap.png')
43. }
45. onMounted(() => {
46.   // 初始化markmap思维导图
47.   mm.value = Markmap.create(svgRef.value)
48.   // 更新思维导图渲染
49.   update()
50. })
52. onUpdated(update)
53. </script>
55. <template>
56.   <div class="mind">
57.     <div class="svg-container">
58.       <svg ref="svgRef"></svg>
59.     </div>
60.     <div class="controls">
61.       <button @click="zoomIn">放大</button>
62.       <button @click="zoomOut">缩小</button>
63.       <button @click="fitToScreen">适应屏幕</button>
64.       <button @click="onSave">下载</button>
65.     </div>
66.   </div>
67. </template>
69. <style lang="scss" scoped>
70. .mind {
71.   width: 100%;
72.   height: 100%;
73.   display: flex;
74.   flex-direction: column;
75.   .svg-container {
76.     flex: 1;
77.     svg {
78.       width: 100%;
79.       height: 100%;
80.     }
81.   }
82.   .controls {
83.     display: flex;
84.     justify-content: center;
85.     align-items: center;
86.     height: 50px;
87.   }
88. }
90. .controls {
91.   margin-top: 10px;
92. }
93. </style>

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

---

欢迎光临 ToB企服应用市场:ToB评测及商务社交产业平台 (https://dis.qidao123.com/)

Powered by Discuz! X3.4