vue如何使用 jsplumb 生成流程图
作者：陈大大小
文章介绍了如何在Vue项目中使用jsPlumb库来生成流程图,文章提供了两个简单的示例代码,展示了如何定义流程图的数据字段和如何配置连线样式,最后,文章鼓励读者继续探索更多关于vue和jsPlumb的使用技巧,感兴趣的朋友一起看看吧
1、安装jsPlumb：
npm install jsplumb
2、 在使用的 .vue 文件中引入
import { jsPlumb } from "jsplumb";图一：
图二：
图一简单示例：
流程图的数据字段：
id: "item-12", // id(必传)
label: "节点一", // 节点名称(必传)
nodeName: "start", // 节点标识：start：开始节点；end：结束节点；
connectId:
[
{
source: "item-12", // 连接线起点(必传)
target: "item-7", // 连接线终点(必传)
stub: 40, // 连接线距离主流程线的位置高度(同一个节点有第二条连接线的时候
必传，值越大距离主流程距离越远)
direction: "Bottom", // 连接线距离主流程线的位置方向(同一个节点有第二条连接
线的时候必传)
}
],
tipContent:
[
{
handleUser: "业务部", // 节点内容信息
handleTime: "2024-10-23 15:20:08" // 节点内容信息
}
]（代码直接复制即可食用）
templete 代码
<template>
<div class="bfd-pages">
<!-- 流程图 -->
<div class="title-box">
<div class="title">
<span>流程图</span>
</div>
</div>
<div class="table-page-search-wrapper">
<div class="line-wrap">
<div
v-for="(item, index) in flowChartDataList"
:key="index"
:id="item.id"
:class="
getColor(item.id) == '1'
? 'state-item-during'
: getColor(item.id) == '2'
? 'state-item-finish'
: 'state-item'
"
>
<img
v-if="item.nodeName == 'start'"
class="imgs"
src="@/assets/images/start.png"
alt=""
/>
<img
v-else-if="item.nodeName == 'summary'"
class="imgs"
src="@/assets/images/cent.png"
alt=""
/>
<img
v-else-if="item.nodeName == 'end'"
class="imgs"
src="@/assets/images/end.png"
alt=""
/>
<div v-else>
<div v-if="item.tipContent">
<a-tooltip>
<template #title>
<div v-for="(detailInfoItem, i) in item.tipContent" :key="i">
<div>{{ detailInfoItem.handleUser }}</div>
<div>{{ detailInfoItem.handleTime }}</div>
</div>
</template>
{{ item.label }}
</a-tooltip>
</div>
<div v-else>
{{ item.label }}
</div>
</div>
</div>
</div>
</div>
</div>
</template>script 代码
<script>
import { jsPlumb } from "jsplumb";
export default {
name: "LiuChengTu",
props: {
// 流程编码
flowCode: {
type: String,
default: "",
},
// id
businessId: {
type: String,
default: "",
},
flowVersion: {
type: String,
default: "",
},
},
data() {
return {
url: {
info: "/api/system/common/statusSet/approval/getFlowConfigForShow",
},
// 流程图数据
flowChartData: [
{
"id": "0",
"label": "",
"nodeName": "start",
"connectId": [
{
"source": "0",
"target": "10",
"stub": 5
}
]
},
{
"id": "10",
"label": "节点一",
"nodeName": "",
"connectId": [
{
"source": "10",
"target": "20",
"stub": 5
}
]
},
{
"id": "20",
"label": "节点二",
"nodeName": "",
"connectId": [
{
"source": "20",
"target": "30",
"stub": 5
},
{
"source": "20",
"target": "60",
"stub": 80,
"direction": "Top"
},
{
"source": "20",
"target": "70",
"stub": 80,
"direction": "Top"
}
]
},
{
"id": "30",
"label": "节点三",
"nodeName": "",
"connectId": [
{
"source": "30",
"target": "40",
"stub": 5
},
{
"source": "30",
"target": "50",
"stub": 40,
"direction": "Top"
}
]
},
{
"id": "40",
"label": "节点四",
"nodeName": "",
"connectId": [
{
"source": "40",
"target": "50",
"stub": 5
}
]
},
{
"id": "50",
"label": "节点五",
"nodeName": "",
"connectId": [
{
"source": "50",
"target": "60",
"stub": 5
},
{
"source": "50",
"target": "70",
"stub": 40,
"direction": "Bottom"
}
]
},
{
"id": "60",
"label": "节点六",
"nodeName": "",
"connectId": [
{
"source": "60",
"target": "70",
"stub": 5
}
]
},
{
"id": "70",
"label": "节点七",
"nodeName": "",
"connectId": [
{
"source": "70",
"target": "999",
"stub": 5
}
]
},
{
"id": "999",
"label": "",
"nodeName": "end",
"connectId": []
}
],
defatltDirection: [
"Left",
"Right",
"Top",
"Bottom",
[0.3, 0, 0, -1],
[0.7, 0, 0, -1],
[0.3, 1, 0, 1],
[0.7, 1, 0, 1],
],
topDirection: ["Top", "Top"],
bottomDirection: ["Bottom", "Bottom"],
flowChartDataList: [], // 流程图数据
duringNode: "20", // 在节点期间
finishedNode: "10", // 已完成节点
plumbInsInfo: null, // 暂存流程图图像数据
};
},
mounted() {
this.initJsPlumb();
},
methods: {
getColor(val) {
let duringStatus = null;
let finishStatus = null;
if (this.duringNode !== null) {
let dataInfo = this.duringNode.split(',');
duringStatus = dataInfo.includes(val);
}
if (this.finishedNode !== null) {
let dataInfo = this.finishedNode.split(',');
finishStatus = dataInfo.includes(val);
}
if (duringStatus == true) {
// 当前节点
return "2";
} else if (finishStatus == true) {
// 已完成节点
return "1";
} else {
return "0";
}
},
initJsPlumb() {
if(this.plumbInsInfo !== null) {
// 首先删除所有的连线
this.plumbInsInfo.deleteEveryConnection();
}
let plumbIns = jsPlumb.getInstance();
let jsPlumbConnectList = [];
// 处理数据
this.flowChartData.forEach((item, index) => {
if (item.connectId.length > 1) {
item.connectId.forEach((eleInfo, ind) => {
if (ind == 0) {
let plumbInsInfo = {
source: eleInfo.source,
target: eleInfo.target,
anchor: [
"Left",
"Right",
"Top",
"Bottom",
[0.3, 0, 0, -1],
[0.7, 0, 0, -1],
[0.3, 1, 0, 1],
[0.7, 1, 0, 1],
],
connector: [
"Flowchart",
{
cornerRadius: 5,
alwaysRespectStubs: true,
stub: eleInfo.stub,
},
],
endpoint: "Blank",
overlays: [["Arrow", { width: 8, length: 8, location: 1 }]], // overlay
// 添加样式
paintStyle: {
stroke:
eleInfo.nodeDescribe == "pass"
? "#008000"
: eleInfo.nodeDescribe == "reject"
? "#ff0000"
: "#909399",
strokeWidth: 2,
}, // connector
};
jsPlumbConnectList.push(plumbInsInfo);
} else {
let plumbInsInfo = {
source: eleInfo.source,
target: eleInfo.target,
anchor:
eleInfo.direction == "Top"
? this.topDirection
: eleInfo.direction == "Bottom"
? this.bottomDirection
: this.defatltDirection,
connector: [
"Flowchart",
{
cornerRadius: 5,
alwaysRespectStubs: true,
stub: eleInfo.stub,
},
],
endpoint: "Blank",
overlays: [["Arrow", { width: 8, length: 8, location: 1 }]], // overlay
// 添加样式
paintStyle: {
stroke:
eleInfo.nodeDescribe == "pass"
? "#008000"
: eleInfo.nodeDescribe == "reject"
? "#ff0000"
: "#909399",
strokeWidth: 2,
}, // connector
};
jsPlumbConnectList.push(plumbInsInfo);
}
});
} else {
if (item.nodeName !== "end") {
let plumbInsInfo = {
source: item.connectId[0].source,
target: item.connectId[0].target,
anchor: [
"Left",
"Right",
"Top",
"Bottom",
[0.3, 0, 0, -1],
[0.7, 0, 0, -1],
[0.3, 1, 0, 1],
[0.7, 1, 0, 1],
],
connector: [
"Flowchart",
{
cornerRadius: 5,
alwaysRespectStubs: true,
stub: item.connectId[0].stub,
},
],
endpoint: "Blank",
overlays: [
["Arrow", { width: 8, length: 8, location: 1 }],
[
"Label",
{
label: item.connectId[0].lableName
? item.connectId[0].lableName
: "",
location: 0.5,
cssClass: "jsplumb-flowchart-label",
visible: true,
},
],
], // overlay
paintStyle: {
stroke:
item.connectId[0].nodeDescribe == "pass"
? "#008000"
: item.connectId[0].nodeDescribe == "reject"
? "#ff0000"
: "#909399",
strokeWidth: 2,
}, // 连接线样式
};
jsPlumbConnectList.push(plumbInsInfo);
}
}
});
this.flowChartDataList = this.flowChartData;
console.log("------", jsPlumbConnectList);
setTimeout(() => {
plumbIns.ready(function () {
jsPlumbConnectList.forEach((ele) => {
plumbIns.connect(ele);
});
});
this.plumbInsInfo = plumbIns;
}, 500);
},
},
};
</script>style 代码
<style lang="less" scoped>
.title-box {
display: flex;
justify-content: space-between;
border-bottom: 1px solid #2464b0;
margin-bottom: 20px;
.title {
height: 40px;
font-size: 16px;
color: #2464b0;
font-weight: 650;
// border-bottom: 1px solid #2464b0;
display: flex;
-webkit-box-align: center;
align-items: center;
// margin-bottom: 20px;
}
.title:before {
display: inline-block;
height: 30px;
margin-right: 10px;
border-right: 7px solid #2464b0;
content: "";
}
}
.table-page-search-wrapper {
padding: 150px 0 10px 0;
.line-wrap {
display: flex;
margin-bottom: 100px;
justify-content: center;
align-items: center;
.state-item {
width: 120px;
height: 100px;
color: #606266;
background: #f6f6f6;
border: 2px solid rgba(0, 0, 0, 0.05);
text-align: center;
// line-height: 30px;
font-family: sans-serif;
border-radius: 4px;
margin-right: 60px;
font-size: 12px;
padding: 5px 10px;
display: flex;
justify-content: center;
align-items: center;
font-weight: normal;
.imgs {
width: 50px;
height: 50px;
}
}
.state-item-during {
width: 120px;
height: 100px;
color: green;
background: #f6f6f6;
border: 2px solid green;
text-align: center;
// line-height: 30px;
font-family: Arial, sans-serif;
border-radius: 8px;
margin-right: 60px;
font-size: 12px;
padding: 5px 10px;
display: flex;
justify-content: center;
align-items: center;
font-weight: normal;
.imgs {
width: 50px;
height: 50px;
}
}
.state-item-finish {
width: 120px;
height: 100px;
color: red;
background: #f6f6f6;
border: 2px solid red;
text-align: center;
// line-height: 30px;
font-family: sans-serif;
border-radius: 4px;
margin-right: 60px;
font-size: 12px;
padding: 5px 10px;
display: flex;
justify-content: center;
align-items: center;
font-weight: normal;
.imgs {
width: 50px;
height: 50px;
}
}
}
}
</style>图二简单示例：
注意：注意看 id 为"item-3"和"item-9"那条数据的连线配置
其中有几个小图片，可以用自己的本地图片代替（图标大小的）
<template>
<div id="wrapper">
<div class="line-wrap" v-if="flowChartData1.length == 2">
<div :id="flowChartData1[1].id" class="state-item">
{{ flowChartData1[1].lable }}
</div>
</div>
<div class="line-wrap">
<div v-for="(item, index) in flowChartData" :key="index" :id="item.id" :class="item.nodeName == 'start' || item.nodeName == 'end' || item.nodeName == 'summary' ? 'state-item-img' : 'state-item'">
<img v-if="item.nodeName == 'start'" class="imgs" src="../assets/img/start.png" alt="" />
<img v-else-if="item.nodeName == 'summary'" class="imgs" src="../assets/img/cent.png" alt="" />
<img v-else-if="item.nodeName == 'end'" class="imgs" src="../assets/img/end.png" alt="" />
<div v-else>
{{ item.lable }}
</div>
</div>
</div>
<div class="line-wrap" v-if="flowChartData1.length > 0 && flowChartData1.length < 3">
<div :id="flowChartData1[0].id" class="state-item">
{{ flowChartData1[0].lable }}
</div>
</div>
</div>
</template>
<script>
import { jsPlumb } from "jsplumb";
export default {
name: "LiuChengTu",
data() {
return {
// 一行数据的
// flowChartData: [
// { id: "item-0", lable: "", nodeName: "start", connectId: [{source: "item-0", target: "item-1"}] }, // 开始
// { id: "item-1", lable: "改革处-经办人-发起", nodeName: "", connectId: [{source: "item-1", target: "item-2"}] },
// { id: "item-2", lable: "承办部门-改革联系人填报/分发", nodeName: "", connectId: [{source: "item-2", target: "item-3"}] },
// { id: "item-3", lable: "", nodeName: "summary", connectId: [{source: "item-3", target: "item-4"}] }, // 汇总/分发
// { id: "item-4", lable: "承办部门-部门主任-审批", nodeName: "", connectId: [{source: "item-4", target: "item-5"}] },
// { id: "item-5", lable: "改革处-经办人-合规性审查", nodeName: "", connectId: [{source: "item-5", target: "item-6"}] },
// { id: "item-6", lable: "改革处-处领导-合规性审查", nodeName: "", connectId: [{source: "item-6", target: "item-7"}] },
// { id: "item-7", lable: "", nodeName: "summary", connectId: [{source: "item-7", target: "item-8"}] }, // 汇总/分发
// { id: "item-8", lable: "", nodeName: "end", connectId: [] }, // 结束
// ],
// 两行数据的
// flowChartData: [
// { id: "item-0", lable: "", nodeName: "start", connectId: [{source: "item-0", target: "item-1"}] }, // 开始
// { id: "item-1", lable: "改革处-经办人-发起", nodeName: "", connectId: [{source: "item-1", target: "item-2"}] },
// { id: "item-2", lable: "承办部门-改革联系人填报/分发", nodeName: "", connectId: [{source: "item-2", target: "item-3"}] },
// { id: "item-3", lable: "", nodeName: "summary", connectId: [{source: "item-3", target: "item-4"}, {source: "item-3", target: "item-9"}] }, // 汇总/分发
// { id: "item-4", lable: "承办部门-部门主任-审批", nodeName: "", connectId: [{source: "item-4", target: "item-5"}] },
// { id: "item-5", lable: "改革处-经办人-合规性审查", nodeName: "", connectId: [{source: "item-5", target: "item-6"}] },
// { id: "item-6", lable: "改革处-处领导-合规性审查", nodeName: "", connectId: [{source: "item-6", target: "item-7"}] },
// { id: "item-7", lable: "", nodeName: "summary", connectId: [{source: "item-7", target: "item-8"}] }, // 汇总/分发
// { id: "item-8", lable: "", nodeName: "end", connectId: [] }, // 结束
// { id: "item-9", lable: "改革处-经办人-接收待阅", nodeName: "handleOut", connectId: [{source: "item-9", target: "item-7"}] }, // 第二行数据
// ],
// 三行数据的
flowChartData: [
{ id: "item-0", lable: "", nodeName: "start", connectId: [{source: "item-0", target: "item-1"}] }, // 开始
{ id: "item-1", lable: "改革处-经办人-发起", nodeName: "", connectId: [{source: "item-1", target: "item-2"}] },
{ id: "item-2", lable: "承办部门-改革联系人填报/分发", nodeName: "", connectId: [{source: "item-2", target: "item-3"}] },
{ id: "item-3", lable: "", nodeName: "summary", connectId: [{source: "item-3", target: "item-4"}, {source: "item-3", target: "item-9"}, {source: "item-3", target: "item-10"}] }, // 汇总/分发
{ id: "item-4", lable: "承办部门-部门主任-审批", nodeName: "", connectId: [{source: "item-4", target: "item-5"}] },
{ id: "item-5", lable: "改革处-经办人-合规性审查", nodeName: "", connectId: [{source: "item-5", target: "item-6"}] },
{ id: "item-6", lable: "改革处-处领导-合规性审查", nodeName: "", connectId: [{source: "item-6", target: "item-7"}] },
{ id: "item-7", lable: "", nodeName: "summary", connectId: [{source: "item-7", target: "item-8"}] }, // 汇总/分发
{ id: "item-8", lable: "", nodeName: "end", connectId: [] }, // 结束
{ id: "item-9", lable: "改革处-经办人-接收待阅", nodeName: "handleOut", connectId: [{source: "item-9", target: "item-7"}] }, // 第二行数据
{ id: "item-10", lable: "改革处-经办人-接收待阅123", nodeName: "handleOut", connectId: [{source: "item-10", target: "item-7"}] }, // 第二行数据
],
flowChartData1: []
};
},
mounted() {
this.initJsPlumb();
},
methods: {
initJsPlumb() {
let jsPlumbConnectList = [];
let listData = [];
let fenfaData = [];
// 处理数据
this.flowChartData.forEach(ele=>{
if(ele.connectId.length == 1) {
if(ele.nodeName == "handleOut") {
fenfaData.push(ele);
}else {
listData.push(ele);
let plumbInsInfo = {
source: ele.connectId[0].source,
target: ele.connectId[0].target,
anchor: [
"Left",
"Right",
"Top",
"Bottom",
[0.3, 0, 0, -1],
[0.7, 0, 0, -1],
[0.3, 1, 0, 1],
[0.7, 1, 0, 1],
],
connector: [
"Flowchart",
{ cornerRadius: 5, alwaysRespectStubs: true, stub: 5 },
],
endpoint: "Blank",
overlays: [["Arrow", { width: 8, length: 8, location: 1 }]], // overlay
// 添加样式
paintStyle: { stroke: "#909399", strokeWidth: 2 }, // connector
}
jsPlumbConnectList.push(plumbInsInfo)
}
}else if(ele.connectId.length == 1){
if(ele.nodeName == "handleOut") {
fenfaData.push(ele);
}else {
listData.push(ele);
ele.connectId.forEach((itemInfo,index)=>{
if(index == 0) {
let plumbInsInfo = {
source: itemInfo.source,
target: itemInfo.target,
anchor: [
"Left",
"Right",
"Top",
"Bottom",
[0.3, 0, 0, -1],
[0.7, 0, 0, -1],
[0.3, 1, 0, 1],
[0.7, 1, 0, 1],
],
connector: [
"Flowchart",
{ cornerRadius: 5, alwaysRespectStubs: true, stub: 5 },
],
endpoint: "Blank",
overlays: [["Arrow", { width: 8, length: 8, location: 1 }]], // overlay
// 添加样式
paintStyle: { stroke: "#909399", strokeWidth: 2 }, // connector
}
jsPlumbConnectList.push(plumbInsInfo)
}else {
let plumbInsInfo = {
source: itemInfo.source,
target: itemInfo.target,
anchor: ["Bottom", "Left"],
connector: [
"Flowchart",
{ cornerRadius: 5, alwaysRespectStubs: true, stub: 5 },
],
endpoint: "Blank",
overlays: [["Arrow", { width: 8, length: 8, location: 1 }]], // overlay
// 添加样式
paintStyle: { stroke: "#909399", strokeWidth: 2 }, // connector
}
jsPlumbConnectList.push(plumbInsInfo)
}
})
}
}else {
if(ele.nodeName == "handleOut") {
fenfaData.push(ele);
}else {
listData.push(ele);
ele.connectId.forEach((itemInfo,index)=>{
if(index == 0) {
let plumbInsInfo = {
source: itemInfo.source,
target: itemInfo.target,
anchor: [
"Left",
"Right",
"Top",
"Bottom",
[0.3, 0, 0, -1],
[0.7, 0, 0, -1],
[0.3, 1, 0, 1],
[0.7, 1, 0, 1],
],
connector: [
"Flowchart",
{ cornerRadius: 5, alwaysRespectStubs: true, stub: 5 },
],
endpoint: "Blank",
overlays: [["Arrow", { width: 8, length: 8, location: 1 }]], // overlay
// 添加样式
paintStyle: { stroke: "#909399", strokeWidth: 2 }, // connector
}
jsPlumbConnectList.push(plumbInsInfo)
}else if(index == 1) {
let plumbInsInfo = {
source: itemInfo.source,
target: itemInfo.target,
anchor: ["Bottom", "Left"],
connector: [
"Flowchart",
{ cornerRadius: 5, alwaysRespectStubs: true, stub: 5 },
],
endpoint: "Blank",
overlays: [["Arrow", { width: 8, length: 8, location: 1 }]], // overlay
// 添加样式
paintStyle: { stroke: "#909399", strokeWidth: 2 }, // connector
}
jsPlumbConnectList.push(plumbInsInfo)
}else {
let plumbInsInfo = {
source: itemInfo.source,
target: itemInfo.target,
anchor: ["Top", "Left"],
connector: [
"Flowchart",
{ cornerRadius: 5, alwaysRespectStubs: true, stub: 5 },
],
endpoint: "Blank",
overlays: [["Arrow", { width: 8, length: 8, location: 1 }]], // overlay
// 添加样式
paintStyle: { stroke: "#909399", strokeWidth: 2 }, // connector
}
jsPlumbConnectList.push(plumbInsInfo)
}
})
}
}
})
this.flowChartData = listData;
this.flowChartData1 = fenfaData;
if(this.flowChartData1.length > 0) {
this.flowChartData1.forEach((ele, index)=>{
if(index==0) {
let plumbInsInfo = {
source: ele.connectId[0].source,
target: ele.connectId[0].target,
anchor: ["Right", "Bottom"],
connector: [
"Flowchart",
{ cornerRadius: 5, alwaysRespectStubs: true, stub: 5 },
],
endpoint: "Blank",
overlays: [["Arrow", { width: 8, length: 8, location: 1 }]], // overlay
// 添加样式
paintStyle: { stroke: "#909399", strokeWidth: 2 }, // connector
}
jsPlumbConnectList.push(plumbInsInfo)
}else {
let plumbInsInfo = {
source: ele.connectId[0].source,
target: ele.connectId[0].target,
anchor: ["Right", "Top"],
connector: [
"Flowchart",
{ cornerRadius: 5, alwaysRespectStubs: true, stub: 5 },
],
endpoint: "Blank",
overlays: [["Arrow", { width: 8, length: 8, location: 1 }]], // overlay
// 添加样式
paintStyle: { stroke: "#909399", strokeWidth: 2 }, // connector
}
jsPlumbConnectList.push(plumbInsInfo)
}
})
}
setTimeout(() => {
let plumbIns = jsPlumb.getInstance();
plumbIns.ready(function () {
jsPlumbConnectList.forEach(ele=>{
plumbIns.connect(ele);
})
})
}, 500);
return;
// let plumbIns = jsPlumb.getInstance();
plumbIns.ready(function () {
plumbIns.connect({
// 对应上述基本概念
source: "item-0",
target: "item-1",
anchor: [
"Left",
"Right",
"Top",
"Bottom",
[0.3, 0, 0, -1],
[0.7, 0, 0, -1],
[0.3, 1, 0, 1],
[0.7, 1, 0, 1],
],
connector: [
"Flowchart",
{ cornerRadius: 5, alwaysRespectStubs: true, stub: 5 },
],
endpoint: "Blank",
overlays: [["Arrow", { width: 8, length: 8, location: 1 }]], // overlay
// 添加样式
paintStyle: { stroke: "#909399", strokeWidth: 2 }, // connector
// endpointStyle: { fill: '#909399', outlineStroke: '#606266', outlineWidth: 1 } // endpoint
});
plumbIns.connect({
// 对应上述基本概念
source: "item-1",
target: "item-2",
anchor: [
"Left",
"Right",
"Top",
"Bottom",
[0.3, 0, 0, -1],
[0.7, 0, 0, -1],
[0.3, 1, 0, 1],
[0.7, 1, 0, 1],
],
connector: [
"Flowchart",
{ cornerRadius: 5, alwaysRespectStubs: true, stub: 5 },
],
endpoint: "Blank",
overlays: [["Arrow", { width: 8, length: 8, location: 1 }]], // overlay
// 添加样式
paintStyle: { stroke: "#909399", strokeWidth: 2 }, // connector
// endpointStyle: { fill: '#909399', outlineStroke: '#606266', outlineWidth: 1 } // endpoint
});
plumbIns.connect({
// 对应上述基本概念
source: "item-2",
target: "item-3",
anchor: [
"Left",
"Right",
"Top",
"Bottom",
[0.3, 0, 0, -1],
[0.7, 0, 0, -1],
[0.3, 1, 0, 1],
[0.7, 1, 0, 1],
],
connector: [
"Flowchart",
{ cornerRadius: 5, alwaysRespectStubs: true, stub: 5 },
],
endpoint: "Blank",
overlays: [["Arrow", { width: 8, length: 8, location: 1 }]], // overlay
// 添加样式
paintStyle: { stroke: "#909399", strokeWidth: 2 }, // connector
// endpointStyle: { fill: '#909399', outlineStroke: '#606266', outlineWidth: 1 } // endpoint
});
plumbIns.connect({
// 对应上述基本概念
source: "item-3",
target: "item-4",
anchor: [
"Left",
"Right",
"Top",
"Bottom",
[0.3, 0, 0, -1],
[0.7, 0, 0, -1],
[0.3, 1, 0, 1],
[0.7, 1, 0, 1],
],
connector: [
"Flowchart",
{ cornerRadius: 5, alwaysRespectStubs: true, stub: 5 },
],
endpoint: "Blank",
overlays: [["Arrow", { width: 8, length: 8, location: 1 }]], // overlay
// 添加样式
paintStyle: { stroke: "#909399", strokeWidth: 2 }, // connector
// endpointStyle: { fill: '#909399', outlineStroke: '#606266', outlineWidth: 1 } // endpoint
});
plumbIns.connect({
// 对应上述基本概念
source: "item-4",
target: "item-5",
anchor: [
"Left",
"Right",
"Top",
"Bottom",
[0.3, 0, 0, -1],
[0.7, 0, 0, -1],
[0.3, 1, 0, 1],
[0.7, 1, 0, 1],
],
connector: [
"Flowchart",
{ cornerRadius: 5, alwaysRespectStubs: true, stub: 5 },
],
endpoint: "Blank",
overlays: [["Arrow", { width: 8, length: 8, location: 1 }]], // overlay
// 添加样式
paintStyle: { stroke: "#909399", strokeWidth: 2 }, // connector
// endpointStyle: { fill: '#909399', outlineStroke: '#606266', outlineWidth: 1 } // endpoint
});
plumbIns.connect({
// 对应上述基本概念
source: "item-5",
target: "item-6",
anchor: [
"Left",
"Right",
"Top",
"Bottom",
[0.3, 0, 0, -1],
[0.7, 0, 0, -1],
[0.3, 1, 0, 1],
[0.7, 1, 0, 1],
],
connector: [
"Flowchart",
{ cornerRadius: 5, alwaysRespectStubs: true, stub: 5 },
],
endpoint: "Blank",
overlays: [["Arrow", { width: 8, length: 8, location: 1 }]], // overlay
// 添加样式
paintStyle: { stroke: "#909399", strokeWidth: 2 }, // connector
// endpointStyle: { fill: '#909399', outlineStroke: '#606266', outlineWidth: 1 } // endpoint
});
plumbIns.connect({
// 对应上述基本概念
source: "item-6",
target: "item-7",
anchor: [
"Left",
"Right",
"Top",
"Bottom",
[0.3, 0, 0, -1],
[0.7, 0, 0, -1],
[0.3, 1, 0, 1],
[0.7, 1, 0, 1],
],
connector: [
"Flowchart",
{ cornerRadius: 5, alwaysRespectStubs: true, stub: 5 },
],
endpoint: "Blank",
overlays: [["Arrow", { width: 8, length: 8, location: 1 }]], // overlay
// 添加样式
paintStyle: { stroke: "#909399", strokeWidth: 2 }, // connector
// endpointStyle: { fill: '#909399', outlineStroke: '#606266', outlineWidth: 1 } // endpoint
});
plumbIns.connect({
// 对应上述基本概念
source: "item-7",
target: "item-8",
anchor: [
"Left",
"Right",
"Top",
"Bottom",
[0.3, 0, 0, -1],
[0.7, 0, 0, -1],
[0.3, 1, 0, 1],
[0.7, 1, 0, 1],
],
connector: [
"Flowchart",
{ cornerRadius: 5, alwaysRespectStubs: true, stub: 5 },
],
endpoint: "Blank",
overlays: [["Arrow", { width: 8, length: 8, location: 1 }]], // overlay
// 添加样式
paintStyle: { stroke: "#909399", strokeWidth: 2 }, // connector
// endpointStyle: { fill: '#909399', outlineStroke: '#606266', outlineWidth: 1 } // endpoint
});
plumbIns.connect({
// 对应上述基本概念
source: "item-3",
target: "item-9",
anchor: ["Bottom", "Left"],
connector: [
"Flowchart",
{ cornerRadius: 5, alwaysRespectStubs: true, stub: 5 },
],
endpoint: "Blank",
overlays: [["Arrow", { width: 8, length: 8, location: 1 }]], // overlay
// 添加样式
paintStyle: { stroke: "#909399", strokeWidth: 2 }, // connector
// endpointStyle: { fill: '#909399', outlineStroke: '#606266', outlineWidth: 1 } // endpoint
});
plumbIns.connect({
// 对应上述基本概念
source: "item-9",
target: "item-7",
anchor: ["Right", "Bottom"],
connector: [
"Flowchart",
{ cornerRadius: 5, alwaysRespectStubs: true, stub: 5 },
],
endpoint: "Blank",
overlays: [["Arrow", { width: 8, length: 8, location: 1 }]], // overlay
// 添加样式
paintStyle: { stroke: "#909399", strokeWidth: 2 }, // connector
// endpointStyle: { fill: '#909399', outlineStroke: '#606266', outlineWidth: 1 } // endpoint
});
});
},
},
};
</script>
<style lang="scss" scoped>
#wrapper {
background: radial-gradient(
ellipse at top left,
rgba(255, 255, 255, 1) 40%,
rgba(229, 229, 229, 0.9) 100%
);
padding: 60px 80px;
}
.state-item-img {
width: 50px;
height: 50px;
color: #606266;
border: 2px solid rgba(0, 0, 0, 0);
text-align: center;
line-height: 30px;
font-family: sans-serif;
border-radius: 4px;
margin-right: 56px;
font-size: 14px;
.imgs {
width: 50px;
height: 50px;
}
}
.state-item {
width: 120px;
height: 100px;
color: #606266;
background: #f6f6f6;
border: 2px solid rgba(0, 0, 0, 0.05);
text-align: center;
line-height: 30px;
font-family: sans-serif;
border-radius: 4px;
margin-right: 60px;
font-size: 14px;
padding: 5px 10px;
display: flex;
align-items: center;
}
.line-wrap {
display: flex;
margin-bottom: 100px;
justify-content: center;
align-items: center;
}
</style>到此这篇关于vue使用 jsplumb 生成流程图的文章就介绍到这了,更多相关vue jsplumb 生成流程图内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！