网站建设资讯

NEWS

网站建设资讯

jsPlumb怎么用

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

创新互联主要从事成都网站设计、网站制作、网页设计、企业做网站、公司建网站等业务。立足成都服务沾益,十载网站建设经验,价格优惠、服务专业,欢迎来电咨询建站服务:18980820575

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的方法直接写在