Vue 项目中使用 jsPlumb

时间：2017-07-14 13:31:20 收藏：0 阅读：12098

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

初始化 jsPlumb,DOM初始化之后再调用jsPlumb

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

实例化一个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 ]
});

然后就尽情使用吧，具体使用方法见参考网站1