bpmn流程图获取节点添加事件

最新推荐文章于 2024-08-11 19:48:46 发布

你呀1229

最新推荐文章于 2024-08-11 19:48:46 发布

阅读量315

点赞数 2

文章标签：流程图前端 javascript

本文链接：https://blog.csdn.net/weixin_56728548/article/details/136457262

版权

文章介绍了如何在BPMN流程图中使用JavaScript为节点添加事件监听器，当鼠标移入时改变cursor样式为手型，以及在节点点击和鼠标悬停时执行特定操作。

摘要由CSDN通过智能技术生成

需求：流程图节点要求鼠标移入时显示手型

const addEventBusListener =()=> {
const eventBus = bpmnModelerA.value?.get('eventBus');
const canvas = bpmnModelerA.value?.get('canvas')
// 注册节点事件，eventTypes中可以写多个事件
const eventTypes = ['element.click', 'element.hover'];
eventTypes.forEach((eventType) => {
  eventBus?.on(eventType, (e:any) => {
    const {element} = e;
    if (!element.parent) return;
    if (!e || element.type === 'bpmn:Process') {
      return false;
    } else {
      if (eventType === 'element.click') {
        // 节点点击后想要做的处理
        // 此时想要点击节点后，拿到节点实例，通过外部输入更新节点名称
        // this.currentElement = element;
      } else if (eventType === 'element.hover') {
        // 鼠标滑过节点后想要做的处理
        canvas.addMarker(element, 'yangshi');
      }
    }
  });
});
}
addEventBusListener()

<style lang="less">
.yangshi{
  cursor: pointer !important
}
</style>