思路：

     其實所謂的動態新增多個描點，就是迴圈新增單個端點，但是指定描點不同的位置

核心程式碼：

     /*
          target
          動態新增多個錨點，並且保證其能夠均勻分配，不會出現連線錯位的問題
          x的取值範圍是0~1
           */
          let anchorNumber = 4
          let differenceValue = 1 / (anchorNumber+1);
          let x = 0;
          for (let i = 0; i < anchorNumber; i++) {
            jsPlumb.addEndpoint('flowchartWindow2', {
              anchor: [x += differenceValue, 0, 0, -1],
              type: 'target',
              num: -1
            }, dragConnection);

          }
 

全部程式碼：

<template>
  <div>
    ============================40、Jsplumb外掛的使用--單個節點動態新增多個錨點，並實現均勻非配=========================

    <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>
      </div>

    </div>

  </div>
</template>

<script>
  import jsplumb from 'jsplumb'

  export default {
    name: "vue2-JsPlumb_three_41",
    data() {

    },

    /*
 mounted()函式是vue生命週期中的一個函式
 當DOM生成以後所呼叫的函式
 這個函式一般都是用來操作DOM
 * */
    mounted() {

      this.jsPlumb();
    },
    methods: {
      jsPlumb() {

        jsPlumb.ready(function () {

          //=========設定flowchartWindow1節點可以拖動PlainArrow
          /*
          引數一：可以傳入節點標籤id/元素id列表/選擇器
          引數二：{containment: 'parent'} 表示在父容器內部拖動，不能越出(限制節點的拖動範圍)
          */
          jsPlumb.draggable('flowchartWindow1', {containment: 'parent'});
          jsPlumb.draggable('flowchartWindow2', {containment: 'parent'});


          //=========拖動建立連線=========
          //jsPlumb.setContainer('diagramContainer');
          /*
          核心程式碼：
          isSource: true,
          isTarget: true,

          dragConnection 表示拖動的配置
          當isSource和isTarget都為true時，那麼就可以實現拖動建立連線
          connector: ['Straight'], 表示連線的樣式為直線
          endpointStyle 表示端點的樣式
          maxConnections: -1, -1表示可以拖拽出多條線，預設是1，如果給定數字5表示最多可以連線5條線
          * */
          let dragConnection = {
            isSource: true,
            isTarget: true,
            /*     connector: ['Straight'],
                 endpointStyle: { fill: 'lightgray', outlineStroke: 'lightgray', outlineWidth: 2 ,width: 12, length: 5},*/
            maxConnections: -1,

            endpoint: 'Rectangle',
            connector: ['Straight'],
            paintStyle: {stroke: 'black', strokeWidth: 1},
            endpointStyle: {
              fill: 'lightgray',
              outlineStroke: 'lightgray',
              outlineWidth: 2,
              width: 5,
              length: 5
            },
            overlays: [['PlainArrow', {width: 12, length: 12, location: 1}]],
          };


          let endpoint5 = jsPlumb.addEndpoint('flowchartWindow1', {
            anchor: ['Bottom'],
          }, dragConnection);



          /*
        * 該方式有BUG
        * Continuous 表示根據節點位置，自動調整位置的錨點，當前的錨點不是固定的
        * */
          /*  for (let i = 0; i < 8; i++) {
              jsPlumb.addEndpoint('flowchartWindow2',{
                anchor:[ "Continuous", { faces:["top"] }],
                type:'source',
                num:-1
              },dragConnection);
            }*/




          /*
          target
          動態新增多個錨點，並且保證其能夠均勻分配，不會出現連線錯位的問題
          x的取值範圍是0~1
           */
          let anchorNumber = 4
          let differenceValue = 1 / (anchorNumber+1);
          let x = 0;
          for (let i = 0; i < anchorNumber; i++) {
            jsPlumb.addEndpoint('flowchartWindow2', {
              anchor: [x += differenceValue, 0, 0, -1],
              type: 'target',
              num: -1
            }, dragConnection);

          }

        })
      }
    }


  }
</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 屬性向框新增一個或多個陰影
     box-shadow: 2px 2px 19px #aaa;
     box-shadow: （必需。水平陰影的位置。允許負值） （必需。垂直陰影的位置。允許負值。）  （可選。模糊距離。） （可選。陰影的顏色。）
      因為是新屬性，為了相容各主流瀏覽器並支援這些主瀏覽器的較低版本，基於主流瀏覽器上使用box-shadow屬性時，
      我們需要將屬性的名稱寫成-webkit-box-shadow的形式。
      Firefox瀏覽器則需要寫成-moz-box-shadow的形式
      歐朋瀏覽器  -o-box-shadow
      IE>9  -ms-box-shadow
      -webkit 是在Chrome瀏覽器中用的 一般是指 瀏覽器是webkit核心 -webkit-box-shadow
    */
    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 火狐瀏覽器的邊框圓角*/
    -moz-border-radius: 0.5em;
    border-radius: 0.5em;
    opacity: 0.5;
    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: 7em;
    left: 30em;
  }

  #flowchartWindow2 {
    top: 34em;
    left: 30em;
  }


</style>
 

效果圖：