bpmnjs，VUE工作流bpmnjs一

1，VUE工作流bpmnjs一

??一个BPMN 2.0渲染工具包和Web建模器。使用JavaScript编写，在不需要后端服务器支持的前提下向现代浏览器内嵌入BPMN2.0流程图。这使得它很容易的嵌入到任何web应用中。这个库既可以是web查看器也可以是web建模器。使用查看器将BPMN2.0流程图嵌入到你的应用中并可以使用数据丰富你的流程图。使用建模器在你的应用内部创建BPMN2.0流程图。 github地址： https://github.com/bpmn-io 实例地址： https://bpmn.io/toolkit/bpmn-js/ http://wkd.to8to.com/ https://github.com/haoyanyu/vue-with-bpmn 必须引入组件：

VUE工作流bpmnjs一

2，全网最详bpmnjs教材事件篇

bpmn.js 是一个BPMN2.0渲染工具包和web建模器, 使得画流程图的功能在前端来完成. 因为公司业务的需要因而要在项目中使用到 bpmn.js ,但是由于 bpmn.js 的开发者是国外友人, 因此国内对这方面的教材很少, 也没有详细的文档. 所以很多使用方式很多坑都得自己去找.在将其琢磨完之后, 决定写一系列关于它的教材来帮助更多 bpmn.js 的使用者或者是期于找到一种好的绘制流程图的开发者. 同时也是自己对其的一种巩固. 由于是系列的文章, 所以更新的可能会比较频繁, 您要是无意间刷到了且不是您所需要的还请谅解 ??. 不求赞??不求心??. 只希望能对你有一点小小的帮助. 所有教材的github地址: 《bpmn-chinese-document》上一章节我们介绍了利用 bpmn.js 与后台进行交互, 要是对 bpmn.js 不了解的小伙请移步: 《全网最详bpmn.js教材-http请求篇》这一章节要讲解是关于 bpmn.js 的一些事件, 通过学习此章节你可以学习到: 很多时候你期望的是在用户在进行不同操作的时候能够监听到他操作的是什么, 从而做想要做的事情. 是进行了 shape 的新增还是进行了线的新增. 比如如下的一些监听事件: 继续在项目案例 bpmn-vue-basic 的基础上创建一个 event.vue 文件: 并在 success() 函数中添加上监听事件的函数: 如图所示, 在这里你就可以获取到相关节点的所有信息了: 案例Git地址: LinDaiDai-bpmn.js案例event.vue 上面介绍的是监听 modeler 并绑定事件, 可能你也需要监听用户点击图形上的 element 或者监听某个 element 改变: 继续在 success() 上添加监听事件: 配置好 addEventBusListener() 函数后, 在进行元素的点击、新增、移动、删除的时候都能监听到了. 但是有一点很不好, 你在点击“画布”的时候, 也就是根元素也可能会触发此事件, 我们一般都不希望此时会触发, 因此我们可以在 on 回调中添加一些判断, 来避免掉不需要的情况: 此时我们可以把监听到返回的节点信息打印出来看看: 如上图, 它会打印出该节点的 Shape 信息和 DOM 信息等, 但我们可能只关注于 Shape 信息(也就是该节点的 id、type 等等信息), 此时我们可以使用 elementRegistry 来获取 Shape 信息: 或者你也可以直接就用 e.element 获取到 Shape 的信息, 我比较了一下它们两是一样的. 但是官方是推荐使用 elementRegistry 的方式. 上面我们已经介绍了 modeler 和 element 的监听绑定方式, 在事件应用中, 你更多的需要知道用户要进行什么操作, 好写对应的业务逻辑. 这里我就以我工作中要用到的场景为案例进行讲解. 案例Git地址: LinDaiDai-bpmn.js案例event.vue 喜欢的小伙伴请给个 Star ??呀, 谢谢?? 系列全部目录请查看此处: 《全网最详bpmn.js教材》系列相关推荐: 《全网最详bpmn.js教材-基础篇》《全网最详bpmn.js教材-http请求篇》《全网最详bpmn.js教材-renderer篇》《全网最详bpmn.js教材-contextPad篇》《全网最详bpmn.js教材-编辑、删除节点篇》

全网最详bpmnjs教材事件篇