思维导图vue3-mindmap

github地址

演示地址

使用方法

按照依赖

npm install vue3-mindmap

使用代码如下：

<script lang="ts" setup>
import mindmap from 'vue3-mindmap'
import 'vue3-mindmap/dist/style.css'

const data = [{
  "name":"如何学习D3",
  "children": [
    {
      "name":"预备知识",
      "children": [
        { "name":"HTML & CSS" },
        { "name":"JavaScript" },
      ]
    },
    {
      "name":"安装",
      "collapse": true,
      "children": [ { "name": "折叠节点" } ]
    },
    { "name":"进阶", "left": true },
  ]
}]

</script>

<template>
  <div class="p-16">
    <el-card class="card-w h-75vh">
      <mindmap v-model="data" :zoom="true" :edit="true" :fit-btn="true" :add-node-btn="true" :timetravel="true" :ctm="true"></mindmap>
    </el-card>
  </div>
</template>

<style scoped>
:deep(.el-card__body) {
  height:100%
}
</style>

配置参数如下

Name	Type	Default	Description
v-model	Data[]	undefined	设置思维导图数据
x-gap	Number	84	设置节点横向间隔
y-gap	Number	18	设置节点纵向间隔
branch	Number	4	设置连线的宽度
scale-extent	[Number, Number]	[0.1, 0.8]	设置缩放范围
timetravel	Boolean	false	是否显示撤销重做按钮
drag	Boolean	false	设置节点是否可拖拽
zoom	Boolean	false	是否可缩放、拖移
edit	Boolean	false	是否可编辑
center-btn	Boolean	false	是否显示居中按钮
fit-btn	Boolean	false	是否显示缩放按钮
add-node-btn	Boolean	false	是否显示添加节点按钮
download-btn	Boolean	false	是否显示下载按钮
sharp-corner	Boolean	false	设置分支为圆角或直角
ctm	Boolean	false	是否响应右键菜单
locale	'zh'	'en'	'ptBR'