该项目是参考 vue-mindeditor 以及 kityminder-editor 源码，基于 kityminder-core 实现
npm install vue-minder-editor-plus --saveimport vueMinderEditor from 'vue-minder-editor-plus'
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/js/vueMinderEditor'
import vue from 'vue'
vue.use(minderEditor);
export default {
name: "test-plugin",
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># 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// 方式一
import locale from '/src/locale/lang/en-US'
Vue.use(vueMinderEditorPlus, {
locale
});
// 方式二
import lang from '/src/locale/lang/en-US'
import locale from '/src/locale'
locale.use(lang)
Vue.use(vueMinderEditorPlus);
// 方式三
import Vue from 'vue';
import VueI18n from 'vue-i18n';
import enLocale from 'vue-minder-editor-plus/src/locale/lang/en-US';
import zhLocale from 'vue-minder-editor-plus/src/locale/lang/zh-CN';
import vueMinderEditor from 'vue-minder-editor-plus';
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)
});
以下配置部分为 kityminder-core 扩展的功能，kityminder-core 本身的 minder 对象提供了丰富的功能，使用该组件时可通过 window.minder 对象获取 minder 对象具体的使用方法，可以参考它的文档扩展 kityminder-core wiki
type Object
Default: null
需要脑图解析的 js 对象，参数详情可参考上文 demo，或者调用 minder.exportJson() 查看具体参数
type: Number
default: 500
显示高度，默认 500px
type: Boolean
default: null
是否禁止编辑
type: Number
default: 3
外观设置中样式的默认值
type: Boolean
default: true
是否启用优先级功能
type: Boolean
default: true
是否启用标签功能
type: Boolean
default: true
是否启用完成进度功能
type: Boolean
default: true
是否启用上移下移功能
type: Boolean
default: true
是否启用外观样式
type: Boolean
default: true
是否启用展示模式
type: Boolean
default: true
是否启用整理布局
type: Boolean
default: true
是否启用样式编辑
type: Boolean
default: true
是否启用字体编辑
type Number
default: 4
优先级最大显示数量，最多支持显示 9 个级别
type: Boolean
default: true
优先级是否从 0 开始
type: String
default: 'P'
优先级显示的前缀
type: Function
default: null
优先级设置的回调函数，如果返回 false 则无法设置优先级
type: Array
default: []
标签选项
type: Array
default: []
定义排他标签，比如 ['tag1','tag2'] ,则 tag1 不能和 tag2 共存
type: Function
default: null
菜单栏是否允许打标签的回调函数，返回 false 则不允许打标签
type: Function
default: null
打标签时的回调函数，返回 false 则打标签不成功
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent