vue+jsplumb實現連線繪圖

npm install jsplumb --save

import jsPlumb from 'jsplumb'
Vue.prototype.$jsPlumb = jsPlumb.jsPlumb

<template>
  <div>
    <div id="container">
      <div class="left">
        <ul>
          <li v-for="(item,index) in leftList" :key="'left' + index" :id="item.nodeId" name="source">
            {{item.name}}
          </li>
        </ul>
      </div>

      <div class="right">
        <ul>
          <li v-for="(item,index) in rightList" :key="'right' + index" :id="item.nodeId" name="target">
            {{item.name}}
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: "linkElementModal",
    data() {
      return {
        jsPlumb: null, // 快取範例化的jsplumb物件
        leftList:[
          {name: 'xxx_left_1', nodeId: 'left_1'},
          {name: 'xxx_left_2', nodeId: 'left_2'},
          {name: 'xxx_left_3', nodeId: 'left_3'},
          {name: 'xxx_left_4', nodeId: 'left_4'}
        ],
        rightList:[
          {name: 'xxx_right_1', nodeId: 'right_1'},
          {name: 'xxx_right_2', nodeId: 'right_2'},
          {name: 'xxx_right_3', nodeId: 'right_3'},
          {name: 'xxx_right_4', nodeId: 'right_4'}
        ]
      }
    },
    mounted(){
      this.showPlumb();
    },
    methods:{
      showPlumb() {
        this.jsPlumb = this.$jsPlumb.getInstance({
          Container: 'container', // 選擇器id
          EndpointStyle: {radius: 0.11, fill: '#999'}, // 端點樣式
          PaintStyle: {stroke: '#999', strokeWidth: 2}, // 繪畫樣式，預設8px線寬  #456
          HoverPaintStyle: {stroke: '#994B0A', strokeWidth: 3 }, // 預設懸停樣式  預設為null
          ConnectionOverlays: [ // 此處可以設定所有箭頭的樣式
            ['Arrow', { // 設定引數可以參考中文檔案
              location: 1,
              length: 12,
              paintStyle: {
                stroke: '#999',
                fill: '#999'
              }
            }]
          ],
          Connector: ['Straight'], // 要使用的預設聯結器的型別：直線，折線，曲線等
          DrapOptions: {cursor: 'crosshair', zIndex: 2000}
        });

        this.jsPlumb.batch(() => {
          for(let i = 0; i < this.leftList.length; i++){
            this.initLeaf(this.leftList[i].nodeId, 'source');
          }
          for(let j = 0; j < this.rightList.length; j++){
            this.initLeaf(this.rightList[j].nodeId , 'target')
          }
        })

        this.setjsPlumb(true,true);

        //點選連線
        this.jsPlumb.bind('click',  (conn, originalEvent) => {
         console.log(conn, originalEvent)
        })

        //連線時觸發
        this.jsPlumb.bind('connection',  (conn, originalEvent) => {
          console.log(conn.sourceId)
          console.log(conn.targetId)
        })

        //右鍵觸發
        this.jsPlumb.bind('contextmenu',  (conn, originalEvent) => {
          console.log(conn, originalEvent)
        })
      },
      //  初始化規則使其可以連線、拖拽
      initLeaf(id, type) {
        const ins = this.jsPlumb;
        const elem = document.getElementById(id);
        if (type === 'source') {
          ins.makeSource(elem, {
            anchor: [1, 0.5, 0, 0], // 左 上 右 下
            allowLoopback: false, //允許回連
            maxConnections: -1 //最大連線數（-1表示不限制）
          })
        } else {
          ins.makeTarget(elem, {
            anchor: [0, 0.5, 0, 0],
            allowLoopback: false,
            maxConnections: -1
          })
        }
      },
      setjsPlumb(sourceFlag, targetFlag){
        const source = document.getElementsByName('source')
        const target = document.getElementsByName('target')

        this.jsPlumb.setSourceEnabled(source, sourceFlag)
        this.jsPlumb.setTargetEnabled(target, targetFlag)
        this.jsPlumb.setDraggable(source, false) // 是否支援拖拽
        this.jsPlumb.setDraggable(target, false) // 是否支援拖拽
      },
    }
  }
</script>

<style>
  #container{
    width: 500px;
    height: 500px;
    padding: 20px;
    position: relative; /*一定加上這句，否則連線位置發生錯亂*/
  }

  .left{
    float: left;
    width: 150px;
  }
  .right{
    float: right;
    width: 150px;
  }

  .left li,.right li{
    width: 100%;
    border-radius: 4px;
    border: 1px solid #ccc;
    background: #efefef;
    margin-bottom: 20px;
    padding: 8px 5px;
  }
</style>