首页 > 代码库 > Vue 项目中使用 jsPlumb

Vue 项目中使用 jsPlumb

2024-10-25 14:08:02   207人阅读

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
    ...
    });

    　　

  1. 实例化一个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 ]
});
  2. 然后就尽情使用吧，具体使用方法见参考网站1

Vue 项目中使用 jsPlumb


联系
我们