使用Jsmind实现前端流程图功能

需求:实现流程图功能，根据状态不同显示不同的颜色，点击有对应的点击颜色

思想：根据jsmind构建思维导图，改变节点背景颜色，获取点击节点事件当点击节点是设置节点选中背景图片。

注意：由于jsmind更新各版本api都有很大改动，所以我使用的都是官方文档注明的基于各版本都支持的api

效果：

 这里的要素是根据接口返回的，具体接口数据如下：

 root是根节点，chrldren是子要素，可以根据自己的需求自行改造

代码：

先引入jsmind库（我引入的最新版本0.5）

npm install jsmind@latest --save

找到刚才引入vue中的jsmind的npm包，可以看到jsmind.css,在这里可以修改我们想要的样式，但是如果在这里修改是不会更新到git版本里面去，所以我们需要在src->style文件夹内新scss文件，这样我们改动样式可以更新到git版本控制中。

 新建一个scss文件内容如下：（自己新建了一个主题名字为034，可以自行更改）

/**
 * @license BSD
 * @copyright 2014-2023 [email protected]
 * 
 * Project Home:
 *   https://github.com/hizzgdev/jsmind/
 */

/* important section */
.jsmind-inner {
    position: relative;
    overflow: auto;
    width: 100%;
    height: 100%;
    outline: none;
}

/*box-shadow:0 0 2px #000;*/
.jsmind-inner {
    moz-user-select: -moz-none;
    -moz-user-select: none;
    -o-user-select: none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.jsmind-inner canvas {
    position: absolute;
}

/* z-index:1 */
svg.jsmind {
    position: absolute;
    z-index: 1;
}

canvas.jsmind {
    position: absolute;
    z-index: 1;
}

/* z-index:2 */
jmnodes {
    position: absolute;
    z-index: 2;
    background-color: rgba(0, 0, 0, 0);
    width: 100% !important;
    right: 40px;
}

/*background color is necessary*/
jmnode {
    position: absolute;
    cursor: default;
    max-width: 400px;
    box-shadow: 0;
}

/* 自定义自己的主题 */
jmnodes.theme-034 jmnode {
    width: 200px;
    height: 62px;
    text-align: left;
    color: #192C44;
    background-repeat: no-repeat;
    background-size: cover;
    padding: 7px 20px;
    font-size: 13px;
    border-radius: 4px;
}

/* 节点样式 */
jmnodes.theme-034 jmnode:hover {}

/* 鼠标悬停的节点样式 */
jmnodes.theme-034 jmnode.selected {
    color: #192C44;
    background-color: transparent;
}

jmnodes.theme-034 .topicbody {
    pointer-events: none;

    .title {
        font-size: 12px;
    }

    .body {
        display: flex;
        align-items: center;
        margin-top: 6px;

        .left {
            width: 7px;
            height: 7px;
            border-radius: 50%;
            margin-right: 10px;
        }

        .right {
            font-size: 12px;
        }
    }
}

jmnodes.theme-034 .acitve {
    pointer-events: none;

    .title {
        font-size: 12px;
        color: white;
    }

    .body {
        display: flex;
        align-items: center;
        margin-top: 6px;
        color: white !important;

        .left {
            width: 7px;
            height: 7px;
            background-color: #fff !important;
            border-radius: 50%;
            margin-right: 10px;
        }

        .right {
            font-size: 12px;
            color: white !important;
        }
    }
}

/* 选中的节点样式 */
jmnodes.theme-034 jmnode.root {
    width: 180px;
    height: 55px;
    text-align: center;
    padding: 10px;
    font-size: 16px;
}

jmnodes.theme-034 jmnode.root.selected {
    color: #192C44;
}

/* 根节点样式 */
jmnodes.theme-034 jmexpander {}

/* 展开/关闭节点的控制点样式 */
jmnodes.theme-034 jmexpander:hover {}

vue文件代码如下：