安装:
npm i mind-elixir -S
引入:
示例(在VUE中使用)
</template>
<div class="outer">
<div id="map" ></div>
</div>
</template>
初始化
data(){
return{
ME:null
}
}
mounted() {
//获取参数
this.ME = new MindElixir({
el: "#map",
direction: MindElixir.RIGHT,
data: this.mapdata,// 思维导图的数据
draggable: false, // 不启用拖动 default true
contextMenu: false, // 不启用右键菜单 default true
toolBar: true, // 启用工具栏 default true
nodeMenu: false, // 不启用节点菜单 default true
locale: 'zh_CN', // [zh_CN,zh_TW,en,ja,pt] waiting for PRs
overflowHidden: false, // default false
primaryLinkStyle: 2, // [1,2] default 1
primaryNodeVerticalGap: 25, // default 25
primaryNodeHorizontalGap: 65, // default 65
allowUndo: true,
keypress: true, // 启用快捷键 default true
});
this.ME.init();
},
赋值
methods: {
// 当数据发生改变时调用方法重新赋值
processData(data)
{
let mapdata={};
// 判断传入的data是否存在值,不存在时提示没有思维导图的相关信息。存在时根据数据显示对应的思维导图
if((!data && data.length==0))
{
mapdata={"nodeData": {
"id": "d0c71fd3f8441810",
"topic": "没有相关版本信息",
"root": true}}
}
else
{
let nodeData= { // 在每个节点显示的数据
"id": "d0c71fd3f8441810",
"topic": data[0].test1,
"tags": [data[0].test2],
"expanded": true,
"root": true,"children":[] }
this.sonProcess(data,"0",nodeData) // 组装思维导图的数据
mapdata={"nodeData": nodeData} // 思维导图展示的数据
}
//获取参数
this.ME = new MindElixir({
el: "#map",
direction: MindElixir.RIGHT,
data: mapdata,//MindElixir.new('start'), // 组装好的思维导图的数据
draggable: false, // default true
contextMenu: false, // default true
toolBar: true, // default true
nodeMenu: false, // default true
locale: 'zh_CN', // [zh_CN,zh_TW,en,ja,pt] waiting for PRs
overflowHidden: false, // default false
primaryLinkStyle: 2, // [1,2] default 1
primaryNodeVerticalGap: 25, // default 25
primaryNodeHorizontalGap: 65, // default 65
allowUndo: true,
keypress: true // default true
});
this.ME.init();
this.mapdata=mapdata;
this.clickNode() // 点击思维导图的节点时调用的方法
},
sonProcess(data,parentId,node) // 循环组装思维导图的数据
{
let sonitem= data.filter(q=>q.parentId===parentId)
sonitem.forEach(item=>{
let newson={
"topic":item.ver,
"id": item.id,
"tags": [
"ECN:" + item.ecnno ,"有效期:" + item.validate //,"创建日期:" + item.createtime
],
children:[]
}
this.sonProcess(data,item.bomid,newson)
node.children.push(newson)
})
},
clickNode(){
this.ME.bus.addListener('selectNode', node => {
// node是点击节点获取到的节点数据
})
},
}