jsplumb中文教程地址: https://wdd.js.org/jsplumb-chinese-tutorial/#/
需求效果展示:
说明:在展示普通流程图的基础上,实现以下功能:在流程图中展示当前所在节点,并体现出其流转过程。上图中当前节点为分公司咨询组,流转过程为:派单->省公司虚拟专家组->分公司咨询组
安装依赖包:npm i jsplumb
在main.js中将jsplumb挂在vue下便于页面获取
import jsPlumb from 'jsplumb'
Vue.prototype.$jsPlumb = jsPlumb.jsPlumb
主要代码:
<div id="container">
<div class="col1">
<div id="processDefineDiv_node_2" name="cell">派单</div>
</div>
<div class="col2">
<div v-for="item in list2" :key="item.nodeId" :id="item.nodeId" name="cell">{
{ item.name }}</div>
</div>
<div class="col3">
<div id="processDefineDiv_node_6" name="cell">完成</div>
</div>
</div>
// 样式
#container{
position: relative;
width: 100%;
padding: 0 50px;
}
.col2,.col1{
float: left;
text-align: center;
}
.col3{
float: right;
text-align: center;
}
.col1{
width: 180px;
}
.col2{