1.1.1 • Published 3 years ago
mxs-mindmap v1.1.1
mxs-mindmap
live demo: https://jasstin.github.io/vue3-mindmap/
新功能上线： 右键菜单添加"仅展示当前分支"功能
Install
npm install mxs-mindmapPROPS
| 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 | 设置缩放范围 |
| scale-ratio | Number | 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 | 是否响应右键菜单 |
Data
| Name | Type | Description |
|---|---|---|
| name | string | 节点名称 |
| collapse | boolean | 是否折叠 |
| children | Node[] | 节点数组 |
| left | boolean | 在节点左侧展示 |
Example
<template>
<mindmap v-model="data"></mindmap>
</template>
<script>
import mindmap from 'mxs-mindmap'
import 'mxs-mindmap/dist/style.css'
export default defineComponent({
components: { mindmap },
setup () => {
const data = [{
"name":"如何学习D3",
"children": [
{
"name":"预备知识",
"children": [
{ "name":"HTML & CSS" },
{ "name":"JavaScript" },
...
]
},
{
"name":"安装",
"collapse": true,
"children": [ { "name": "折叠节点" } ]
},
{ "name":"进阶", "left": true },
...
]
}]
return { data }
}
})
</script>注意
- 当xGap小于一定数值，父节点的trigger由于添加按钮的存在可能遮挡住子节点的trigger，无法响应子节点的点击
待解决
- 直角分支radius
Todo
- 节点样式支持配置字体颜色
- 节点样式支持配置图片
- 节点支持添加描述
- 数据支持配置字体颜色