vue如何使用 jsplumb 生成流程圖
更新時(shí)間：2025年02月28日 11:03:13 作者：陳大大小
文章介紹了如何在Vue項(xiàng)目中使用jsPlumb庫(kù)來(lái)生成流程圖,文章提供了兩個(gè)簡(jiǎn)單的示例代碼,展示了如何定義流程圖的數(shù)據(jù)字段和如何配置連線樣式,最后,文章鼓勵(lì)讀者繼續(xù)探索更多關(guān)于vue和jsPlumb的使用技巧,感興趣的朋友一起看看吧
1、安裝jsPlumb：
npm install jsplumb
2、 在使用的 .vue 文件中引入
import { jsPlumb } from "jsplumb";圖一：
圖二：
圖一簡(jiǎn)單示例：
流程圖的數(shù)據(jù)字段：
id: "item-12", // id(必傳)
label: "節(jié)點(diǎn)一", // 節(jié)點(diǎn)名稱(必傳)
nodeName: "start", // 節(jié)點(diǎn)標(biāo)識(shí)：start：開(kāi)始節(jié)點(diǎn)；end：結(jié)束節(jié)點(diǎn)；
connectId:
[
{
source: "item-12", // 連接線起點(diǎn)(必傳)
target: "item-7", // 連接線終點(diǎn)(必傳)
stub: 40, // 連接線距離主流程線的位置高度(同一個(gè)節(jié)點(diǎn)有第二條連接線的時(shí)候
必傳，值越大距離主流程距離越遠(yuǎn))
direction: "Bottom", // 連接線距離主流程線的位置方向(同一個(gè)節(jié)點(diǎn)有第二條連接
線的時(shí)候必傳)
}
],
tipContent:
[
{
handleUser: "業(yè)務(wù)部", // 節(jié)點(diǎn)內(nèi)容信息
handleTime: "2024-10-23 15:20:08" // 節(jié)點(diǎn)內(nèi)容信息
}
]（代碼直接復(fù)制即可食用）
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",
},
// 流程圖數(shù)據(jù)
flowChartData: [
{
"id": "0",
"label": "",
"nodeName": "start",
"connectId": [
{
"source": "0",
"target": "10",
"stub": 5
}
]
},
{
"id": "10",
"label": "節(jié)點(diǎn)一",
"nodeName": "",
"connectId": [
{
"source": "10",
"target": "20",
"stub": 5
}
]
},
{
"id": "20",
"label": "節(jié)點(diǎn)二",
"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": "節(jié)點(diǎn)三",
"nodeName": "",
"connectId": [
{
"source": "30",
"target": "40",
"stub": 5
},
{
"source": "30",
"target": "50",
"stub": 40,
"direction": "Top"
}
]
},
{
"id": "40",
"label": "節(jié)點(diǎn)四",
"nodeName": "",
"connectId": [
{
"source": "40",
"target": "50",
"stub": 5
}
]
},
{
"id": "50",
"label": "節(jié)點(diǎn)五",
"nodeName": "",
"connectId": [
{
"source": "50",
"target": "60",
"stub": 5
},
{
"source": "50",
"target": "70",
"stub": 40,
"direction": "Bottom"
}
]
},
{
"id": "60",
"label": "節(jié)點(diǎn)六",
"nodeName": "",
"connectId": [
{
"source": "60",
"target": "70",
"stub": 5
}
]
},
{
"id": "70",
"label": "節(jié)點(diǎn)七",
"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: [], // 流程圖數(shù)據(jù)
duringNode: "20", // 在節(jié)點(diǎn)期間
finishedNode: "10", // 已完成節(jié)點(diǎn)
plumbInsInfo: null, // 暫存流程圖圖像數(shù)據(jù)
};
},
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) {
// 當(dāng)前節(jié)點(diǎn)
return "2";
} else if (finishStatus == true) {
// 已完成節(jié)點(diǎn)
return "1";
} else {
return "0";
}
},
initJsPlumb() {
if(this.plumbInsInfo !== null) {
// 首先刪除所有的連線
this.plumbInsInfo.deleteEveryConnection();
}
let plumbIns = jsPlumb.getInstance();
let jsPlumbConnectList = [];
// 處理數(shù)據(jù)
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>圖二簡(jiǎn)單示例：
注意：注意看 id 為"item-3"和"item-9"那條數(shù)據(jù)的連線配置
其中有幾個(gè)小圖片，可以用自己的本地圖片代替（圖標(biāo)大小的）
<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 {
// 一行數(shù)據(jù)的
// flowChartData: [
// { id: "item-0", lable: "", nodeName: "start", connectId: [{source: "item-0", target: "item-1"}] }, // 開(kāi)始
// { id: "item-1", lable: "改革處-經(jīng)辦人-發(fā)起", nodeName: "", connectId: [{source: "item-1", target: "item-2"}] },
// { id: "item-2", lable: "承辦部門-改革聯(lián)系人填報(bào)/分發(fā)", nodeName: "", connectId: [{source: "item-2", target: "item-3"}] },
// { id: "item-3", lable: "", nodeName: "summary", connectId: [{source: "item-3", target: "item-4"}] }, // 匯總/分發(fā)
// { id: "item-4", lable: "承辦部門-部門主任-審批", nodeName: "", connectId: [{source: "item-4", target: "item-5"}] },
// { id: "item-5", lable: "改革處-經(jīng)辦人-合規(guī)性審查", nodeName: "", connectId: [{source: "item-5", target: "item-6"}] },
// { id: "item-6", lable: "改革處-處領(lǐng)導(dǎo)-合規(guī)性審查", nodeName: "", connectId: [{source: "item-6", target: "item-7"}] },
// { id: "item-7", lable: "", nodeName: "summary", connectId: [{source: "item-7", target: "item-8"}] }, // 匯總/分發(fā)
// { id: "item-8", lable: "", nodeName: "end", connectId: [] }, // 結(jié)束
// ],
// 兩行數(shù)據(jù)的
// flowChartData: [
// { id: "item-0", lable: "", nodeName: "start", connectId: [{source: "item-0", target: "item-1"}] }, // 開(kāi)始
// { id: "item-1", lable: "改革處-經(jīng)辦人-發(fā)起", nodeName: "", connectId: [{source: "item-1", target: "item-2"}] },
// { id: "item-2", lable: "承辦部門-改革聯(lián)系人填報(bào)/分發(fā)", 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"}] }, // 匯總/分發(fā)
// { id: "item-4", lable: "承辦部門-部門主任-審批", nodeName: "", connectId: [{source: "item-4", target: "item-5"}] },
// { id: "item-5", lable: "改革處-經(jīng)辦人-合規(guī)性審查", nodeName: "", connectId: [{source: "item-5", target: "item-6"}] },
// { id: "item-6", lable: "改革處-處領(lǐng)導(dǎo)-合規(guī)性審查", nodeName: "", connectId: [{source: "item-6", target: "item-7"}] },
// { id: "item-7", lable: "", nodeName: "summary", connectId: [{source: "item-7", target: "item-8"}] }, // 匯總/分發(fā)
// { id: "item-8", lable: "", nodeName: "end", connectId: [] }, // 結(jié)束
// { id: "item-9", lable: "改革處-經(jīng)辦人-接收待閱", nodeName: "handleOut", connectId: [{source: "item-9", target: "item-7"}] }, // 第二行數(shù)據(jù)
// ],
// 三行數(shù)據(jù)的
flowChartData: [
{ id: "item-0", lable: "", nodeName: "start", connectId: [{source: "item-0", target: "item-1"}] }, // 開(kāi)始
{ id: "item-1", lable: "改革處-經(jīng)辦人-發(fā)起", nodeName: "", connectId: [{source: "item-1", target: "item-2"}] },
{ id: "item-2", lable: "承辦部門-改革聯(lián)系人填報(bào)/分發(fā)", 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"}] }, // 匯總/分發(fā)
{ id: "item-4", lable: "承辦部門-部門主任-審批", nodeName: "", connectId: [{source: "item-4", target: "item-5"}] },
{ id: "item-5", lable: "改革處-經(jīng)辦人-合規(guī)性審查", nodeName: "", connectId: [{source: "item-5", target: "item-6"}] },
{ id: "item-6", lable: "改革處-處領(lǐng)導(dǎo)-合規(guī)性審查", nodeName: "", connectId: [{source: "item-6", target: "item-7"}] },
{ id: "item-7", lable: "", nodeName: "summary", connectId: [{source: "item-7", target: "item-8"}] }, // 匯總/分發(fā)
{ id: "item-8", lable: "", nodeName: "end", connectId: [] }, // 結(jié)束
{ id: "item-9", lable: "改革處-經(jīng)辦人-接收待閱", nodeName: "handleOut", connectId: [{source: "item-9", target: "item-7"}] }, // 第二行數(shù)據(jù)
{ id: "item-10", lable: "改革處-經(jīng)辦人-接收待閱123", nodeName: "handleOut", connectId: [{source: "item-10", target: "item-7"}] }, // 第二行數(shù)據(jù)
],
flowChartData1: []
};
},
mounted() {
this.initJsPlumb();
},
methods: {
initJsPlumb() {
let jsPlumbConnectList = [];
let listData = [];
let fenfaData = [];
// 處理數(shù)據(jù)
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({
// 對(duì)應(yīng)上述基本概念
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({
// 對(duì)應(yīng)上述基本概念
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({
// 對(duì)應(yīng)上述基本概念
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({
// 對(duì)應(yīng)上述基本概念
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({
// 對(duì)應(yīng)上述基本概念
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({
// 對(duì)應(yīng)上述基本概念
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({
// 對(duì)應(yīng)上述基本概念
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({
// 對(duì)應(yīng)上述基本概念
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({
// 對(duì)應(yīng)上述基本概念
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({
// 對(duì)應(yīng)上述基本概念
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>到此這篇關(guān)于vue使用 jsplumb 生成流程圖的文章就介紹到這了,更多相關(guān)vue jsplumb 生成流程圖內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
在Vue.js應(yīng)用中實(shí)現(xiàn)分布式搜索和全文搜索
分布式搜索和全文搜索在現(xiàn)代應(yīng)用程序中變得越來(lái)越重要,因?yàn)樗鼈兛梢詭椭脩艨焖俨檎液蜋z索大量數(shù)據(jù),Elasticsearch是一種強(qiáng)大的分布式搜索引擎,本文將介紹如何在Vue.js應(yīng)用程序中實(shí)現(xiàn)分布式搜索和全文搜索,以及如何與Elasticsearch集成,需要的朋友可以參考下2023-11-11
vue項(xiàng)目中如何將當(dāng)前頁(yè)面生成圖片
這篇文章主要介紹了vue項(xiàng)目中如何將當(dāng)前頁(yè)面生成圖片問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
element滾動(dòng)條組件el-scrollbar的使用詳解
本文主要介紹了element滾動(dòng)條組件el-scrollbar的使用詳解，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-04-04
Vue使用echarts散點(diǎn)圖在區(qū)域內(nèi)標(biāo)點(diǎn)
這篇文章主要為大家詳細(xì)介紹了Vue使用echarts散點(diǎn)圖在區(qū)域內(nèi)標(biāo)點(diǎn)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-03-03
Vue3.2(21年8月10日)相比于Vue3新增了語(yǔ)法糖,減少了代碼冗余,下面這篇文章主要給大家介紹了關(guān)于Vue3.2語(yǔ)法糖使用的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-11-11
vue3實(shí)現(xiàn)數(shù)字滾動(dòng)特效實(shí)例詳解
這篇文章主要為大家介紹了vue3實(shí)現(xiàn)數(shù)字滾動(dòng)特效實(shí)例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-09-09
vue項(xiàng)目環(huán)境變量配置的實(shí)現(xiàn)方法
這篇文章主要介紹了vue項(xiàng)目環(huán)境變量配置的實(shí)現(xiàn)方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-10-10
vue如何隨心所欲調(diào)整el-dialog中body的樣式
這篇文章主要介紹了vue如何隨心所欲調(diào)整el-dialog中body的樣式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-05-05
vue3+echarts+折線投影(陰影)效果的實(shí)現(xiàn)
這篇文章主要介紹了vue3+echarts+折線投影(陰影)效果的實(shí)現(xiàn)方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
解決微信瀏覽器緩存站點(diǎn)入口文件(IIS部署Vue項(xiàng)目)
這篇文章主要介紹了解決微信瀏覽器緩存站點(diǎn)入口文件(IIS部署Vue項(xiàng)目),本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2019-06-06