vue3-minder-editor based on fex-team/kityminder-core

该项目是 Vue3 版本的脑图，Vue2 版本请查看 vue-minder-editor-plus 基于 Vue3+vite+TS+arco design 开发，支持国际化功能

install

npm install vue3-minder-editor --save

Usage

import mindEditor from 'vue3-minder-editor';
import { createApp } from 'vue';

const app = createApp(App);
app.component(mindEditor.name, mindEditor);

component

<template>
  <minder-editor
    class="minder-container"
    :import-json="importJson"
    :progress-enable="false"
    :height="height"
    :tags="tags"
    :default-mold="defaultMode"
    :language="language"
    @save="save"
  />
  <button @click="toggleL">切换语言</button>
</template>

<script setup lang="ts">
  import { ref } from 'vue';
  import minderEditor from 'vue3-minder-editor';

  const importJson = {
    root: {
      data: {
        // 文本内容
        text: 'vue3-minder-editor',
        // 标签
        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: '地图axxaaaa',
                disable: true,
                allowDelete: true,
                // tagEnable: true,
                // allowDisabledTag: true,
                resource: ['模块12'],
                priority: 3,
              },
            },
          ],
        },
        {
          data: {
            text: 'child2',
          },
        },
      ],
    },
    template: 'default',
  };
  const height = 500;
  const defaultMode = 3;
  const tags = ['模块1', '用例', '前置条件', '测试步骤', '预期结果', '备注'];

  const language = ref(localStorage.getItem('minder-locale') || 'zh-CN');

  function save(data: any) {
    console.log(data);
  }

  function toggleL() {
    if (language.value === 'zh-CN') {
      language.value = 'en-US';
    } else {
      language.value = 'zh-CN';
    }
    localStorage.setItem('minder-locale', language.value);
  }
</script>

Build Setup

# install npm dependencies
    npm install

# serve with hot reload at localhost:8088
    npm run dev

# build for plugin with minification
    npm run build

# License
    BSD-3-Clause License

国际化

给组件传入language属性即可，例：
<minder-editor
  class="minder-container"
  :language="language"
/>

Props

以下配置部分为 kityminder-core 扩展的功能，kityminder-core 本身的 minder 对象提供了丰富的功能，使用该组件时可通过 window.minder 对象获取 minder 对象具体的使用方法，可以参考它的文档扩展 kityminder-core wiki

基础配置

importJson

type Object
Default: null

需要脑图解析的 js 对象，参数详情可参考上文 demo，或者调用 minder.exportJson() 查看具体参数

height

type: Number
default: 500

显示高度，默认 500px

disabled

type: Boolean
default: null

是否禁止编辑

defaultMold

type: Number
default: 3

外观设置中样式的默认值

启用配置

sequenceEnable

type: Boolean
default: true

是否优先级功能

tagEnable

type: Boolean
default: true

是否启用标签功能

progressEnable

type: Boolean
default: true

是否启用完成进度功能

moveEnable

type: Boolean
default: true

是否启用上移下移功能

优先级配置

priorityCount

type Number
Default: 4

优先级最大显示数量，最多支持显示 9 个级别

priorityStartWithZero

type: Boolean
default: true

优先级是否从 0 开始

priorityPrefix

type: String
default: 'P' 优先级显示的前缀

priorityDisableCheck

type: Function
default: null

优先级设置的回调函数，如果返回 false 则无法设置优先级

标签配置

tags

type: Array
default: []

标签选项

distinctTags

type: Array
default: []

定义排他标签，比如 ['tag1','tag2'] ,则 tag1 不能和 tag2 共存

tagDisableCheck

type: Function
default: null

菜单栏是否允许打标签的回调函数，返回 false 则不允许打标签

tagEditCheck

type: Function
default: null

打标签时的回调函数，返回 false 则打标签不成功