开箱即用的思维导图Vue组件

5,812 阅读1分钟

一个由MindNode启发的思维导图Vue组件,基于d3.js实现
目前实现的功能有基本的编辑、拖移、缩放、撤销、上下文菜单...

GitHub

在线演示:mindnode.5xin.xyz/

安装

npm install @hellowuxin/mindmap
// 在你的vue文件中引入思维导图组件
import mindmap from '@hellowuxin/mindmap'

API

Name Type Default Description
v-model Array undefined 设置思维导图数据
width Number 100% 设置组件宽度
height Number 100% 设置组件高度
xSpacing Number 80 设置节点横向间隔
ySpacing Number 20 设置节点纵向间隔
draggable Boolean true 设置节点是否可拖拽
gps Boolean true 是否显示居中按钮
fitView Boolean true 是否显示缩放按钮
showNodeAdd Boolean true 是否显示添加节点按钮
keyboard Boolean true 是否响应键盘事件
contextMenu Boolean true 是否响应右键菜单
nodeClick Boolean true 设置节点是否可点击、编辑
zoomable Boolean true 是否可缩放、拖移
showUndo Boolean true 是否显示撤销重做按钮

样例

<template>
  <div id="app">
    <mindmap
      v-model="data"
    ></mindmap>
  </div>
</template>

<script>
import mindmap from '@hellowuxin/mindmap'

export default {
  name: 'App',
  components: {
    mindmap
  },
  data: () => ({
    data: [{
      "name":"如何学习D3",
      "children":
      [
        {
          "name":"预备知识",
          "children":
          [
            {"name":"HTML & CSS", "children": []},
            {"name":"JavaScript", "children": []}
        },
        {
          "name":"安装",
          "children": []
        },
        ...
      ]
    }]
  })
}
</script>