GitHub 地址

安装

npm install vue3-mindmap --registry https://registry.npmmirror.com/

组件属性

属性	类型	默认值	说明
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'	'zh'	i18n

示例

<template>
  <mindmap
      style="height: 70vh;"
      v-model="data" 
      :x-gap="xGap" 
      :y-gap="yGap" 
      :drag="drag" 
      :zoom="zoom" 
      :branch="branch" 
      :timetravel="timetravel" 
      :center-btn="centerBtn" 
      :fit-btn="fitBtn" 
      :add-node-btn="addNodeBtn" 
      :download-btn="downloadBtn"  
      :edit="edit" 
      :sharp-corner="sharpCorner" 
      :ctm="ctm" >
  </mindmap>
</template>


<script setup lang="ts">
import {ref} from 'vue'

const data = ref([{
  "name": "如何学习D3",
  "children": [
    {
      "name": "预备知识2",
      "children": [
        { "name": "HTML & CSS" },
        { "name": "JavaScript" },
        // Add more children as needed
      ]
    },
    {
      "name": "安装",
      "collapse": true,
      "children": [{ "name": "折叠节点" }]
    },
    { "name": "进阶", "left": true },
    // Add more children as needed
  ]
}])
const active = ref(false)
const xGap = ref(84)
const yGap = ref(18)
const branch = ref(4)
const timetravel = ref(true)
const drag = ref(true)
const zoom = ref(false)
const edit = ref(true)
const centerBtn = ref(true)
const fitBtn = ref(true)
const addNodeBtn = ref(true)
const downloadBtn = ref(true)
const sharpCorner = ref(false)
const ctm = ref(true)
</script>