当前位置：首页 > VUE

vue实现xmind

2026-03-27 12:50:25VUE

Vue 实现 XMind 思维导图

在 Vue 中实现类似 XMind 的思维导图功能，可以通过以下几种方式实现：

使用现有库

推荐使用成熟的第三方库来快速实现思维导图功能，例如：

jsMind：一个开源的思维导图库，支持 Vue 集成。
MindElixir：一个轻量级的思维导图库，支持 Vue 3。
d3-hierarchy：基于 D3.js 的层级布局库，适合自定义开发。

集成 jsMind

安装 jsMind：

vue实现xmind

npm install jsmind

在 Vue 组件中使用：

<template>
  <div id="jsmind_container"></div>
</template>

<script>
import jsMind from 'jsmind';
import 'jsmind/style/jsmind.css';

export default {
  mounted() {
    const options = {
      container: 'jsmind_container',
      theme: 'primary',
      editable: true,
    };
    const jm = new jsMind(options);
    const mindData = {
      meta: { name: 'Example', author: 'Vue', version: '1.0' },
      format: 'node_array',
      data: [
        { id: 'root', topic: 'Root Topic' },
        { id: 'child1', parentid: 'root', topic: 'Child 1' },
        { id: 'child2', parentid: 'root', topic: 'Child 2' },
      ],
    };
    jm.show(mindData);
  },
};
</script>

使用 MindElixir

安装 MindElixir：

vue实现xmind

npm install mind-elixir

在 Vue 3 中使用：

<template>
  <div ref="mindElixirContainer"></div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import MindElixir from 'mind-elixir';

const mindElixirContainer = ref(null);

onMounted(() => {
  const options = {
    el: mindElixirContainer.value,
    direction: MindElixir.LEFT,
    data: {
      nodeData: {
        topic: 'Root',
        children: [
          { topic: 'Child 1' },
          { topic: 'Child 2' },
        ],
      },
    },
  };
  const mind = new MindElixir(options);
  mind.init();
});
</script>

自定义实现

如果需要高度自定义，可以使用 D3.js 或 Canvas 手动绘制思维导图。以下是一个基于 D3.js 的简单示例：

<template>
  <div ref="d3Container"></div>
</template>

<script>
import * as d3 from 'd3';

export default {
  mounted() {
    const data = {
      name: 'Root',
      children: [
        { name: 'Child 1' },
        { name: 'Child 2' },
      ],
    };

    const width = 800;
    const height = 600;

    const svg = d3.select(this.$refs.d3Container)
      .append('svg')
      .attr('width', width)
      .attr('height', height);

    const root = d3.hierarchy(data);
    const treeLayout = d3.tree().size([width, height]);
    treeLayout(root);

    svg.selectAll('.link')
      .data(root.links())
      .enter()
      .append('path')
      .attr('class', 'link')
      .attr('d', d3.linkHorizontal()
        .x(d => d.y)
        .y(d => d.x));

    svg.selectAll('.node')
      .data(root.descendants())
      .enter()
      .append('g')
      .attr('class', 'node')
      .attr('transform', d => `translate(${d.y},${d.x})`)
      .append('circle')
      .attr('r', 5);
  },
};
</script>