javascript栏目介绍jsPlumb的作用
推荐(免费):javascript(视频)
1.jsPlumb的作用:
用于绘制dom元素之间的连线的一个框架,需要一个开始点的id,以及结束点的id就可以进行连线。可以通过属性设置连线端点的位置、连线的样式、断开连接等内容
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的方法直接写在作者最新文章
2023-04-09 22:44:01 2021-05-21 15:21:45 2023-04-09 22:42:01 2023-03-09 12:50:01 2023-01-05 16:13:24 2023-01-05 16:13:23 2021-04-30 16:46:04 2023-01-05 16:13:23 2023-01-05 16:13:22 2021-04-30 16:27:19最新问题仅 CSS 方法可在单击时动态修改图像 src,无需使用 JavaScript 我需要仅使用css更改鼠标单击时图像的src喜欢img:active{}来自于 2024-04-06 19:25:4901505放大 d3.js 时散点图点不会保持值 这是我第一次使用d3.js,所以请耐心等待。我在vue.js文件中将其作为纯JavaScript实现。我正在尝试制作具有缩放功能的散点图。到目前为止,我几乎一切正常,但当我缩放时,...来自于 2024-04-06 18:16:2601403供应商特定伪元素上的 JavaScript 悬停事件 我有以下htmlinput标签。$("input[type='range']::-webkit-slider-thumb").on('hover',functi...来自于 2024-04-06 15:35:2401274使用 Javascript / Jquery 提交表单且不带按钮 我试图通过调用JavaScript函数并使用JQUERY/PHP执行表单来提交没有按钮的表单。我希望表单在后端静默执行,而无需重新加载页面。不幸的是,它不断返回JavaScript...来自于 2024-04-06 14:54:0302421使用'折叠显示”类自定义 Bootstrap 手风琴标题的外观 我想设置具有类collapseshow的面板的卡标题样式。在此示例中,它是第一个面板。我尝试使用CSS来使用.accordion.card.card-headerbutton.bt...来自于 2024-04-06 12:53:1101376