本篇教程介绍了JavaScript基础教程 Vue项目中使用jsPlumb详解，希望阅读本篇文章以后大家有所收获，帮助大家对JavaScript的理解更加深入。

<

jsPlumb 介绍
 

jsPlumb 是一个强大的 JavaScript 连线库，它可以将 html中 的元素用箭头、曲线、直线等连接起来，适用于开发 Web 上的图表、建模工具、流程图、关系图等。

 
jsPlumb 参考网站
 


博客园：///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 ]
});
   

本文由职坐标整理并发布，希望对同学们有所帮助。了解更多详情请关注职坐标WEB前端JavaScript频道！