vue3-mindmap-ou v0.5.19

vue3-mindmap

Mindmap component for Vue3 inspired by MindNode

live demo / demo page
Directory Description / Directory Description

Install

npm install vue3-mindmap

PROPS

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