根据传入的node{left:'',top:''}字段，动态显示节点所在位置
//画布中的节点位置显示
//nodeList data
nodeList:[{
id: 'nodeA',
title:'title1',
name: 'name1',
type: 'task',
left: '18px',
top: '18px',
ico: 'el-icon-user-solid',
state: 'success'
},
{
id: 'nodeB',
type: 'task',
title:'title2',
name: 'name2',
left: '18px',
top: '96px',
ico: 'el-icon-goods',
state: 'error'
}
]}
//script jsplumb
import {jsPlumb, jsPlumbInstance} from 'jsplumb'
let plumbIns = jsPlumb.getInstance()
// plumbIns.importDefaults()
plumbIns.ready(function () {
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: ['StateMachine'],
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
})
})
