本系列“vue项目中使用bpmn-xxxx”分为七篇,均为自己使用过程中用到的实例,手工原创,目前陆续更新中。主要包括vue项目中bpmn使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。暂且叫它“草莓蛋糕”节点,类型是 bpmn:Task,样式我们自己找一个好看的小草莓蛋糕图案。新建一个customPalette.scss文件,在该文件同级放一张“cake.png”的图片,作为节点的背景图写入。因为我们是在bpmn原有的元素“bpmn:Task”基础上进行修改,所以我们需要对将BaseRenderer进行继承。重头戏是里面的drawShape函数。我们在CustomRenderer.js同级建立一个util文件,记录自定义类型节点的一些属性。后续项目目录:index.vue是画布主页面,同级customPalette文件夹下共有6个文件,结构如下:

vue项目中使用bpmn-自定义platter的示例代码

vue项目中使用bpmn-自定义platter的示例代码

vue项目中使用bpmn-自定义platter的示例代码

vue项目中使用bpmn-自定义platter的示例代码

vue项目中使用bpmn-自定义platter的示例代码

vue项目中使用bpmn-自定义platter的示例代码