本文摘自PHP中文网,作者coldplay.xixi,侵删。
javascript栏目介绍jsPlumb的作用推荐(免费):javascript(视频)
1.jsPlumb的作用:
用于绘制dom元素之间的连线的一个框架,需要一个开始点的id,以及结束点的id就可以进行连线。可以通过属性设置连线端点的位置、连线的样式、断开连接等内容
2.安装jsPlumb
(1)安装jsPlumb的依赖:
1 |
|
(2)在main.js中进行挂载:
1 2 |
|
3.vue项目中应用(react同理)
(1)引用jsPlumb,设置父级容器
如果不需要改变连接状态(断开,实线变虚线,改变连接dom等),直接在连线方法前加上即可
1 2 |
|
如果需要经常手动改变连接状态建议写在mounted当中
1 2 3 4 5 |
|
注意:
1.如果不设置父级元素jsPlumb的连线会基于全局进行定位,会导致连线位置出现偏差
2.如果引用jsPlumb的方法直接写在<script>标签中,切换router会出现连线显示不出来的问题
(2)为防止连线位置偏离需要给父级容器(设置#boxParent那一层)设置css属性:
1 |
|
给具体应用jsPlumb进行连线的内容设置css属性:
1 |
|
相关阅读 >>
javascript知识点总结之 jquery常用选择器和过滤选择器
更多相关阅读请进入《javascript》频道 >>
Vue.js 设计与实现 基于Vue.js 3 深入解析Vue.js 设计细节
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者