1 基础元素组成

（1）源对象：source
（2）目的对象：target
（3）锚点：Anchor
（4）连接线：Connector
（5）端点：Endpoint
（6）Overlay：添加到连接线上的附件

2 jsplumb初使用

import {jsPlumb} from 'jsplumb'const $jsPlumb=jsplumb.jsplumb //调用这个接口就行使用$jsPlumb.getInstance({})    //创建jsPlumb实例

那我现在需要在某个指定区域内画流程图又该如何

//可以设置容器来解决
$jsPlumb.setContainer('') //注意设置的容器必须设置position:relative  !!!

为什么要进行上述操作呢？

因为jsPlumb会给它自己画的元素添加position:absolute

但有时候窗口resize时，jsPlumb不会自动跟踪dom元素位置，导致对不齐，设置为px可以解决这个问题，但是设置为响应式单位的话，必须使用window.resize

3 jsPlumb的运行时机

jsPlumb必须等元素加载完才能使用，所以一般写在onMounted生命周期钩子里，并使用$jsPlumb.ready(()=>{})

4 离开页面时需要进行什么操作？

当离开页面时需要使用$jsPlumb.reset()方法清除缓存，不然它将一直保存在浏览器缓存中，下次进入页面容易出现bug

5 在$jsPlumb.getInstance()中使用api


let $jsPlumb = jsPlumb.jsPlumb;
let jsPlumb_instance = null; // 缓存实例化的jsplumb对象onMounted(()=>{showPlumb()
})const showPlumb=()=>{jsPlumb_instance=$juPlumb.getInstance({Container: 'container',   //容器的idEndpointStyle:{radius:2,fill:'red'},   //锚点的样式PaintStyle:{stroke:'#000',strokeWidth:2},  //绘画样式HoverPaintStyle:{stroke:'red'},     //悬停样式ConnectionOverlays:[  //连接的覆盖层，设置所有箭头的样式'Arrow',{width:2,    //箭头尾部宽度length:2,   //箭头尾部到头部距离location:1,  //箭头出现在连接器上的位置，即箭头在直线上的位置direction:1,    //箭头方向,-1为反向foldback: 1,    //尾部指向折返的箭头多远，就是箭头尾部向左右的缩进程度paintStyle:{},}]，Connector:['Straight'],    //要使用的默认连接器类型:直线、折线、曲线DrapOptions:[],   //为拖拽元素设置样式})
}

6 常用方法

（1）batch(fn, doNotRepaintAfterwards：Boolean)

暂停绘图，运行指定函数，然后重启绘图。第二个参数决定是否重启绘图

（2）makeSource(el, params)

指定el元素称为连接源，允许从它们开始拖到连接，而无需事先注册任何端点

el: String | Element, 可以为选择器或DOM元素
params：Object，创建配置

jsplumb应用场景快速开发相关推荐

【“互联网+”大赛华为云赛道】CloudIDE命题攻略：明确业务场景，快速开发插件
摘要:基于华为云CloudIDE和插件开发框架自行设计并开发插件. IDE是每个开发人员必备的生产工具,一款好的IDE + 插件的组合,除了帮助开发者把编写代码.组织项目.编译运行放在一个环境中外,还 ...
jeecgboot前端开发_一款基于代码生成器的Java快速开发平台【jeecg-boot】
原标题:一款基于代码生成器的Java快速开发平台[jeecg-boot] 今天给大家介绍一个后台脚手架框架:jeecg-boot 来看看官方怎么介绍的. 一款基于代码生成器的Java快速开发平台!全新 ...
云平台设计系统，助力业务快速开发
用友进入3.0阶段,敏捷开发.逆向开发.双披萨饼原则快速作战,"用户之友"价值回归,这些都为快速原型.高保真验证.快速开发.体验一致提出了更高的要求.也带来了更大的压力. 新的变化 ...
浅析工业级物联网项目的快速开发
浅析工业级物联网项目的快速开发发表于2015-11-10 15:01| 1567次阅读| 来源CSDN| 4 条评论| 作者蒲婧 CTO俱乐部CTOCTO讲堂物联网工业级刘洪峰叶帆 width=&q ...
有了 serverless，前端也可以快速开发一个 Puppeteer 网页截图服务
更多云原生技术资讯可关注阿里巴巴云原生技术圈. Puppeteer 是什么? puppeteer 官网的介绍如下: Puppeteer is a Node library which provides ...
JavaEE企业级快速开发平台jeesite4的使用和快速搭建项目
场景 JeeSIte是一个JavaEE企业级快速开发平台,基于经典技术组合(SpringBoot.Apache Shiro .MyBatis.Beetl.Bootstrap)在线代码生成工具,支持Sp ...
快速开发平台业务表字段设置的用法
在快速开发平台 15版本增加了业务表字段设置,和表结构中字段设置类似,可以定义业务表字段的相关属性,关于业务表字段设置,说明如下: 1.初始默认继承于表结构的字段设置. 2.当业务表字段被修改,并且与 ...
如何为Apache Kylin快速开发新数据源？
2019独角兽企业重金招聘Python工程师标准>>> 在近期的Apache Kylin Innovation Meetup 上,Kyligence的技术合伙人兼生态合作技术总监李栋 ...
开放下载！《AliOS Things快速开发指南》
简介:<AliOS Things快速开发指南>手把手教你从环境准备到线上.线下开发调试,更有两大典型场景实践等你参与.你的物联网开发从这里开始!快来get新技能吧~ AliOS Thing ...

jsplumb应用场景快速开发