如果在编辑流程图的过程中，需要对图中元素的动作进行监听，比如：
shape.added新增一个shape之后触发shape.removed删除一个shape之后触发connect.end连线完成后触发
官网提供了很多其他事件
接下来一起来测试一下吧
监听 modeler并绑定事件
还是在之前项目 vue-bpmn 的基础上，在 views 文件夹下新增 event.vue 文件
在 success() 函数中添加上监听事件的函数
<script>
...success () {
console.log('创建成功')this.addModelerListener()},// 监听 modeleraddModelerListener () {
const bpmnjs = this.bpmnModelerconst that = this// 这里用 forEach 给 modeler 上添加要绑定的事件const events = ['shape.added', 'shape.move.end', 'shape.removed', 'connect.end', 'connect.move']events.forEach(event => {
that.bpmnModeler.on (event, e => {
console.log(event, e)const elementRegistry = bpmnjs.get('elementRegistry')const shape = e.element ? elementRegistry.get(e.element.id) : e.shapeconsole.log(shape)// 通过监听事件判断操作方式if (event === 'shape.added') {
console.log('新增了shape')} else if (event === 'shape.removed') {
console.log('删除了shape')}})})}
...
</script>
效果图
监听 element 并绑定事件
此小节主要是用于监听用户点击图形上的 element 或者监听某个 element 改变，比如：
element.click：点击元素element.changed：当元素发生改变的时候（包括新增、移动、删除元素）
还是在 success() 上添加监听事件 addEventBusListener() ，配置好后，当元素被点击、新增、移动和删除的时候就能监听到了
<script>
...success () {
this.addEventBusListener()},// 监听 element addEventBusListener () {
const eventBus = this.bpmnModeler.get('eventBus') // 需要使用 eventBusconst eventType = ['element.click', 'element.changed'] // 需要监听的事件集合eventType.forEach (eventType => {
eventBus.on(eventType, e => {
console.log(e)})})}
...
</script>
当点击画布的时候，有可能根元素也会触发此事件，一般是不想让它触发的，我们可以在
eventBus.on()的回调函数中添加一个判断来避免这个问题。
eventBus.on(eventType, e => {
if (!e || e.element.type == 'bpmn:Process') return // 这里根元素是 bpmn:Processconsole.log(e)
})
我们可以使用 elementRegistry 来获取 shape 信息，使用 e.element 和 shape 获取到的信息是一样的，不过更推荐用elementRegistry 来获取 shape 信息
// 监听 element addEventBusListener () {
const eventBus = this.bpmnModeler.get('eventBus') // 需要使用 eventBusconst eventType = ['element.click', 'element.changed'] // 需要监听的事件集合eventType.forEach (eventType => {
eventBus.on(eventType, e => {
if (!e || e.element.type == 'bpmn:Process') return // 这里根元素是 bpmn:Processconsole.log(e)const elementRegistry = this.bpmnModeler.get('elementRegistry')const shape = elementRegistry.get(e.element.id) // 传递 id 进去console.log(shape) // {Shape}console.log(e.element) // {Shape}console.log(JSON.stringify(shape) === JSON.stringify(e.element)) // true})})}
