JsPlumb+vue 实现拖拽连线，点击删除连线节点

因为用到dom,在mounted()里面写

百度出来的有些函数已经废弃了，最好使用的时候直接console.log(jsPlumb)看有什么内置函数

jsPlumb 里面的内置删除函数

1. deleteConnection: ƒ (connection, params)
2. deleteConnectionsForElement: ƒ (el, params)
3. deleteEndpoint: ƒ (object, dontUpdateHover, deleteAttachedObjects)
4. deleteEveryConnection: ƒ (params)
5. deleteEveryEndpoint: ƒ ()
6. deleteObject: ƒ (params)

完整代码如下

<template>
  <div id="content">
    <div id="state1"
         class="item">start</div>
    <div id="state2"
         class="item"></div>
    <div id="state3"
         class="item">end</div>
  </div>
</template>

<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',