设计网站推荐室内,网站建设中网站需求分析和报告工能论文,网站建设代码流程,找设计师网站背景
项目需求突然叫我实现一个类似processOn一样的在线流程图绘制工具。 这可难倒我了#xff0c;立马去做调研#xff0c;在github上找了很多个开源的流程图绘制工具#xff0c; 对比下来我还是选择了 bpmn-js
原因#xff1a; 1、他的流程图是涉及到业务的#xff0c…背景
项目需求突然叫我实现一个类似processOn一样的在线流程图绘制工具。 这可难倒我了立马去做调研在github上找了很多个开源的流程图绘制工具 对比下来我还是选择了 bpmn-js
原因 1、他的流程图是涉及到业务的比如开始事件、结束事件等 2、扩展性很强这个扩展性也太强了很多api都是看源码找到, 3、可以实现一个完整的流程事件并进行模拟 接下来看看在vue项目中我们如何使用bpmn-js
第一步
引入npm 相关的包
npm install bpmn-js
npm install diagram-js第二步
项目中使用
templatediv classcontainers tabindex0dividcanvasrefcanvas tabindex0 contextmenu.prevent/diva refdownloadLink hidden/a/div
/template
script
import CustomModeler from ./config
export default {methods:{init() {this.bpmnModeler new CustomModeler({container: this.$refs.canvas,keyboard: {bindTo: this.$el},// 添加控制板propertiesPanel: {parent: #js-properties-panel},// 添加控制板overlays: {defaults: {show: { minZoom: 0.1 },scale: true}},additionalModules})this.createNewDiagram()},/*** bpmn绘制操作*/createNewDiagram() {// 将字符串转换成图显示出来this.bpmnModeler.importXML(this.xmlData).then(() {this.bpmnModeler.get(canvas).zoom(fit-viewport, auto)})},}
}
/scriptconfig/index.js
import Modeler from bpmn-js/lib/Modelerimport inherits from inheritsimport CustomModule from ./custom
import DisableModeling from ./custom/disable-modelingexport default function CustomModeler(options) {Modeler.call(this, options)this._customElements []
}inherits(CustomModeler, Modeler)CustomModeler.prototype._modules [].concat(CustomModeler.prototype._modules,[CustomModule, DisableModeling])
