×
400 028 6601

建站动态

根据您的个性需求进行定制 先人一步 抢占小程序红利时代

jsPlumb怎么用-创新互联

小编给大家分享一下jsPlumb怎么用，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！

创新互联-成都网站建设公司，专注做网站、网站设计、网站营销推广，国际域名空间，网络空间，网站托管维护有关企业网站制作方案、改版、费用等问题，请联系创新互联。

1.jsPlumb的作用：
用于绘制dom元素之间的连线的一个框架，需要一个开始点的id,以及结束点的id就可以进行连线。可以通过属性设置连线端点的位置、连线的样式、断开连接等内容
jsPlumb怎么用

2.安装jsPlumb
（1）安装jsPlumb的依赖：

npm i jsplumb

（2）在main.js中进行挂载:

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

3.vue项目中应用（react同理）
（1）引用jsPlumb，设置父级容器
如果不需要改变连接状态（断开，实线变虚线，改变连接dom等），直接在连线方法前加上即可

var jsPlumbs = jsPlumb.getInstance(); （引入实例）
jsPlumbs.setContainer("#boxParent"); （设置父级容器）

如果需要经常手动改变连接状态建议写在mounted当中

this.$nextTick(() => {
  var jsPlumbs = jsPlumb.getInstance();
  jsPlumbs.setContainer("#boxParent");
  this.jsPlumbs = jsPlumbs;
});

注意：

1.如果不设置父级元素jsPlumb的连线会基于全局进行定位，会导致连线位置出现偏差  
2.如果引用jsPlumb的方法直接写在
0.0387s