如何改写vue项目中bpmn自定义platter示例代码为长尾？

本文共计1478个文字，预计阅读时间需要6分钟。

内容概述 + 系列概述：在vue项目中使用bpmn-xxxx系列中，将分为七篇，每篇介绍我在使用过程中遇到的具体实例、手工原创以及目前持续更新的内容。主要涵盖vue项目中bpmn的使用实例、应用技巧、基础知识总结和所需技能。

1. 初识bpmn在vue项目中的应用

2.bpmn模型设计及可视化展示

3.bpmn流程控制与事件处理

4.bpmn表单集成与数据交互

5.bpmn与其他组件的协作

6.bpmn项目实战案例分享

7.bpmn进阶技巧与性能优化

内容概述

本系列“vue项目中使用bpmn-xxxx”分为七篇，均为自己使用过程中用到的实例，手工原创，目前陆续更新中。主要包括vue项目中bpmn使用实例、应用技巧、基本知识点总结和需要注意事项，具有一定的参考价值，需要的朋友可以参考一下。如果转载或通过爬虫直接爬的，格式特别丑，请来原创看：我是作者原文

前情提要

经过前四篇的学习，我们能够实现bpmn基本绘图、预览、为节点加事件加颜色等效果，这一篇我们来说，如何自定义左侧工具栏（platter），首先看一下自定义前后效果图对比：

我们本次要实现的目标：基于左侧platter原有元素类型，创建出一个新的自定义节点。