Vue 項目中使用 jsPlumb

標籤：nes   ini   ted   適用於   串連   java   cnp   fill   建模   

jsPlumb 介紹 

jsPlumb 是一個強大的 JavaScript 連線庫，它可以將 html中 的元素用箭頭、曲線、直線等串連起來，適用於開發 Web 上的圖表、建模工具、流程圖、關係圖等。

 jsPlumb 參考網站 

部落格園：http://www.cnblogs.com/leomYili/p/6346526.html?utm_source=itdadao&utm_medium=referral官網：https://www.jsplumbtoolkit.com/

 安裝 jsPlumb

• vue 項目中安裝 jsPlumb 模組

  npm install jsPlumb --save(建議使用cnpm，--save表示將模組寫入package.json檔案dependencies屬性

• main.js 中引入 jsPlumb（全域引入，也可以局部引入）

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

     經過上述步驟後，可以在所有的vue組件裡通過 this.$jsPlumb 引用jsPlump模組 使用 jsPlumb

1. 初始化 jsPlumb,DOM初始化之後再調用jsPlumb

   jsPlumb.ready(function() {    ...           // your jsPlumb related init code goes here    ...
   });

   　　

2. 執行個體化一個jsPlumb執行個體，並且可以提供一個預設值對象

   var instance = jsPlumb.getInstance({  PaintStyle:{    strokeWidth:6,    stroke:"#567567",    outlineStroke:"black",    outlineWidth:1  },  Connector:[ "Bezier", { curviness: 30 } ],  Endpoint:[ "Dot", { radius:5 } ],  EndpointStyle : { fill: "#567567"  },  Anchor : [ 0.5, 0.5, 1, 1 ]});

3. 然後就盡情使用吧，具體使用方法見參考網站1

Vue 項目中使用 jsPlumb