vue-minder-editor-extended v1.3.2

Vue Minder Editor

基于 kityminder-core 实现的 Vue2 脑图编辑器组件。

Install

npm install vue-minder-editor-extended --save

Usage

注册组件：

import vueMinderEditor from 'vue-minder-editor-extended'
import Vue from 'vue'
Vue.use(vueMinderEditor)

使用组件：

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

<script>
import minderEditor from '../../dist/static/vue-minder-editor-extended'
import vue from 'vue'
vue.use(minderEditor);
export default {
  name: 'test-plugin',
  data() {
    return {
      importJson: {
        // 节点数据
        root: {
          data: {
            // 文本内容
            text: 'vue-minder-editor-extended',
            // 标签
            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>

国际化

// 方式一
import locale from '/src/locale/lang/en-US'
Vue.use(vueMinderEditorExtended, {
  locale
});

// 方式二
import lang from '/src/locale/lang/en-US'
import locale from '/src/locale'
locale.use(lang)
Vue.use(vueMinderEditorExtended);

// 方式三
import Vue from 'vue';
import VueI18n from 'vue-i18n';
import enLocale from 'vue-minder-editor-extended/src/locale/lang/en-US';
import zhLocale from 'vue-minder-editor-extended/src/locale/lang/zh-CN';
import vueMinderEditor from 'vue-minder-editor-extended';

const messages = {
  en: {
    message: 'hello',
    ...enLocale
  },
  zh: {
    message: '你好',
    ...zhLocale
  }
}

Vue.use(VueI18n);

const i18n = new VueI18n({
  locale: 'en', // set locale
  messages, // set locale messages
})

Vue.use(vueMinderEditor, {
  i18n: (key, value) => i18n.t(key, value)
});

主题

Vue Minder Editor 组件已支持初始化时设置主题及注册主题，默认主题为 fresh-blue。

如需手动注册设置主题，允许使用的主题及其配置项可以使用 window.kityminder.Minder.getThemeList() 查询。

// 注册主题
window.kityminder.Theme.register('my-minder-theme', minderThemeItems)
// 设置主题
window.minder.useTheme('my-minder-theme')
// 或者
window.minder.execCommand('theme', 'my-minder-theme')

Props

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

基础配置

启用配置

优先级配置

标签配置

Slots

API

补充 kityminder-core wiki 中未说明的 API 文档。

minder

更多请查看 window.minder 对象或者 window.km 对象

• window.minder.setTheme() 设置主题
• window.minder.useTheme() 设置主题 (同 setTheme)
• window.minder.getTheme() 获取当前主题
• window.minder.getThemeItems() 获取当前主题的所有样式
• window.minder.execCommand(command, params) 执行命令

kityminder

更多请查看 window.kityminder 对象

• window.kityminder.Minder.getThemeList() 获取所有主题及主题配置项

minderEditor

更多请查看 window.minderEditor 对象

kity

更多请查看 window.kity 对象

HotBox

更多请查看 window.HotBox 对象

Build Setup

# npm install -g node-gyp
# 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

参考

• vue-minder-editor-plus
• vue-mindeditor
• kityminder-editor