Vue思维脑图插件:Mindmap

一个由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

NameTypeDefaultDescription
v-modelArrayundefined设置思维导图数据
widthNumber100%设置组件宽度
heightNumberundefined设置组件高度
xSpacingNumber80设置节点横向间隔
ySpacingNumber20设置节点纵向间隔
strokeWidthNumber4设置连线的宽度
draggableBooleantrue设置节点是否可拖拽
gpsBooleantrue是否显示居中按钮
fitViewBooleantrue是否显示缩放按钮
showNodeAddBooleantrue是否显示添加节点按钮
keyboardBooleantrue是否响应键盘事件
contextMenuBooleantrue是否响应右键菜单
nodeClickBooleantrue设置节点是否可点击、编辑
zoomableBooleantrue是否可缩放、拖移
showUndoBooleantrue是否显示撤销重做按钮

人已赞赏
Vue

v-charts图表插件,基于Vue2.0+和echarts

2020-10-26 17:37:06

Vue

【Vue】使用axios进行数据请求

2020-10-27 23:05:36

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索