智能脑图组件 (ai-new-mindmap)

这是一个基于simple-mind-map的Vue思维导图组件，支持节点拖拽、多种结构样式的切换等功能。

特点

• 节点拖拽：支持自由拖拽节点位置，灵活调整思维导图结构
• 多种结构：支持思维导图、逻辑结构图、组织结构图、目录组织图、时间轴、鱼骨图等多种结构样式
• 丰富功能：支持添加节点、删除节点、编辑节点内容等基本操作
• Vue组件：以Vue组件形式提供，易于集成到现有项目中
• 数据转换：提供jsMind格式数据到simple-mind-map格式的转换方法

安装

npm install ai-new-mindmap --save

使用方法

全局注册

import Vue from 'vue'
import AiNewMindMap from 'ai-new-mindmap'

Vue.use(AiNewMindMap)

局部注册

import { AiNewMindMap } from 'ai-new-mindmap'

export default {
  components: {
    AiNewMindMap
  }
}

在模板中使用

<template>
  <div class="mindmap-container">
    <ai-new-mindmap
      :data="mindMapData"
      :editable="true"
      :show-toolbar="true"
      :theme="'classic'"
      :initial-layout="'mindMap'"
      :direction="'center'"
      @node-click="handleNodeClick"
      @node-select="handleNodeSelect"
      @node-add="handleNodeAdd"
      @node-remove="handleNodeRemove"
      @node-update="handleNodeUpdate"
      @layout-change="handleLayoutChange"
      @message="handleMessage"
    />
  </div>
</template>

<script>
export default {
  data() {
    return {
      mindMapData: {
        data: {
          text: '智能脑图',
          expand: true
        },
        children: [
          {
            data: {
              text: '支持拖拽',
              expand: true
            },
            children: [
              {
                data: {
                  text: '节点拖拽'
                }
              }
            ]
          },
          {
            data: {
              text: '多种结构',
              expand: true
            },
            children: [
              {
                data: {
                  text: '思维导图'
                }
              }
            ]
          }
        ]
      }
    }
  },
  methods: {
    handleNodeClick(node, e) {
      console.log('节点点击：', node)
    },
    handleNodeSelect(node, activeNodes) {
      console.log('节点选择：', node)
    },
    handleNodeAdd(newNode, parentNode) {
      console.log('添加节点：', newNode)
    },
    handleNodeRemove(node) {
      console.log('删除节点：', node)
    },
    handleNodeUpdate(node, text) {
      console.log('更新节点：', node, text)
    },
    handleLayoutChange(layout) {
      console.log('布局更改：', layout)
    },
    handleMessage(msg) {
      this.$message.warning(msg)
    }
  }
}
</script>

<style>
.mindmap-container {
  width: 100%;
  height: 600px;
}
</style>

从jsMind迁移

如果您之前使用的是jsMind，可以使用组件提供的转换方法将数据格式转换为simple-mind-map格式：

import { AiNewMindMap } from 'ai-new-mindmap'

export default {
  components: {
    AiNewMindMap
  },
  data() {
    return {
      jsMindData: {
        meta: {
          name: "思维导图",
          author: "作者",
          version: "1.0"
        },
        format: "node_tree",
        data: {
          id: "root",
          topic: "根节点",
          children: [
            {
              id: "child1",
              topic: "子节点1",
              children: []
            }
          ]
        }
      },
      mindMapData: null
    }
  },
  mounted() {
    // 获取组件实例并使用转换方法
    this.$nextTick(() => {
      const mindMapInstance = this.$refs.mindMap
      this.mindMapData = mindMapInstance.convertJsMindDataToSimpleMindMap(this.jsMindData)
    })
  }
}

组件属性

| 属性 | 类型 | 默认值 | 说明 | |------|------|-------|------| | data | Object | { data: { text: '思维导图', expand: true }, children: [] } | 思维导图数据 | | showToolbar | Boolean | true | 是否显示工具栏 | | editable | Boolean | true | 是否可编辑 | | theme | String | 'classic' | 主题样式 | | initialLayout | String | 'mindMap' | 初始布局结构 | | direction | String | 'center' | 布局方向(center, left, right) |

组件事件

| 事件名称 | 参数 | 说明 | |---------|------|------| | node-click | (node, event) | 节点点击事件 | | node-select | (node, activeNodes) | 节点选择事件 | | node-add | (newNode, parentNode) | 添加节点事件 | | node-remove | (node) | 删除节点事件 | | node-update | (node, text) | 更新节点事件 | | node-drag | (node, event) | 节点拖拽事件 | | layout-change | (layout) | 布局更改事件 | | zoom | (scale) | 缩放事件 | | message | (message) | 消息事件 |

组件方法

| 方法名 | 参数 | 返回值 | 说明 | |-------|------|-------|------| | getData | - | Object | 获取思维导图数据 | | setData | (data) | - | 设置思维导图数据 | | getSelectedNode | - | Node | 获取当前选中的节点 | | convertJsMindDataToSimpleMindMap | (jsMindData) | Object | 将jsMind格式数据转换为simple-mind-map格式 |

许可证

MIT