当前位置：首页 > VUE

vue实现xmind

2026-01-12 20:18:45VUE

Vue 实现 XMind 思维导图

在 Vue 中实现类似 XMind 的思维导图功能，可以通过集成第三方库或手动实现核心逻辑来完成。以下是几种常见方法：

使用现成库（推荐）

jsMind
轻量级思维导图库，支持 Vue 集成。
安装：

npm install jsmind

示例代码：

<template>
  <div ref="mindmap" style="width: 800px; height: 600px"></div>
</template>

<script>
import jsMind from 'jsmind';
export default {
  mounted() {
    const options = {
      container: this.$refs.mindmap,
      theme: 'primary',
      editable: true,
    };
    const data = {
      meta: { name: '示例', author: '', version: '1.0' },
      format: 'node_array',
      data: [{ id: 'root', topic: '中心主题' }],
    };
    new jsMind(options, data);
  },
};
</script>

Vue Mindmap
专为 Vue 设计的思维导图组件。
安装：

npm install vue-mindmap

使用：

<template>
  <vue-mindmap :data="treeData" :options="options" />
</template>

<script>
import { VueMindmap } from 'vue-mindmap';
export default {
  components: { VueMindmap },
  data() {
    return {
      treeData: { text: '根节点', children: [] },
      options: { mode: 'edit' },
    };
  },
};
</script>

手动实现核心功能

若需高度定制化，可基于 SVG 或 Canvas 手动实现：

数据结构设计
定义节点结构，例如：

{
  id: 'node1',
  text: '父节点',
  children: [
    { id: 'node2', text: '子节点1' },
    { id: 'node3', text: '子节点2' }
  ]
}

渲染逻辑
使用递归组件渲染树形结构：

<template>
  <div class="node">
    <div @click="toggle">{{ node.text }}</div>
    <div v-if="expanded" v-for="child in node.children">
      <TreeNode :node="child" />
    </div>
  </div>
</template>

<script>
export default {
  name: 'TreeNode',
  props: ['node'],
  data() {
    return { expanded: false };
  },
  methods: {
    toggle() { this.expanded = !this.expanded; }
  }
};
</script>