Mindmap component for Vue3
npm install vite-mindmapsh
https://www.npmjs.com/package/vue3-mindmap
`
Install
`sh
npm install vite-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, 5] | 设置缩放范围 |
| defalutScale | Number | 1.1 | 默认缩放比例,值越大图越小 |
| 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 |
事件
| Name | Description |
| --- | --- |
| @update:model-value | 变化后的数据 |
| @select | 选中的回调事件 |
Example
`html
``