simmind

vue 思维导图，基于 kityminder-core 的二次开发

demo

官方文档 : http://simmind.xkongkeji.com

Project setup

npm install simmind --save
cnpm install simmind --save

import SimMind from 'simmind';
import 'simmind/dist/simmind.css'
Vue.use(SimMind);

用法

<SimMind
    ref="SimMind"
    :root.sync="root"
    :theme.sync="theme"
    :lockStatus.sync="lockStatus"
    :uploadImage="uploadImage"
    />

参数

| 参数 | 说明 | 类型 | 可选值 | 默认值 | | ---------- | ------------------------------------------------------------------------------------------ | ------ | --------- | ------ | | root | 思维导图参数,建议使用.sync，没有.sync 会导致数据更新不同步现象，需要手动监听 savedata 事件 | object | --------- | —— | | lockStatus | 是否锁定工具栏， 没有.sync 无效 | object | --------- | —— | | theme | 思维导图主题 | String | --------- | —— | | uploadImage | 图片上传方法，必须提供上传图片方法 | Function | --------- | —— |

Events

| 事件名称 | | 说明 | 回调 | | --------- | --- | ------------ | ------------ | | savedata | | 点击保存数据 | 思维导图数据 | | update | | 思维导图发生数据更新 | 思维导图数据 | | nodeclick | | 点击节点 | 当前节点数据 | | rollback | | 点击返回图标 | 无 | | importdata | | 点击导入图标 | 暂未完善 |

补充

如果您想获取到当前思维导图图片，可以直接调佣实例的getNowView()方法，数据为base64

this.$refs.SimMind.getNowView()

如果需要数据二次渲染需要为root添加_updata: true

    this.setRoot({
      data: {
        text: "simmind"
      },
      _updata: true
    });

数据格式

root: {
        data: {
            text: "Thezero",
        },
        children: [
            { data: { text: "Thezero/男" } },
            { data: { text: "工作邮箱：[email protected]" } },
            {
                data: {
                    text: "个人博客：https://blog.xkongkeji.com/",
                },
            },
            { data: { text: "QQ:1846930039(注明来自博客)" } },
            { data: { text: "职业：学生" } },
            { data: { text: "职业：学生" } },
        ],
    },

当然需要更多 API 可以参考 kityminder-core 官方文档