Vue3 使用simpleMindMap

最近需要在项目中实现一个思维导图的功能，既要展示内容还要能实时编辑。经过一番搜索后发现了一个名为simpleMindMap的库，正好满足我的需求。

https://github.com/wanglin2/mind-map

一、安装

npm i simple-mind-map

二、引入

import MindMap from "simple-mind-map";

二、创建dom

<div id="mindMapContainer"></div>

三、创建实例

import { reactive } from "vue";
let mindDom = null;

let mindData = reactive({
  data: {
    text: "根节点", // 节点的文本，可以是富文本，也就是html格式的，此时richText要设为true
    richText: false, // 节点的文本是否是富文本模式
    expand: true, // 节点是否展开
    uid: "", // 节点唯一的id，可不传，内部会生成
    icon: [], // 图标，格式可参考教程里的【插入和扩展节点图标】章节
    image: "", // 图片的url
    imageTitle: "", // 图片的标题，可为空
    imageSize: {
      // 图片的尺寸
      width: 100, // 图片的宽度，必传
      height: 100, // 图片的高度，必传
      custom: false, // 如果设为true，图片的显示大小不受主题控制，以imageSize.width和imageSize.height为准
    },
    hyperlink: "", // 超链接地址
    hyperlinkTitle: "", // 超链接的标题
    note: "", // 备注的内容
    attachmentUrl: "", // v0.9.10+，附件url
    attachmentName: "", // v0.9.10+，附件名称
    tag: [{ text: "标签", style: {} }], // 标签列表，v0.10.3以前的版本只支持字符串数组，即['标签']，v0.10.3+版本支持对象数组，即[{text: '标签', style: {}}]
    generalization: [
      {
        // （0.9.0以下版本不支持数组，只能设置单个概要数据）节点的概要，如果没有概要generalization设为null即可
        text: "概要", // 概要的文本
        richText: false, // 节点的文本是否是富文本模式
        // ...其他普通节点的字段都支持，但是不支持children
      },
    ],
    associativeLineTargets: [""], // 如果存在关联线，那么为目标节点的uid列表
    associativeLineText: "", // 关联线文本
    // ...其他样式字段，可以参考主题
  },
  children: [
    // 子节点，结构和根节点一致
    {
      data: {
        text: "子节点1",
        //...其他字段
      },
      children: [],
    },
    {
      data: {
        text: "子节点2",
      },
      children: [],
    },
  ],
});

四、创建相关触发事件、初始化实例

import { onMounted, reactive, onUnmounted } from "vue";

// 处理事件
const handleNodeData = (node: any) => {
  console.log("节点:", node);
};
const handleNodeClick = (node: any) => {
  console.log("节点被点击:", node.nodeData.data);
};

onMounted(() => {
  // 确保在mounted钩子内创建MindMap实例
  mindDom = new MindMap({
    el: document.getElementById("mindMapContainer"),
    data: mindData,
  });

  // 监听该方法获取最新数据
  mindDom.on("data_change", handleNodeData);

  // 监听节点点击事件
  mindDom.on("node_click", handleNodeClick);
});

onUnmounted(() => {
  if (mindDom) {
    mindDom.destroy(); // 销毁实例
  }
});