思维导图 vue组件-一一网

没有在网上找到好用的kityminder-editor的Vue组件，所以在kityminder-editor的示例基础上，快速改成了vue组件。

安装

npm i ymfl-kityminder
复制代码

main.js

import 'ymfl-kityminder/dist/index.css'
import kityMinder from 'ymfl-kityminder'

Vue.use(kityMinder)

复制代码

使用

 <kityMinder
     :value="JSON.stringify(json)"
     :type="type"
     @init="initHandler"
     @destroyed="destroyedHandler"
     @import="importHandler"
     @export="exportHandler"
     @contentchange="contentchangeHandler"
 >
     <span slot="title">title</span>
 </kityMinder>
复制代码

暴露的方法与参数

init: editor, minder 初始化事件：editor和minder

destroyed: 无注销事件

import: content, type 导入事件：内容和格式

export: content, type 导出事件：内容和格式

contentchange: content, type change事件：内容和格式

效果展示

测试数据

value: {
    'data': {
      'id': 2,
      'text': 'Design project',
    },
    'children': [
        {
            'data': { 'text': 'Designsy', 'priority': 1, 'id': 3 },
            'children': [
                {
                  'data': { 'text': 'Designsy', 'id': 4 },
                  'children': [
                    { 'data': { 'text': 'Designsy', 'id': 5 } },
                    { 'data': { 'text': 'Designsy', 'id': 5 } },
                    { 'data': { 'text': 'Designsy', 'id': 5 } },
                  ]
                },
                { 'data': { 'text': 'Designsy', 'id': 5 } },
                { 'data': { 'text': 'Designsy', 'id': 62 } },
                { 'data': { 'text': 'Designsy', 'id': 73 } },
                { 'data': { 'text': 'Designsy', 'id': 84 } }
            ]
        },
        { 'data': { 'text': 'Designsy', 'priority': 2, 'id': 9 } },
        { 'data': { 'text': 'Designsy', 'priority': 3, 'id': 102 } },
        { 'data': { 'text': 'Designsy', 'priority': 4, 'id': 113 } },
        { 'data': { 'text': 'Designsy', 'priority': 5, 'id': 124 } }
    ]
}
复制代码