1、什麼是jsplumb？

jsplumb是一個外掛，如果你想在Web網頁繪製圖表或者工作流程設計器，並且可以實現任意拖拽，連線，那麼你可以考慮使用這個外掛。

1.2、基本概念

• Souce 源節點
• Target 目標節點
• Anchor 錨點
• Endpoint 端點
• Connector 連線

2、怎麼使用jsplumb

使用步驟：

1、安裝jsplumb：

 npm i jsplumb -S

2、使用

<template>
    <div>
      ============================38、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 class="window" id="flowchartWindow3">3
            </div>
            <div class="window" id="flowchartWindow4">4
            </div>
          </div>
        </div>

      </div>



    </div>
</template>

<script>
  import jsplumb from 'jsplumb'
    export default {
        name: "vue2-preview_36",
      data(){

      },

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

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

          jsPlumb.ready(function () {
            /*
           connect表示 建立連線
            source 起始節點
            target 目標節點
            endpoint  端點型別，形狀  Dot(表示圓形斷電)  Rectangle（方形原點）
             */
            jsPlumb.connect({
              source: 'flowchartWindow1',
              target: 'flowchartWindow2',
              endpoint: 'Rectangle'
            })
          })
        }
      }


    }
</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: 34em;
    left: 5em;
  }
  #flowchartWindow2 {
    top: 7em;
    left: 36em;
  }
  #flowchartWindow3 {
    top: 27em;
    left: 48em;
  }
  #flowchartWindow4 {
    top: 23em;
    left: 22em;
  }



</style>
 

效果圖：