
import 'jsmind/style/jsmind.css';
import jsMind from 'jsmind/js/jsmind.js';
 
require('jsmind/js/jsmind.draggable.js');
require('jsmind/js/jsmind.screenshot.js');

2.基本使用

代码如下（示例）：

基本的使用以及其他的一些功能可以参考下这篇博客，我当初也是从这里进行参考的。

vue实现思维导图_吕振辉的博客-CSDN博客_vue实现思维导图

三、功能实现

由于目前的页面已基本完成，所以不可能每部分的代码都是十分清晰的，且由于当时以实现功能为首要目标，代码中存在大量的冗余，尽量在进行优化，主要细说一下每一步的思路以及解决方案和遇到的问题。每个模块的代码由于功能的上下连接，单独模块放出来意义不大，且很难读懂，有些地方附上一些关键代码，其他整个文件代码到时候放在最后。

一、基本的架构及交互

由设计图可知，该页面需先输入根节点的模型组名然后点击开始建模按钮后，生成基本的架构思维图。这里主要是要注意一点，点击开始建模按钮之前，先判断用户是否有输入，同时，开始建模按钮点击之后，就应该禁用掉，点击了重新建模按钮之后，再放开开始建模按钮。

由于第二子级的标签分类是固定的，所以先按照分类写成固定数据，但是第三子级的标签名得通过不同的分类来进行瓜分，所以这个数据方面还是有点复杂的，参考性不高，更多只是个人记录。数据分类结构如下：


resultData: {
                personList: [],
                relationList: [],
                labelTypeList: {
                    pointType: [
                        { label: '自身属性标签', value: 'property', weight: 1 },
                        { label: '自身行为标签', value: 'action', weight: 1 }
                    ],
                    relationType: [
                        { label: '实质关系标签', value: 'substance', weight: 1 },
                        { label: '疑似关系标签', value: 'suspected', weight: 1 },
                        { label: '增强关系标签', value: 'strengthen', weight: 1 }
                    ]
                },
                labelNameList: {
                    pointLabel: [], // 当前选中的模型 所有的个人标签
                    relationLabel: [], // 当前选中的模型 所有的关系标签
                    // 五大类的标签名列表数据
                    propertyLabelList: [],
                    actionLabelList: [],
                    substanceLabelList: [],
                    suspectedLabelList: [],
                    strengthenLabelList: []
                }
}

二、生成思维导图以及添加右键自定义菜单

上面的 initModelChart() 方法就是初始化生成图形，同时，我们需要给每一个卡片添加点击事件，并且卡片里面的是html元素，这里我们需要在一个js文件里面进行原生html的生成，方便添加。

用于生成卡片节点元素以及其他元素的js文件, createDom.js ：


/* eslint-disable no-useless-escape */
class CreateDom {
    // 获取根卡片  模型组名
    static getModelRootDom(modelInfo) {
        return `
        <div class="model-edit-card" style="background-color: ${modelInfo.bgc}" >
            <div class="model-info">
                <p class="model-title-p">模型组名</p>
                <div class="model-name-info">
                    <p><span>${modelInfo.modelName}</span></p>
                </div>
            </div>
        </div>
        `;
    }
 
    // 获取子级卡片  模型名/标签
    static getModelCardDom(modelInfo) {
        let selectList = ``;
        for (let i = 0; i < modelInfo.modelSelectList.length; i++) {
            selectList += `<option value="${modelInfo.modelSelectList[i].value}">${modelInfo.modelSelectList[i].label}</option>`;
        }
 
    
        return `
        <div class="model-edit-card" style="background-color: ${modelInfo.bgc}" >
            <div class="model-info">
                <p class="model-title-p">${modelInfo.modelTitle}</p>
                <div class="model-name-info">
                    <select class="select-model-list" data-type='${modelInfo.modelType}' data-title='${modelInfo.modelTitle}' >
                        ${selectList}
                    </select>
                </div>
            </div>
            <div class="model-weight" >
                <p>权重</p>
                <input
                    type='text'
                    data-label='${modelInfo.selectOption}'
                    data-model='${modelInfo.selectModelId}'
                    data-level='${modelInfo.level}'
                    data-type='${modelInfo.modelType}'
                    class="model-weight-input"
                    placeholder=""
                    onkeyup="!/^(\d+\.?)?\d{0,1}$/.test(this.value)?(this.value=this.value.substring(0, this.value.length-1)): ''"
                    value=${modelInfo.modelWeight}>
                </input>
            </div>
        </div>
        `;
    }
 
    // 生成自定义右键菜单
    static getContextMenu() {
        return `
            <el-menu
                class="context-menu"
                v-show="showMenu"
                :style="{
                left: menuStyle.left,
                top: menuStyle.top,
                bottom: menuStyle.bottom,
                right: menuStyle.right
                }"
                ref="context">
                <slot>
                    <el-menu-item @click="addBrother">插入平级</el-menu-item>
                    <el-menu-item @click="addChild">插入子级</el-menu-item>
                    <el-menu-item @click="delCard">删除卡片</el-menu-item>
                </slot>
            </el-menu>
        `;
    }
 
 
    // 获取固定的初始化数据
    static getInitData(params) {
        return [
            {
                id: 'point', // 必选  ID， 所有节点的 id 不应该重复，否则 重复id的结节将被忽略
                topic: CreateDom.getModelCardDom({ bgc: '#0FA984', modelTitle: '模型名', modelSelectList: params.personList, modelType: 'point', selectOption: params.personList[0].label, selectModelId: params.personList[0].value, level: 1, modelWeight: 1 }), // 必填  节点上显示的内容
                direction: 'right', // 可选  节点的方向  此数据仅在第一层节点上有效，目前仅支持 left 和 right 两种，默认为 right
                expanded: true, //  [可选] 该节点是否是展开状态，默认为 true
                level: 1,
                type: 'point',
                title: '模型名',
                children: []
            },
            {
                id: 'relation', // 必选  ID， 所有节点的 id 不应该重复，否则 重复id的结节将被忽略
                topic: CreateDom.getModelCardDom({ bgc: '#0FA984', modelTitle: '模型名', modelSelectList: params.relationList, modelType: 'relation', selectOption: params.relationList[0].label, selectModelId: params.relationList[0].value, level: 1, modelWeight: 1 }), // 必填  节点上显示的内容
                direction: 'right', // 可选  节点的方向  此数据仅在第一层节点上有效，目前仅支持 left 和 right 两种，默认为 right
                expanded: true, //  [可选] 该节点是否是展开状态，默认为 true
                level: 1,
                type: 'relation',
                title: '模型名',
                children: []
            }
    ];
    }
}
 
export default CreateDom;

在vue文件里面引入

import CreateDom from '@/tools/CreateDom.js';

其中 initModelChart 方法的代码：


data() {
    return {
        mind: {
                // 元数据  定义思维导图的名称、 作者、版本等信息
                meta: {
                    name: '建模导图',
                    author: 'ck',
                    version: '0.2'
                },
                // 数据格式声明
                format: 'node_tree',
                // 数据内容
                data: {
                    id: 'root',
                    topic: '',
                    direction: 'right',
                    expanded: true,
                    children: []
                }
            },
        options: {
                container: 'create-model-chart', // [必选] 容器的ID
                editable: true, // [可选] 是否启用编辑
                theme: '', // [可选] 主题
                support_html: true,
                mode: 'full', // 显示模式
                view: {
                    engine: 'canvas', // 思维导图各节点之间线条的绘制引擎
                    hmargin: 120, // 思维导图距容器外框的最小水平距离
                    vmargin: 50, // 思维导图距容器外框的最小垂直距离
                    line_width: 4, // 思维导图线条的粗细
                    line_color: '#FFCC73', // 思维导图线条的颜色
                    draggable: true, // 当容器不能完全容纳思维导图时，是否允许拖动画布代替鼠标滚动
                    hide_scrollbars_when_draggable: true // 当设置 draggable = true 时，是否隐藏滚动条
                },
                layout: {
                    hspace: 100, // 节点之间的水平间距
                    vspace: 20, // 节点之间的垂直间距
                    pspace: 20 // 节点与连接线之间的水平间距（用于容纳节点收缩/展开控制器）
                },
                shortcut: {
                    enable: false // 是否启用快捷键 默认为true
                },
                menuOpts: {
                    showMenu: true,
                    injectionList: [
                        { target: 'addBrother', text: '添加同级卡片', callback: function (node) { console.log(node); } },
                        { target: 'delete', text: '删除卡片', callback: function (node) { console.log(node); } }
                    ]
                },
                isShow: true
            }
    }
}
 
 
initModelChart() {
            this.mind.data.topic = CreateDom.getModelRootDom(this.rootModel);
            this.mind.data.children = CreateDom.getInitData(this.resultData);
            this.$nextTick(() => {
                this.jm = jsMind.show(this.options, this.mind);
                this.chartLoading = false;
                // let testSelect = this.jm.get_node('easy');
                // console.log(testSelect, 'tes');
                const modelChart = document.getElementById('create-model-chart');
                modelChart.addEventListener('mousedown', e => {
                    e.stopPropagation();
                    this.showMenu = false;
                    // console.log(e, '99666');
                    // this.showTheMenu(e);
                    let selectCardId = '';
                    if (Array.isArray(e.path)) {
                        e.path.map(item => {
                            if (item.localName == 'jmnode') {
                                // console.log(item.attributes[0].nodeValue, '3030');
                                selectCardId = item.attributes[0].nodeValue;
                            }
                        });
                        // console.log(selectCardId, 'sed');
                        if (selectCardId == 'root') {
                            this.showMenu = false;
                            return this.$message.warning('根节点无法编辑');
                        } else if (!selectCardId) {
                            this.showMenu = false;
                            return false;
                        }
                        this.theSelectNode = this.jm.get_node(selectCardId);
                        // console.log(this.theSelectNode, '2200');
                        // console.log(selectCardId, '0022');
                        this.clickSelectCard(selectCardId);
                        this.findClickCardIndex(this.theSelectNode.data.type, this.theSelectNode.data.level, this.theSelectNode.id);
                    }
                });
 
                this.addSelectChangeFunc();
                this.addInputBlurFunc();
            });
        }

其中，给每个节点添加点击事件，由于有后续添加的节点，所以最好绑定在父节点上面，通过事件捕获，找到是卡片的节点，给这个卡片添加对应的操作。相关的操作方法代码放在整体里面，这里不做详细展示，主要是看如何通过原生js找到节点位置并对该选中的节点进行添加自定义的鼠标右键菜单，这里即是 clickSelectCard 这个方法，代码如下：


clickSelectCard(nodeId) {
            this.editor = this.jm.view.e_editor;
            // jsmind 添加自定义菜单事件
            this.jm.view.add_event(this.editor, 'contextmenu', (e) => {
                const selectedNode = this.jm.get_node(nodeId);
                //  && selectedNode.data.type
                if (selectedNode) {
                    e.preventDefault();
                    const el = document.querySelector('.context-menu .el-menu-item');
                    const width = parseFloat(window.getComputedStyle(el).width);
                    const height = parseFloat(window.getComputedStyle(el).height) * 3 + 12;
                    const windowHeight = window.innerHeight;
                    const windowWidth = window.innerWidth;
 
                    // 极限位置 避免越界
                    if (e.clientY + height > windowHeight) {
                        // console.log('23');
                        this.menuStyle.left = e.clientX + 'px';
                        this.menuStyle.top = 'unset';
                        this.menuStyle.bottom = 0;
                    } else if (e.clientX + width > windowWidth) {
                        // console.log('24');
                        this.menuStyle.top = e.clientY + 'px';
                        this.menuStyle.left = 'unset';
                        this.menuStyle.right = 0;
                    } else {
                        // console.log('25');
                        this.menuStyle.left = e.clientX - 210 + 'px';
                        this.menuStyle.top = e.clientY - 150 + 'px';
                        this.menuStyle.bottom = 'unset';
                    }
                    this.showMenu = true;
                } else {
                    this.showMenu = false;
                }
            });
        }

这里的菜单位置可能不太对，需要自己来进行调整。

三、自定义菜单的添加平级、添加子级、删除卡片的功能

这里主要通过找到是哪一个节点右键了，根据这个节点来做相应的功能，其中菜单的元素代码如下：


<el-menu
            class="context-menu"
            v-show="showMenu"
            :style="{
            left: menuStyle.left,
            top: menuStyle.top,
            bottom: menuStyle.bottom,
            right: menuStyle.right,
            }"
            ref="context">
            <slot>
                <el-menu-item @click="addBrother">插入平级</el-menu-item>
                <el-menu-item @click="addChild">插入子级</el-menu-item>
                <el-menu-item @click="deleteCard">删除卡片</el-menu-item>
            </slot>
        </el-menu>
 
 
.context-menu {
        position: absolute;
        width: 8.3333rem;
        z-index: 32;
    }

由于添加同级和添加子级都是用的同一个api，官方里面的往元素后面添加节点的方法其实并不是添加子级，这里添加子级只需要把当前选中的卡片节点的id设置为父级id即可。

这里先写一个方法返回添加节点时需要的对象数据，如下：


// 添加卡片的方法 获得相关的数据对象
        whileCardAddFunc(type, node) {
            var funcObj = {};
            console.log(node, 'node');
            //  type 进行 同级 bother  或者  子级 children   的分类  this.resultData.personList[0].label
            if (type == 'bother') {
                if (node.data.level == '1') {
                    node.data.type == 'point' ? this.pointLevel1Index++ : this.relationLevel1Index++;
                    funcObj.parentId = node.parent.id;
                    funcObj.id = new Date().getTime() + parseFloat(Math.random() * 1000);
                    funcObj.topic = CreateDom.getModelCardDom({ bgc: '#0FA984', modelTitle: '模型名', modelSelectList: node.data.type == 'point' ? this.resultData.personList : this.resultData.relationList, modelType: node.data.type, selectOption: node.data.type == 'point' ? this.resultData.personList[0].label : this.resultData.relationList[0].label, selectModelId: node.data.type == 'point' ? this.resultData.personList[0].value : this.resultData.relationList[0].value, level: 1, modelWeight: 1 });
                    funcObj.data = {
                        direction: 1,
                        expanded: true,
                        level: 1,
                        type: node.data.type,
                        children: []
                    };
                    // 判断是 个人模型  还是 关系 模型  往 已选则的 list 里面进行 push 一个
                    this.addLabelValueWeight(node.data.type, 1, funcObj.id);
                } else if (node.data.level == '2') {
                    node.data.type == 'point' ? this.pointLevel2Index++ : this.relationLevel2Index++;
                    funcObj.parentId = node.parent.id;
                    funcObj.id = new Date().getTime() + parseFloat(Math.random() * 1000);
                    funcObj.topic = CreateDom.getModelCardDom({ bgc: '#5B9BD5', modelTitle: '标签分类', modelSelectList: node.data.type == 'point' ? this.resultData.labelTypeList.pointType : this.resultData.labelTypeList.relationType, modelType: node.data.type, selectOption: node.data.type == 'point' ? this.resultData.labelTypeList.pointType[0].label : this.resultData.labelTypeList.relationType[0].label, selectModelId: node.data.type == 'point' ? this.resultData.labelTypeList.pointType[0].value : this.resultData.labelTypeList.relationType[0].value, level: 2, modelWeight: this.findTheCardWeight(node.data.type, 2) });
                    funcObj.data = {
                        direction: 'right',
                        expanded: true,
                        level: 2,
                        type: node.data.type,
                        children: []
                    };
                    this.addLabelValueWeight(node.data.type, 2, funcObj.id);
                } else if (node.data.level == '3') {
                    let optionList = this.getLabelNameListBySort(node.data.type, node.data.type == 'point' ? this.selectPonitLabelSort : this.selectRelationLabelSort);
                    node.data.type == 'point' ? this.pointLevel3Index++ : this.relationLevel3Index++;
                    funcObj.parentId = node.parent.id;
                    funcObj.id = new Date().getTime() + parseFloat(Math.random() * 1000);
                    funcObj.topic = CreateDom.getModelCardDom({ bgc: '#E3950E', modelTitle: '标签名', modelSelectList: optionList, modelType: node.data.type, selectOption: optionList.length > 0 ? optionList[0].label : '', selectModelId: optionList.length > 0 ? optionList[0].value : '', level: 3, modelWeight: this.findTheCardWeight(node.data.type, 3, optionList.length > 0 ? optionList[0].label : '') });
 
                    funcObj.data = {
                        level: 3,
                        type: node.data.type
                    };
                    this.addLabelValueWeight(node.data.type, 3, funcObj.id);
                }
            } else if (type == 'children') {
                if (node.data.level == '1') {
                    console.log(this.findTheCardWeight(node.data.type, 2), 'classWei');
                    node.data.type == 'point' ? this.pointLevel2Index++ : this.relationLevel2Index++;
                    funcObj.afterId = node.id;
                    funcObj.id = new Date().getTime() + parseFloat(Math.random() * 1000);
                    funcObj.topic = CreateDom.getModelCardDom({ bgc: '#5B9BD5', modelTitle: '标签分类', modelSelectList: node.data.type == 'point' ? this.resultData.labelTypeList.pointType : this.resultData.labelTypeList.relationType, modelType: node.data.type, selectOption: node.data.type == 'point' ? this.resultData.labelTypeList.pointType[0].label : this.resultData.labelTypeList.relationType[0].label, selectModelId: node.data.type == 'point' ? this.resultData.labelTypeList.pointType[0].value : this.resultData.labelTypeList.relationType[0].value, level: 2, modelWeight: this.findTheCardWeight(node.data.type, 2) });
                    funcObj.data = {
                        direction: 'right',
                        expanded: true,
                        level: 2,
                        type: node.data.type,
                        children: []
                    };
                    this.addLabelValueWeight(node.data.type, 2, funcObj.id);
                } else if (node.data.level == '2') {
                    let optionsList = this.getLabelNameListBySort(node.data.type, node.data.type == 'point' ? this.selectPonitLabelSort : this.selectRelationLabelSort);
                    node.data.type == 'point' ? this.pointLevel3Index++ : this.relationLevel3Index++;
                    funcObj.afterId = node.id;
                    funcObj.id = new Date().getTime() + parseFloat(Math.random() * 1000);
                    funcObj.topic = CreateDom.getModelCardDom({ bgc: '#E3950E', modelTitle: '标签名', modelSelectList: optionsList, modelType: node.data.type, selectOption: optionsList.length > 0 ? optionsList[0].label : '', selectModelId: optionsList.length > 0 ? optionsList[0].value : '', level: 3, modelWeight: this.findTheCardWeight(node.data.type, 3, optionsList.length > 0 ? optionsList[0].label : '') });
                    funcObj.data = {
                        level: 3,
                        type: node.data.type
                    };
                    this.addLabelValueWeight(node.data.type, 3, funcObj.id);
                } else if (node.data.level == '3') {
                    funcObj.error = true;
                    funcObj.msg = '无法再进行下一级的分类添加';
                }
            }
            let copyObj = JSON.parse(JSON.stringify(funcObj));
            // console.log(copyObj, '30369');
            return copyObj;
        }

由于最后第三级的标签名卡片是不能再往后面添加子级了，所以设置一个error为true，并返回一个msg，这里需要注意的是，我们需要设置 options 里面的 editable 属性为 true，开启编辑，否则是无法进行节点卡片的添加的，这样有一个不好的地方就是双击卡片会变成html元素的input输入框，在使用时需要注意。

添加同级卡片的方法：


// 添加同级卡片
        addBrother() {
            // parent_node, node_id, topic, data
            let cardObj = this.whileCardAddFunc('bother', this.theSelectNode);
            // console.log(cardObj, 'cla');
            this.jm.add_node(cardObj.parentId, cardObj.id, cardObj.topic, cardObj.data);
            this.showMenu = false;
            this.addSelectChangeFunc();
            this.addInputBlurFunc();
        }

添加子级卡片的方法：


// 添加子卡片
        addChild() {
            // node_after, node_id, topic, data
            // 判断是哪个层级  1  模型名   2   标签分类    3 标签名
            let cardObj = this.whileCardAddFunc('children', this.theSelectNode);
            // console.log(cardObj, '6688');
            if (cardObj.error) {
                this.showMenu = false;
                return this.$message.warning(cardObj.msg);
            }
            this.jm.add_node(cardObj.afterId, cardObj.id, cardObj.topic, cardObj.data);
            this.showMenu = false;
            this.addSelectChangeFunc();
            this.addInputBlurFunc();
        }

这里最后的两个方法，是卡片里面的select下拉框的切换方法和权重input输入框的blur方法，在生成新的卡片时，需要给所有的卡片重新绑定事件，否则新生成的卡片是不带下拉框的change和输入框的blur事件的，这里使用 onchange和 onblur 方法来进行监听，重新设置时会覆盖掉原来的方法，不推荐使用 addEventListener，因为不会覆盖，会重复执行。

删除卡片的方法：


let that = this;
            // let deleteNode = JSON.parse(JSON.stringify(this.theSelectNode));
            let deleteNode = StringTools.cloneDeepObj(that.theSelectNode);
            this.$confirm(
                '删除此节点卡片(包含所有子级卡片), 是否继续?',
                '提示',
                {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }
            ).then(() => {
                // 删除卡片
                if (deleteNode.data.type == 'point') {
                    if (deleteNode.data.level == 1) {
                        if (that.haveSelectPointModelAndWeight.length <= 1) {
                            return that.$message.warning('至少保留一个个人模型名卡片');
                        }
                        that.haveSelectPointModelAndWeight.map((item, index) => {
                            if (item.boxId == deleteNode.id) {
                                that.haveSelectPointModelAndWeight.splice(index, 1);
                            }
                        });
                    } else if (deleteNode.data.level == 2) {
                        that.haveSelectPointModelAndWeight[that.haveSelectPointIndex].children.map((item, index) => {
                            if (item.boxId == deleteNode.id) {
                                that.haveSelectPointModelAndWeight[that.haveSelectPointIndex].children.splice(index, 1);
                            }
                        });
                    } else if (deleteNode.data.level == 3) {
                        that.haveSelectPointModelAndWeight[that.haveSelectPointIndex].children[that.haveSelectPointLabelClassIndex].children.map((item, index) => {
                            if (item.boxId == deleteNode.id) {
                                that.haveSelectPointModelAndWeight[this.haveSelectPointIndex].children[that.haveSelectPointLabelClassIndex].children.splice(index, 1);
                            }
                        });
                    }
                } else {
                    if (deleteNode.data.level == 1) {
                        if (that.haveSelectRelationModelAndWeight.length <= 1) {

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/运维做开发/article/detail/904337