ch-vue3-mindmap

ch-vue3-mindmap

Mindmap component for Vue3. Fork from https://github.com/hellowuxin/vue3-mindmap/

Install

npm install ch-vue3-mindmap

PROPS

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'

Example

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

<script>
import mindmap from 'ch-vue3-mindmap'

export default defineComponent({
    components: {mindmap},
    setup ()
=>
{
    const data = [{
        "name": "Computer programming",
        "children": [
            {
                "name": "Web",
                "children": [
                    {"name": "HTML & CSS"},
                    {"name": "JavaScript"},
                ]
            },
            {
                "name": "Windows",
                "collapse": true,
                "children": [{"name": "C#"}]
            },
            {"name": "Other", "left": true},
        ]
    }]

    return {data}
}
})
</script>