一个由MindNode启发的思维导图Vue组件,基于d3.js实现
目前实现的功能有基本的编辑、拖移、缩放、撤销、上下文菜单...

Github
演示站

安装使用

// 安装
npm install @hellowuxin/mindmap
yarn add @hellowuxin/mindmap
# 引入
import mindmap from '@hellowuxin/mindmap'

示例

<template>
    <div class="college">
        <!-- 3. 使用插件并绑定数据 -->
        <Mindmap v-model="ssr"></Mindmap>
    </div>
</template>
<script>
    // 1. 引入插件
    import Mindmap from '@hellowuxin/mindmap'
    export default {
        data(){
            return {
                // 4. 数据类型
                ssr: [
                    {
                        "name": "计算机学院",
                        "children":
                            [
                                {
                                    "name": "预备知识",
                                    "children":
                                        [
                                            {"name": "HTML & CSS", "children": []},
                                            {"name": "JavaScript", "children": []}
                                        ]
                                },
                                {
                                    "name": "安装",
                                    "children": []
                                },
                            ]
                    }
                ]
            }
        },
        // 2. 声明插件
        components: {
            Mindmap,
        },
    }
</script>

API

| 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 | 是否响应右键菜单 |
| nodeClick | Boolean | true | 设置节点是否可点击、编辑 |
| zoomable | Boolean | true | 是否可缩放、拖移 |
| showUndo | Boolean | true | 是否显示撤销重做按钮 |

Last modification:August 29th, 2020 at 06:26 am
如果觉得我的文章对你有用,请随意赞赏