vue3-mindmap-ou

vue3-mindmap

Mindmap component for Vue3 inspired by MindNode

live demo / demo page
Directory Description / Directory Description

Install

npm install vue3-mindmap

PROPS

Name	Type	Default	Description
v-model	Data[]	undefined	set mind map data
x-gap	Number	84	Set horizontal gap between nodes
y-gap	Number	18	Set vertical gap between nodes
branch	Number	4	set the line width
scale-extent	[Number, Number]	[0.1, 0.8]	set zoom extent
timetravel	Boolean	false	whether to display undo redo button
drag	Boolean	false	Set whether the node can be dragged
zoom	Boolean	false	Can zoom and drag
edit	Boolean	false	whether editable
center-btn	Boolean	false	Whether to display the center button
fit-btn	Boolean	false	Whether to show the zoom button
add-node-btn	Boolean	false	Whether to display the add node button
download-btn	Boolean	false	Whether to display the download button
sharp-corner	Boolean	false	set the corners to be rounded or straight
ctm	Boolean	false	Whether to respond to the right-click menu
local	'zh' | 'en' | 'ptBR'	'zh'	i18n

Added contextTxt prop that provides the text for the context menu so you can handle language changes yourself Just provide this with your altered text to the mindmap and it will be passed down to the context menu

contextTxt = {
    "collapse": "Collapse this node",
    "expand": "Expand from here",
    "delete": "Delete Node",
    "delete-one": "Delete a single node",
    "add": "Add Child node",
    "add-parent": "Add Parent node",
    "add-sibling": "Add Sibling node",
    "add-sibling-before": "Add Sibling node before",
    "cut": "Cut",
    "copy": "Copy",
    "paste": "Paste",
    "selectall": "Select all",
    "zoomin": "Zoom in",
    "zoomout": "Zoom out",
    "zoomfit": "Zoom fit"
}

Example

<template>
  <mindmap v-model="data"></mindmap>
</template>

<script>
import mindmap from 'vue3-mindmap'
import 'vue3-mindmap/dist/style.css'

export default defineComponent({
  components: { mindmap },
  setup () => {
    const data = [{
      "name": "How to learn D3",
      "children": [
        {
          "name": "preliminary knowledge",
          "children": [
            { "name":"HTML & CSS" },
            { "name":"JavaScript" },
            ...
          ]
        },
        {
          "name": "installation",
          "collapse": true,
          "children": [ { "name": "folded node" } ]
        },
        { "name":"进阶", "left": true },
        ...
      ]
    }]

    return { data }
  }
})
</script>

Notice

• When xGap is less than a certain value, the trigger of the parent node may block the trigger of the child node due to the existence of the add button, and cannot respond to the click of the child node

to be solved

• right angle branch radius

All

• Multi-select nodes
• Multi-master nodes
• More node styles