026试用流程图框架jsPlumb和VueFlow,作为可视化编程实现参考
jsPlumb定制型太强,vue3示例与教程能力不足
<script setup lang="ts">
import {
jsPlumb } from 'jsplumb';
import {
onMounted } from 'vue';
let nodeList:any;
onMounted(() => {
let plumbIns = jsPlumb.getInstance();
let defaultConfig = {
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: ['StateMachine'],
endpoint: 'Blank',
paintStyle: {
stroke: '#909399', strokeWidth: 2 },
endpointStyle: {
fill: 'lightgray', outlineStroke: 'darkgray', outlineWidth: 2 },
overlays: [['Arrow', {
width: 8, length: 8, location: 1 }]],
};
let relations = [
['item-4', 'item-1'],
['item-1', 'item-5'],
['item-5', 'item-2'],
['item-2', 'item-6'],
['item-6', 'item-3'],
['item-3', 'item-7'],
['item-7', 'item-9'],
['item-9', 'item-6'],
['item-6', 'item-8'],
['item-8', 'item-5'],
['item-3', 'item-9'],
['item-2', 'item-8'],
['item-1', 'item-4'],
['item-5', 'item-4'],
];
plumbIns.ready(() => {
let anEndpoint = plumbIns.addEndpoint('item-4', {
anchors: [[0.7, 1, 0, 1]],
endpoint: 'Blank',
});
relations.push(['item-8', anEndpoint]);
for (let item of relations) {
plumbIns.connect(
{
source: item[0],
target: item[1],
},
defaultConfig
);
}
});
});
</script>
<template>
<div class="hello">
<div id="relation-box">
<div
class="node"
v-for="item in nodeList"
:key="item.id"
:style="{ left: item.left, top: item.top }"
:id="'node-' + item.id"
>
{
{ item.name }}
<div>detail...</div>
</div>
</div>
</div>
<div id="wrapper">
<div class="line-wrap" style="margin-left: 70px">
<div id="item-1" class="state-item">State 1</div>
<div id="item-2" class="state-item">State 2</div>
<div id="item-3" class="state-item">State 3</div>
</div>
<div class="line-wrap