start
end
因为用到dom,在mounted()里面写
百度出来的有些函数已经废弃了,最好使用的时候直接console.log(jsPlumb)看有什么内置函数
jsPlumb 里面的内置删除函数
完整代码如下
start
end
<script>
import {
jsPlumb } from 'jsplumb'
export default {
name: 'learnJsplumb',
mounted() {
let plumbIns = jsPlumb.getInstance()
plumbIns.ready(function () {
var common = {
//设置端点样式
isSource: true,
isTarget: true,
connector: ['Flowchart', {
cornerRadius: 5 }],//连接器使用流程图外观 设置样式
// overlays: [ ['Arrow', { width: 12, length: 12, location: 0.5 }] ], 而在addEndpoint方法中,不能使用overlays,需要使用connectOverlays
endpoint: 'Dot',
paintStyle: {
//通过设置各种 *Style来改变链接或者端点的样式 //连接器外观
fill: '#316b31',
// stroke:'#316b31',
strokeWidth: 2
},
// hoverPaintStyle: {
// outlineStroke: 'lightblue'
// }, //端点被选中时的样式
connectorStyle: {
outlineStroke: 'green',
strokeWidth: 1
},
connectorHoverStyle: {
strokeWidth: 2,
outlineStroke: 'rgb(245, 79, 28)',
} //连接线选中时的样式
}
//添加端点,端点可连线, anchors位置,connectorOverlays配置连接线样式
plumbIns.addEndpoint('state1', {
anchors: ['Bottom'], connectorOverlays: [
["Arrow", {
width: 10, length: 10, location: 0.5, id: "arrow" }],
],
}, common)
plumbIns.addEndpoint('state2', {
anchor: 'Bottom', connectorOverlays: [
["Arrow", {
width: 10, length: 10, location: 0.5, id: "arrow" }],
],
}, common)
plumbIns.addEndpoint('state2', {
anchor: 'Top', connectorOverlays: [
["Arrow", {
width: 10, length: 10, location: 0.5, id: "arrow" }],
],
}, common)
plumbIns.addEndpoint('state3', {
anchor: 'Top', connectorOverlays: [
["Arrow", {
width: 10, length: 10, location: 0.5, id: "arrow" }],
],
}, common)
//设置节点可拖拽
plumbIns.draggable('state1')
plumbIns.draggable('state2')
plumbIns.draggable('state3')
//点击删除连接线
plumbIns.bind('click', function (conn, originalEvent) {
plumbIns.deleteConnection(conn);
})
//点击删除dom
for (let i of document.querySelectorAll('.item')) {
i.addEventListener("click", function () {
plumbIns.deleteConnectionsForElement(i.id)
plumbIns.removeAllEndpoints(i.id);//删除divID所有端点
// i.style.display = 'none'
plumbIns.remove(i.id);//移除节点
});
}
})
}
}
</script>
样式
#content {
margin: 50px;
position: relative;
background: #efefef;
width: 800px;
height: 800px;
}
.item {
border-radius: 4px;
background-color: #ddddff;
text-align: center;
line-height: 40px;
width: 100px;
height: 40px;
position: absolute;
color: #fff;
}
#state1 {
background-color: rgb(65, 163, 70);
left: 100px;
top: 100px;
}
#state2 {
left: 100px;
top: 250px;
}
#state3 {
background-color: rgb(245, 79, 28);
left: 300px;
t