bi-vue-mindmap v0.6.9

bi-vue-mindmap

🖼️ Screen Shoot

🔨 Minimal Sample

<template>
  <BiVueMindmap ref="bi-vue-mindmap" :flatNodes="mindmapNodes" />
</template>
<script>
import BiVueMindmap from "bi-vue-mindmap";
export default {
  components: {
    BiVueMindmap,
  },
  data() {
    return {
      mindmapNodes: [
        {
          id: "xxx",
          parentId: null,
          title: "父节点",
          extra: {
            a: 1,
            b: "x",
          },
        },
        {
          id: "yyy",
          parentId: "xxx",
          title: "子节点",
          extra: {
            a: 2,
            b: "y",
          },
        },
      ],
    };
  },
};
</script>

<template>
  <BiVueMindmap ref="bi-vue-mindmap" :flatNodes="mindmapNodes" />
</template>
<script>
import BiVueMindmap from "bi-vue-mindmap";
export default {
  components: {
    BiVueMindmap,
  },
  data() {
    return {
      mindmapNodes: [
        {
          id: "xxx",
          parentId: null,
          title: "父节点",
          extra: {
            a: 1,
            b: "x",
          },
          resources: [
            {
              type: "PIC",
              url: require("../assets/examples/landscape.png"),
            },
            {
              type: "VIDEO",
              url: require("../assets/examples/cat.mp4"),
            },
            {
              type: "FILE",
              url: require("../assets/examples/cat.mp4"),
            },
          ],
        },
        {
          id: "yyy",
          parentId: "xxx",
          title: "子节点",
          extra: {
            a: 2,
            b: "y",
          },
          resources: [
            {
              type: "PIC",
              url: require("../assets/examples/landscape.png"),
            },
          ],
        },
        {
          id: "zzz",
          parentId: "xxx",
          title: "子节点",
          extra: {
            a: 3,
            b: "z",
          },
          resources: [
            {
              type: "VIDEO",
              url: require("../assets/examples/cat.mp4"),
            },
          ],
        },
      ],
    };
  },
};
</script>

🔠 Properties

Node Fields

Resource Fields

目前本组件仅支持一个根节点

🛠️ Methods

Method Examples

this.$refs["bi-vue-mindmap"].refreshNodesAndLinks();

this.$refs["bi-vue-mindmap"].getNodeOrderNoById("yyy");

this.$refs["bi-vue-mindmap"].insertResource("idxxxxx", {
  type: "VIDEO",
  url: "https://xxx.com/xxx.mp4",
  title: "cat.mp4",
  size: 5000,
});

🎺 Events

Operation Events

Normal Events

Ctrl+Z Events

Drag Drop Events

详情可参考：https://developer.mozilla.org/zh-CN/docs/Web/API/HTML_Drag_and_Drop_API

🎣 Hooks Before Events

1. 钩子函数作为 Props 传递给组件
2. 以上前置钩子函数，函数内 return false 会使对应的后续事件取消发生

⚙️ Customization

节点 Node 对象中 isCustomized 字段设置为 true 后，节点则作为自定义节点渲染。以插槽的形式定义节点的渲染样式

Customized Node Additional Fields

Customization Sample

<template>
  <BiVueMindmap
    :flatNodes="mindmapNodes"
    v-slot="{ id, parentId, orderNo, width, height, extra }"
  >
    <div class="my-node-template">
      <p class="title">{{ extra.myTitle }}</p>
      <button
        tabindex="-1"
        @click.stop="
          onBtnClick({ id, parentId, orderNo, width, height, extra })
        "
      >
        确认
      </button>
    </div>
  </BiVueMindmap>
</template>
<script>
import BiVueMindmap from "bi-vue-mindmap";
export default {
  components: {
    BiVueMindmap,
  },
  data() {
    return {
      mindmapNodes: [
        {
          id: "xxx",
          parentId: null,
          title: "父节点",
        },
        {
          id: "yyy",
          parentId: "xxx",
          isCustomized: true,
          width: 100,
          height: 32,
          extra: {
            myTitle: "Customized Node",
          },
          calcCellSize: function (node) {
            this.width = 200;
            this.height = 64;
            // ----- or -----
            // node.width = 200;
            // node.height = 64;
          },
        },
      ],
    };
  },
  methods: {
    onBtnClick({ id, parentId, orderNo, width, height }) {},
  },
};
</script>

🎹 快捷键