简书 jsPlumb使用


本文摘自PHP中文网,作者coldplay.xixi,侵删。

javascript栏目介绍jsPlumb的作用

推荐(免费):javascript(视频)

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


2.安装jsPlumb
(1)安装jsPlumb的依赖:

1

npm i jsplumb

(2)在main.js中进行挂载:

1

2

import jsPlumb from 'jsplumb'

Vue.prototype.$jsPlumb = jsPlumb.jsPlumb


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

1

2

var jsPlumbs = jsPlumb.getInstance(); (引入实例)

jsPlumbs.setContainer("#boxParent"); (设置父级容器)

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

1

2

3

4

5

this.$nextTick(() => {

  var jsPlumbs = jsPlumb.getInstance();

  jsPlumbs.setContainer("#boxParent");

  this.jsPlumbs = jsPlumbs;

});

注意:

1.如果不设置父级元素jsPlumb的连线会基于全局进行定位,会导致连线位置出现偏差
2.如果引用jsPlumb的方法直接写在<script>标签中,切换router会出现连线显示不出来的问题

(2)为防止连线位置偏离需要给父级容器(设置#boxParent那一层)设置css属性:

1

position: relative;

给具体应用jsPlumb进行连线的内容设置css属性:

1

position: absolute;

阅读剩余部分

相关阅读 >>

vue.js框架是干什么的

javascript在nodejs环境下执行机制和事件循环

javascript中怎么求数组的平均值

javascript知识点总结之 jquery常用选择器和过滤选择器

详解vue.js中的4个级别作用域

javascript怎么去掉a标签

javascript数组遍历的6种方法比较

javascript获得元素的方法

javascript字符串如何进行编码转换

深入了解javascript对象原型

更多相关阅读请进入《javascript》频道 >>




打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...