jsplumb的基础使用
项目环境vue-cli ， 使用：npm i jsplumb -S
官方文档全英文，呵呵哒，推荐中文文档 https://wdd.js.org/jsplumb-chinese-tutorial/#/（有些基础的介绍，入门足够了，深入的需要自己再查阅相关资料了）
// 基础的使用
<template>
<div id="labelManage">
<div id="main">
<div class="flowchart-demo" id="flowchart-demo">
<div class="window" id="flowchartWindow1">1
</div>
<div class="window" id="flowchartWindow2">2
</div>
<div class="window" id="flowchartWindow3">3
</div>
<div class="window" id="flowchartWindow4">4
</div>
</div>
</div>
</div>
</template>
<script>
import jsplumb from 'jsplumb'
export default {
data(){
return {
}
},
methods:{
},
mounted(){
jsPlumb.ready(function() {
var j = jsPlumb.getInstance({
DragOptions: { cursor: 'pointer', zIndex: 2000 },
PaintStyle: { stroke: 'red', strokeWidth: 3 }, //配置自己拖拽小点的时候连接线的默认样式
Endpoint: ["Dot", {radius: 5}], //这个是控制连线终端那个小点的半径
// EndpointStyle : { fill : "red" }, //这个是控制连线终端那个小点的样式
// EndpointHoverStyle : { fill : "blue" }, //这个是控制连线终端那个小点的样式
Connector: ["Flowchart",{curviness:70}],
ConnectionOverlays: [
[ "Arrow", { location: 1 } ],
[ "Label", {
location: 0.5,
label: "hehe",
id: "label",
cssClass: "aLabel"
}]
],
Container:"flowchart-demo"
});
j.draggable($('.window'));
j.addEndpoint('flowchartWindow1',{uuid:1 , anchor: "TopCenter", isSource:true});
j.addEndpoint('flowchartWindow2',{uuid:2 ,anchor:'Right', isTarget:true});
j.addEndpoint('flowchartWindow3',{anthors:'Right', isTarget:true});
// let line = j.connect({uuids: ["1", "2"], editable: true})
j.connect({
uuids:[1,2], //根据uuid进行连接
paintStyle: { stroke: 'red', strokeWidth: 3 }, //线的样式
endpointStyle: { fill: 'blue', outlineStroke: 'darkgray', outlineWidth: 2 },//点的样式
overlays: [ ['Arrow', { width: 12, length: 12, location: 0.5 }] ] //覆盖物 箭头 及 样式
})
});
}
}
</script>
<style scoped lang="scss">
.flowchart-demo {
width: 800px;
height: 600px;
border: 1px solid #000;
position: relative;
}
.flowchart-demo .window {
border: 1px solid #346789;
box-shadow: 2px 2px 19px #aaa;
-o-box-shadow: 2px 2px 19px #aaa;
-webkit-box-shadow: 2px 2px 19px #aaa;
-moz-box-shadow: 2px 2px 19px #aaa;
-moz-border-radius: 0.5em;
border-radius: 0.5em;
opacity: 0.8;
filter: alpha(opacity=80);
text-align: center;
position: absolute;
background-color: #eeeeef;
color: black;
font-family: helvetica;
font-size: 0.9em;
line-height: 60px;
width: 60px;
height: 60px;
}
.flowchart-demo .window:hover {
box-shadow: 2px 2px 19px #444;
-o-box-shadow: 2px 2px 19px #444;
-webkit-box-shadow: 2px 2px 19px #444;
-moz-box-shadow: 2px 2px 19px #444;
opacity: 0.6;
filter: alpha(opacity=60);
}
.flowchart-demo .active {
border: 1px dotted green;
}
.flowchart-demo .hover {
border: 1px dotted red;
}
#flowchartWindow1 {
top: 34em;
left: 5em;
}
#flowchartWindow2 {
top: 7em;
left: 36em;
}
#flowchartWindow3 {
top: 27em;
left: 48em;
}
#flowchartWindow4 {
top: 23em;
left: 22em;
}
</style>
