vue2百度脑图插件vue-minder-editor-plus

vue-minder-editor-plus介绍

vue-minder-editor-plus插件是基于 Vue2 + Element-UI封装的组件库.

下载

npm install element-ui --save
npm install vue-minder-editor-plus --save

1、使用方式

1.1全局使用

需要在main.js里面全局定义

import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import MinderEditorPlus from 'vue-minder-editor-plus'
import 'vue-minder-editor-plus/lib/vue-minder-editor-plus.css'

Vue.use(ElementUI)
Vue.use(MinderEditorPlus)

1.2、封装

<template>
  <div>
    <minder-editor :progress-enable="false" :import-json="importJson" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      importJson: {
        // 节点数据
        root: {
          data: {
            // 文本内容
            text: "vue-minder-editor-plus",
            // 标签
            resource: ["模块1"],
            // 是否禁止修改
            disable: true,
            // 默认展开或折叠，默认是展开的，collapse 可设为折叠
            // expandState: 'collapse',
            // 在 disable 为 true 的情况下，允许添加标签
            tagEnable: true,
            // 在 disable 为 true 的情况下，允许删除节点
            allowDelete: true,
            // 在 disable 为 true 的情况下，允许添加标签，优先级比 tagEnable 高
            allowDisabledTag: true,
          },
          // 子节点
          children: [
            {
              data: {
                text: "child1",
                disable: true,
                expandState: "collapse",
                resource: ["模块2"],
              },
              children: [
                {
                  data: {
                    text: "child11",
                    disable: true,
                    resource: ["模块2"],
                  },
                },
                {
                  data: {
                    text: "child12",
                  },
                },
              ],
            },
            {
              data: {
                text: "child2",
              },
            },
          ],
        },
      },
      tags: ["模块1", "模块2"],
    };
  },
};
</script>

2、局部使用

<template>
  <div class="kity-minder">
    <minder-editor
      v-if="isActive"
      ref="minderEditor"
      :height="600"
      :progress-enable="false"
      :priority-count="4"
      :import-json="importJson"
      @afterMount="afterMount"
      @save="handleSave"
    />
  </div>
</template>

<script>
import Vue from "vue";
import {
  Button,
  Select,
  Option,
  Tabs,
  TabPane,
  Row,
  Col,
  Input,
  Dropdown,
  DropdownMenu,
  DropdownItem,
} from "element-ui";
import "element-ui/lib/theme-chalk/index.css";
import VueMinderEditorPlus from "vue-minder-editor-plus/dist/static/vue-minder-editor-plus.js";

export default {
  components: {},
  props: {
    settingJson: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {
      isActive: false,
      importJson: {
        // 节点数据
        root: {
          data: {
            // 文本内容
            text: "产品:",
            // 标签
            // resource: ["模块1"],
            // 是否禁止修改
            disable: true,
            // 默认展开或折叠，默认是展开的，collapse 可设为折叠
            // expandState: 'collapse',
            // 在 disable 为 true 的情况下，允许添加标签
            tagEnable: true,
            // 在 disable 为 true 的情况下，允许删除节点
            allowDelete: true,
            // 在 disable 为 true 的情况下，允许添加标签，优先级比 tagEnable 高
            allowDisabledTag: true,
          },
          // 子节点
          children: [],
        },
      },
      tags: ["模块1", "模块2"],
    };
  },
  beforeCreate() {
    //在这里进行局部注册
    Vue.component("ElRow", Row);
    Vue.component("ElCol", Col);
    Vue.component("ElInput", Input);
    Vue.component("ElButton", Button);
    Vue.component("ElSelect", Select);
    Vue.component("ElOption", Option);
    Vue.component("ElTabs", Tabs);
    Vue.component("ElTabPane", TabPane);
    Vue.component("ElDropdown", Dropdown);
    Vue.component("ElDropdownMenu", DropdownMenu);
    Vue.component("ElDropdownItem", DropdownItem);
    this.$root.constructor.use(VueMinderEditorPlus);
  },
  mounted() {
    this.initJson();
  },
  methods: {
    initJson(treeNodes) {
      this.importJson.root.children = treeNodes;
      this.reload();
    },
    afterMount(minderInstance) {
      console.log(this.$refs.minderEditor.editor, "minderInstance.editor");
      minder.on("beforeExecCommand", function (env) {
        console.log("beforeExecCommand", env.commandName);

        // 阻止新增子节点
        if (env.commandName.toLowerCase() === "appendchildnode") {
          const node = env.minder.getSelectedNode(); // 获取操作节点
          let level = 1;
          let parent = node;
          while (parent) {
            level++;
            parent = parent.parent;
          }
          console.log(level, "level");
          if (level >= 6) {
            console.log("阻止第6层及以上新增子节点");
            return false; // 阻止执行 append
          }
        }

        return true; // 允许其他操作
      });
    },
    reload() {
      this.isActive = false;
      this.$nextTick(() => {
        this.isActive = true;
      });
    },
    handleSave(json) {
      this.$emit("save", json);
    },
  },
};
</script>
<style scoped lang="less">
.kity-minder {
  height: 100%;
  /deep/.minder-editor {
    height: 100%;
  }
  /deep/.save-btn {
    right: 20px;
    bottom: auto;
    top: 20px;
  }
}
</style>

效果

image.png