Vue使用jsmind实现生成脑图的示例代码

<template>
	<!-- jsmind容器 -->
    <div
      id="jsmindContainer"
      ref="jsmindContainer"
    ></div>
</template>

<script>
// 引入jsmind方法和样式
import "jsmind/style/jsmind.css";
import jsMind from "jsmind";

// 引入获取数据的接口
import { getProjectMind } from "@/api/projectManagement";

export default {
  data() {
    return {
      treeData: {},
      jsmind: ""
    };
  },
  created() {
    this.initData();
  },
  beforeDestroy() {
    if (this.jsmind) {
      this.jsmind.destroy();
    }
  },
  methods: {
    initData() {
      let projectId = this.$route.query.projectId;
      getProjectMind(projectId)
        .then(res => {
          if (res.code === 200) {
            this.treeData = res.data;
            const options = {
              container: "jsmindContainer", // 必选，容器ID
              editable: false, // 可选，是否启用编辑
              theme: "asphalt", // 可选，主题
              shortcut: {
                enable: true // 禁用快捷键
              },
              layout: {
                hspace: 50, // 节点之间的水平间距
                vspace: 20, // 节点之间的垂直间距
                pspace: 13 // 节点与连接线之间的水平间距（用于容纳节点收缩/展开控制器）
              },
              mode: "full" // 显示模式，子节点只分布在根节点右侧
            };
            // 初始化jsMind对象
            this.jsmind = new jsMind(options);

			// 让jsmind对象显示具体的脑图数据
            this.jsmind.show({
              meta: {
                name: "jsMind",
                author: "",
                version: "0.1"
              },
              format: "node_tree",// 数据格式官方文档有介绍
              data: this.treeData
            });
          }
        })
        .catch(err => {});
    }
  }
};
</script>

// 因为window里面的this不是指向当前组件，所以需要提前注册使用
window.$$this = this;
window.showTask = function(id) {
  // 展示详情弹窗
  window.$$this.detailShow = true;
  // 详情弹窗获取数据
  window.$$this.$nextTick(() => {
    window.$$this.$refs.TaskDetail.init(id);
  });
};

beforeDestroy() {
  if (this.jsmind) {
    this.jsmind.destroy();
    window.showTask = undefined;
    window.$$this = undefined;
  }
}