nova_mind_map
v1.3.8
Published
MindMap Vue Component
Downloads
10
Readme
思维导图Vue2组件
一个由MindNode启发的思维导图Vue组件，基于d3.js实现
目前实现的功能有基本的编辑、拖移、缩放、撤销、上下文菜单、折叠、更多功能通过传入参数和方法实现...
近期更新
增加根据节点ID选中节点的方法
安装
npm i nova_mind_map@latest 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 | 是否显示下载按钮 |
EVENTS
| Name | arguments | Description | | --- | --- | --- | | updateNodeName | data, id | 更新节点名称时，传入节点数据和节点id | | click | data, id | 点击节点时，传入节点数据和节点id |
样例
<template>
<n-mind-map v-model="data"></n-mind-map>
</template>
<script>
import nMindMap from '@/nova_mind_map'
export default {
components: { nMindMap },
data: () => ({
data: [
{
"name":"中心节点",
"maxChild": 5,
"children":[
{
"name":"组件功能",
"deletable":false,
"draggable":false,
"editable":false,
"left":false,
"_children":[
{
"name":"信息录入方式",
"deletable":false,
"draggable":false,
"editable":false,
"_children":[
{
"name":"传统录入方式"
},
{
"name":"生成子节点录入",
"deletable":false,
"draggable":false,
"type": "text",
"maxChild": 1
},
{
"name":"弹窗信息录入",
"deletable":false,
"draggable":false,
"type": "type",
"maxChild": 1
},
{
"name":"抽屉信息录入",
"deletable":false,
"draggable":false,
"type": "parentExtend"
}
]
},
{
"name":"可编辑节点突出展示",
"deletable":false,
"draggable":false,
"editable":false,
"_children":[
{
"name":"可编辑字段"
}
]
},
{
"name":"浮窗信息预览",
"deletable":false,
"draggable":false,
"editable":false,
"showHover": true
},
{
"name":"限制子节点数量",
"deletable":false,
"draggable":false,
"editable":false,
"maxChild": 3,
"_children":[
{
"name":"不限制子节点数量",
"deletable":false,
"draggable":false
},
{
"name":"限制不能新建子节点(限制TAB)",
"deletable":false,
"draggable":false,
"editable":false,
"maxChild": 0
},
{
"name":"限制三个子节点",
"deletable":false,
"draggable":false,
"editable":false,
"maxChild": 3,
"children":[
{
"name":"点击Enter生成兄弟节点",
"deletable":false,
"draggable":false,
"editable":false
}
]
}
]
},
{
"name":"节点收缩和子节点数量实时计算",
"deletable":false,
"draggable":false,
"editable":false
},
{
"name":"快捷键",
"deletable":false,
"draggable":false,
"editable":false,
"_children":[
{
"name":"Tab和Enter建新建子节点和兄弟节点",
"deletable":false,
"draggable":false,
"editable":false
},
{
"name":"节点编辑后点击回车完成编辑",
"deletable":false,
"draggable":false,
"editable":false
},
{
"name":"Backspace/Delete 键删除节点",
"deletable":false,
"draggable":false,
"editable":false,
"children":[
{
"name":"可删除"
},
{
"name":"可删除"
}
]
},
{
"name":"Ctrl + Z/Ctrl + Y 撤销和恢复",
"deletable":false,
"draggable":false,
"editable":false
},
{
"name":"Shift + Z 折叠/展开节点",
"deletable":false,
"draggable":false,
"editable":false,
"children":[
{
"name":"折叠"
},
{
"name":"折叠"
}
]
},
{
"name":"鼠标左键移动画布",
"deletable":false,
"draggable":false,
"editable":false
},
{
"name":"Ctrl + 滑轮缩放/放大画布",
"deletable":false,
"draggable":false,
"editable":false
}
]
},
{
"name":"节点属性限制",
"deletable":false,
"draggable":false,
"editable":false,
"_children":[
{
"name":"不可编辑",
"editable":false
},
{
"name":"不可删除",
"deletable":false
},
{
"name":"不可拖动",
"draggable":false
}
]
},
{
"name":"主题切换",
"deletable":false,
"draggable":false,
"editable":false
}
]
},
{
"name":"基础信息",
"deletable":false,
"draggable":false,
"editable":false,
"maxChild": 3,
"_children":[
{
"name":"名称",
"deletable":false,
"draggable":false,
"type": "text",
"maxChild": 1
},
{
"name":"类型",
"deletable":false,
"draggable":false,
"type": "type",
"maxChild": 1
},
{
"name":"继承父类",
"deletable":false,
"draggable":false,
"type": "parentExtend"
}
]
},
{
"name":"属性",
"deletable":false,
"draggable":false,
"editable":false,
"maxChild": 2,
"containerStyle": "border-style: dashed;border-color: #f56c6c;background-color: #e6a23c52;",
"_children":[
{
"name":"继承",
"deletable":false,
"draggable":false,
"editable":false
},
{
"name":"自定义",
"deletable":false,
"draggable":false,
"editable":false
}
]
},
{
"name":"关系",
"icon": "text",
"draggable":false,
"children":[
{
"name":"项目经理",
"showHover": true,
"draggable":false,
"line": "dash",
"type": "default",
"icon": "text"
},
{
"name":"销售",
"deletable":false,
"draggable":false,
"line": "dash",
"type": "relation",
"icon": "radio",
"fontStyle": "color: red;font-weight: 600;"
},
{
"name":"合作客户",
"deletable":false,
"draggable":false,
"line": "dash",
"type": "relation",
"icon": "checkbox"
},
{
"name":"监测设备列表",
"deletable":false,
"draggable":false,
"editable":false,
"type": "relation"
}
],
"left":false,
"type": "relation"
}
]
}
]
})
}
</script>键盘事件
⇥ tab、⏎ enter、⌫ backspace、⌘ cmd/ctrl+z、⌘ cmd/ctrl+y
交互逻辑
鼠标：左键拖动移动、右键菜单、ctrl+滚轮缩放、左键选中
触控板：单击拖动移动、双指菜单、双指捏合缩放、单指选中
待解决
- [ ] 导出多种格式
- [ ] 设置节点的宽高
- [ ] 多个根节点
- [ ] ...