[JavaScript知识库]Mind Elixir思维导图使用方法

官方地址
实现方法

安装：

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是点击节点获取到的节点数据
                })
            },
}