Vue2中使用百度脑图kityminder-core二次开发

先安装模板：

npm install kity kityminder-core -S

再导入局部（要看你使用的组件，多不多，很多组件使用，就全局）模块：

import kity from 'kity'
import kityminder from 'kityminder-core'

然后再创建一个容器

<div id="minder-container"></div>

再mounted使用添加以下代码

this.km = new window.kityminder.Minder({
 renderTo: '#minder-container'
});

this.km.importJson({
// 代码 数据格式
 "root": {
  "data": {
   "text": "test111"
  },
  "children": [
   { "data": { "text": "新闻\nsrc/module/node.j"}},
   { "data": { "text": "网页"} },
   { "data": { "text": "贴吧"} },
   { "data": { "text": "知道"} },
   { "data": { "text": "音乐" } },
   { "data": { "text": "图片"} },
   { "data": { "text": "视频"} },
   { "data": { "text": "地图" } },
   { "data": { "text": "百科","expandState":"collapse"}}
  ]
 },
 "template":"default"
});

使用 new 创建一个实例，挂载在this对象上即可。这里要注意的是，初始化的时候，直接使用 kityminder.Minder 可能会报错。所以需要手动加上 window.kityminder.Minder

这个问题有点奇葩啊，你说直接使用 kityminder 是个空对象，使用 window.kityminder 就是正常的。

完整代码如下：

<template>
  <div>
    <div style="height: 400px;width: auto" id="minder-container"></div>
  </div>
</template>

<script>
  import kity from 'kity'
  import kityminder from 'kityminder-core'

  export default {
    name: "page",
    data() {
      return {}
    },
    methods: {},
    mounted() {
      this.km = new window.kityminder.Minder({
        renderTo: '#minder-container'
      });
      this.km.importJson({
        "root": {
          "data": {
            "text": "test111"
          },
          "children": [
            {
              "data": {
                "text": "新闻\nsrc/module/node.j"
              },
              "children": [
                {
                  "data": {
                    text: 'aaa'
                  }
                }
              ]
            },
            {"data": {"text": "网页"}},
            {"data": {"text": "贴吧"}},
            {"data": {"text": "知道"}},
            {"data": {"text": "音乐"}},
            {"data": {"text": "图片"}},
            {"data": {"text": "视频"}},
            {"data": {"text": "地图"}},
            {"data": {"text": "百科", "expandState": "collapse"}}
          ]
        },
        "template": "default"
      });
    }
  }
</script>

<style scoped>

</style>

转载链接： https://segmentfault.com/a/1190000020496127?utm_source=tag-newest