内容概述
本系列“vue项目中使用bpmn-xxxx”分为七篇，均为自己使用过程中用到的实例，手工原创，目前陆续更新中。主要包括vue项目中bpmn使用实例、应用技巧、基本知识点总结和需要注意事项，具有一定的参考价值，需要的朋友可以参考一下。如果转载或通过爬虫直接爬的，格式特别丑，请来原创看：我是作者原文
前情提要
经过前四篇的学习，我们能够实现bpmn基本绘图、预览、为节点加事件加颜色等效果，这一篇我们来说，如何自定义左侧工具栏（platter），首先看一下自定义前后效果图对比：
我们本次要实现的目标：基于左侧platter原有元素类型，创建出一个新的自定义节点。暂且叫它“草莓蛋糕”节点，类型是 bpmn:Task,样式我们自己找一个好看的小草莓蛋糕图案。所以，开动吧~首先新建一个“customPalette”文件夹，里面放我们今天所有自定义的文件。
步骤1：建立platter类函数，命名为CustomPalette.js
export default class CustomPalette {
constructor(create, elementFactory, palette) {
this.create = create;
this.elementFactory = elementFactory;
palette.registerProvider(this);
} // 这个是绘制palette的核心，函数名不要变
getPaletteEntries() {
const elementFactory = this.elementFactory;
const create = this.create;
function dragEventFactory(type) {
return function (event) {
const taskShape = elementFactory.create('shape', {
type: type
});
create.start(event, taskShape);
};
}
return {
'create.cake': {
title: '我是自定义节点-草莓蛋糕', // 鼠标悬浮到节点上显示的文字
className: 'icon-custom bpmn-icon-cake', // 样式名
action: { // 操作该节点时会触发的事件，此时只注册一个拖动事件即可，否则拖动时没有效果
dragstart: dragEventFactory('bpmn:Task')
}
}
};
}
}
CustomPalette.$inject = [
'create',
'elementFactory',
'palette'
];
此时，我们已经注册好了一个名称为“create.cake”的节点，拖动它时，画布中会出现一个”bpmn:Task”类型的节点，此时需要将该文件导出并在页面中引入，否则没有效果。
步骤2：在CustomPalette.js同级，建立一个index.js文件将其导出
import CustomPalette from './CustomPalette';
export default {
__init__: ['customPalette'] customPalette: ['type', CustomPalette],
};步骤3：页面中（index.vue）引入index.js
import customModule from './customPalette';
