vue3 markMap使用

安装依赖

pnpm install markmap-lib
pnpm install markmap-view
pnpm install markmap-common

vue代码

<template>
	<div class="markmap-container">
		<svg ref="svgRef" style="width: 100%; height: 100%; border: 1px solid #ccc;"></svg>
	</div>
</template>

<script setup>
	import {
		ref,
		onMounted,
		watch
	} from "vue";
	import {
		Markmap
	} from "markmap-view";
	import {
		Transformer
	} from "markmap-lib";

	// Markdown内容
	const initValue = `# 礼物交换

## 张三
- 给李四一瓶酒 🍾
- 给王五一瓶酒 🍾

## 李四
- 收到张三一瓶酒 🍾
- 给王五一包烟 🚬

## 王五
- 收到李四一包烟 🚬
- 收到张三一瓶酒 🍾`;

	// 引用和响应式数据
	const svgRef = ref(null); // 改为svgRef
	const markmapInstance = ref(null); // 改为更清晰的变量名
	const transformer = new Transformer();

	// 更新思维导图的方法
	const updateMarkmap = async () => {
		if (!markmapInstance.value || !initValue) return;

		try {
			const {
				root
			} = transformer.transform(initValue);
			markmapInstance.value.setData(root);
			// markmapInstance.value.fit(); // 自动调整视图
		} catch (error) {
			console.error("Markmap渲染错误:", error);
		}
	};

	onMounted(() => {
		if (svgRef.value) {
			// 初始化Markmap实例
			markmapInstance.value = Markmap.create(svgRef.value, {
				autoFit: true
			});
			updateMarkmap();
		}
	});
</script>

<style>
	.markmap-container {
		width: 100%;
		height: 100dvh;
	}

	.markmap-container svg {
		font-family: sans-serif;
		background-color: #f9f9f9;
	}
</style>