basic Mindmap Vue Component
npm install @hellohutao/mindmap
sh
npm install @hellohutao/mindmap
`
PROPS
| Name | Type | Default | Description |
| --- | --- | --- | --- |
| v-model | Array | undefined | 设置思维导图数据 |
| width | Number | 100% | 设置组件宽度 |
| height | Number | undefined | 设置组件高度 |
| xSpacing | Number | 80 | 设置节点横向间隔 |
| ySpacing | Number | 20 | 设置节点纵向间隔 |
| strokeWidth | Number | 4 | 设置连线的宽度 |
| draggable | Boolean| true | 设置节点是否可拖拽 |
| gps | Boolean| true | 是否显示居中按钮 |
| fitView | Boolean| true | 是否显示缩放按钮 |
| showNodeAdd | Boolean| true | 是否显示添加节点按钮 |
| keyboard | Boolean| true | 是否响应键盘事件 |
| contextMenu | Boolean| true | 是否响应右键菜单 |
| zoomable | Boolean| true | 是否可缩放、拖移 |
| showUndo | Boolean| true | 是否显示撤销重做按钮 |
| download | Boolean| true | 是否显示下载按钮 |
| minscale | Number | 0.1 | 最小缩放比例 |
| maxscale | Number | 8 | 最大缩放比例 |
| edit | Boolean | true | 是否可编辑 |
| isNodeOpt | Boolean | true | 节点是否可键盘快捷操作 |
EVENTS
| Name | arguments | Description |
| --- | --- | --- |
| updateNodeName | data, id | 更新节点名称时,传入节点数据和节点id |
| click | data, id | 点击节点时,传入节点数据和节点id |
| newUpdateNodeName| data, id, sourceData, editText | 存在节点内容且编辑完成时(input失焦),触发事件 |
| addChildNodeEvent| data, id, parentData, addText | tab新增子节点事件,触发事件 |
| addBotherNodeEvent| data, id, parentData, addText | enter新增兄弟节点事件,触发事件 |
| delNodeEvent| seleData| backspace删除节点事件,触发事件 |
| collapseNode| seleData| 当前节点数据,折叠节点触发事件 |
| expandNode| seleData| 当前节点数据,展开节点触发事件 |
调用mindmap组件内部事件
| Name | arguments | Description |
| --- | --- | --- |
| makeCenter| $refs.[ref].makeCenter()| 居中
| fitContent| $refs.[ref].fitContent()| 适应窗口大小 |
样例
`html
``