【前言】%(&(&……()*
最近刚好做了个项目,给大家分享一个Vue3 TS setup 如何引入 markmap 思维导图,markmap可以通过markdown解析成思维导图。我们如何将它集成到自己项目中?
【看图】还是先看图再继续
【文档】官方也有文档,如果这个帖子沉了,大家可以直接去官方找最新的
-
官网文档 http://markmap.js.org
-
官方示例 https://markmap.js.org/repl
【实战】如何继承到Vue3项目中
- 添加依赖
pnpm add markmap-lib
pnpm add markmap-view
... tailwindcss
- 创建vue文件
<template>
<div class="flex-1">
<textarea class="w-full h-full border border-gray-400" v-model="value" />
</div>
<svg class="flex-1" ref="svgRef" />
</template>
<script lang="ts" setup>
import { ref, onMounted, onUpdated } from 'vue';
import { Transformer } from 'markmap-lib';
import { Markmap } from 'markmap-view/dist/index.esm';
const transformer = new Transformer();
const initValue = `# 思维导图
1. 标题1
- 子标题1
- 子标题2
3. 标题2
4. 标题3
`;
const mm = ref()
const value = ref('')
const svgRef = ref()
const update = () =>{
const { root } = transformer.transform(value.value);
mm.value.setData(root);
mm.value.fit();
}
watch(()=>value.value,(n)=>{
// 监听输入变化更新思维导图
update()
})
onMounted(()=>{
// 初始化markmap思维导图
mm.value = Markmap.create(svgRef.value);
value.value = initValue.value
// 更新思维导图渲染
update();
})
</script>
ps: 可以集成到chatgpt,具体怎么搞大家先自己玩,路子很多也很野