bpmnjs 通过第三方插件展示鹰眼

用头发抵命

已于 2025-04-08 19:27:09 修改

阅读量134

点赞数 2

分类专栏： bpmnjs 文章标签：前端

于 2025-04-08 18:35:19 首次发布

本文链接：https://blog.csdn.net/weixin_43328878/article/details/147074644

版权

bpmnjs 专栏收录该内容

1 篇文章

订阅专栏

1. 下载依赖

npm install diagram-js-minimap --save

2. 引入依赖

import minimap from 'diagram-js-minimap';
import 'diagram-js-minimap/assets/diagram-js-minimap.css'; // 必须引入样式

3.初始化BPMN模型时使用

// 在additionalModules属性中添加
additionalModules: [minimap]

4.修改样式（位置、默认展示）


:deep(.djs-minimap) {
  top: auto;
  bottom: 1.25rem;
  width: 18.75rem;
  height: 10rem;
  border: 1px solid #ccc;
  z-index: 1000;
  .toggle {
  	/* 隐藏切换按钮 */
    display: none;
  }
  .map {
  	/* 默认展示鹰眼 */
    display: block;
  }
}