vue项目中使用bpmn-流程图预览篇
内容概述
本系列 “vue项目中使用bpmn-xxxx” 分为七篇,均为自己使用过程中用到的实例,手工原创,目前陆续更新中。主要包括vue项目中bpmn使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。如果转载或通过爬虫直接爬的,格式特别丑,请来原创看:我是作者原文
前情提要
上文已经实现了节点操作的前进、后退、导入。导出等操作,今日来实现“流程图预览”,以及视图的放大缩小,效果如下:
前提:项目安装过bpmn,安装可见上篇文章
实现要点
bpmn提供了两个神器:Modeler 和 Viewer,Modeler带有左侧节点栏和右侧属性栏,点击节点可进行相应操作,Viewer是“查看”,不能更改节点,两者相互独立,可按实际需求按需引入
绘制流程图:import BpmnModeler from 'bpmn-js/lib/Modeler';
预览流程图:import BpmnViewer from 'bpmn-js/lib/Viewer';
<template>
<div class="container">
<el-button type="primary" @click="previewTemp">预览</el-button>
<el-button type="success" @click="handleZoom(1)">放大</el-button>
<el-button type="warning" @click="handleZoom(-1)">缩小</el-button>
<div class="chart-preview">
<div style="clear: both;"></div>
<div class="view-canvas">
<div id="container"
v-bind:style="{width: 100 * scale + '%',height: 100 * scale + '%'}"
></div>
</div>
</div>
</div>
</template>
<script>
import jquery from 'jquery';
import BpmnViewer from 'bpmn-js/lib/Viewer'; export default {
data() {
return {
containerEl: null,
bpmnModeler: null,
scale: 1,
// 此变量为预览的xml文件数据,由于行数过多,附在了附件中,使用时,将附件整个复值到currentCanvasXml即可
currentCanvasXml: ''
};
},
methods: {
handleZoom(flag) {
if (flag < 0 && this.scale <= 1) {
return;
}
this.scale += flag;
this.$nextTick(() => {
this.bpmnModeler.get('canvas').zoom('fit-viewport');
});
},
previewTemp() {
this.containerEl = document.getElementById('container');
// 避免缓存,每次清一下
this.bpmnModeler && this.bpmnModeler.destroy();
this.scale = 1;
this.bpmnModeler = new BpmnViewer({container: this.containerEl});
const viewer = this.bpmnModeler;
this.bpmnModeler.importXML(this.currentCanvasXml, (err) => {
if (err) {
console.error(err);
} else {
// 只实现预览,核心代码以下两句足够
const canvas = viewer.get('canvas');
canvas.zoom('fit-viewport');
// 以下代码为:为节点注册鼠标悬浮事件
const eventBus = this.bpmnModeler.get('eventBus');
const overlays = this.bpmnModeler.get('overlays');
eventBus.on('element.hover', (e) => {
const $overlayHtml = jquery(` <div class="tipBox">
你好,我是悬浮框里的内容
</div>`);
overlays.add(e.element.id, {
position: {top: e.element.height, left: 0},
html: $overlayHtml
});
});
eventBus.on('element.out', () => {
overlays.clear();
});
// 注册悬浮事件结束
}
});
}
}
};
</script>
<style lang="scss">
.container {
.tipBox {
width: 200px;
background: #fff;
border-radius: 4px;
border: 1px solid #ebeef5;
padding: 12px;
}
}
</style>
后续
currentCanvasXml 为预览的xml文件数据,由于行数过多,附在了附件中(点我!点我!),使用时,将整个赋值到currentCanvasXml,代码才可以运行,否则报错!!
想获取完整源码或有问题,欢迎大家关注我的公粽号,扫下面二维码或微信搜“Lemoncool”,即可获取~
可爱的你可能还需要
vue项目中使用bpmn-流程图预览篇的更多相关文章
- 在Vue项目中 选择图片并预览
最近开始使用vue做项目 在这个过程中,碰到了大多数做前端肯定经历的一个问题,就是文件上传预览 花了点时间解决,因此分享一下预览功能的解决方案 页面: <div class="sele ...
- vue项目中编写一个图片预览的公用组件
今天产品提出了一个查看影像的功能需求. 在查看单据的列表中,有一列是影像字段,一开始根据单据号调用接口查看是否有图片附件,如果有则弹出一个全屏的弹出层,如果没有给出提示.而且,从列表进入详情之后,附件 ...
- vue项目中图片预览旋转功能
最近项目中需要在图片预览时,可以旋转图片预览,在网上找了下,发现有一款功能强大的图片组件:viewerjs. git-hup: https://github.com/fengyuanchen/view ...
- vue项目中使用bpmn-番外篇(留言问题总结)
前情提要 “vue项目中使用bpmn-xxxx”系列的七篇文章在上周已经更新完成,发表后,有小伙伴在使用时提出了一些文章中没有讲到的问题,此篇作为番外篇,将大家提出的共性问题解答一下,欢迎大家支持原创 ...
- vue项目中使用bpmn-节点篇
前情提要 根据之前的操作,我们可以创建.导入.导出流程图,并对其进预览.通过此篇可以学到: 为节点添加点击.鼠标悬浮等事件 获取流程图内所有指定类型的节点 通过外部更新节点名字 获取节点实例的两种方法 ...
- vue项目中使用bpmn-为节点添加颜色
内容概述 本系列 “vue项目中使用bpmn-xxxx” 分为五篇,均为自己使用过程中用到的实例,手工原创,目前属于陆续更新中.主要包括vue项目中bpmn使用实例.应用技巧.基本知识点总结和需要注意 ...
- vue项目中使用bpmn-基础篇
内容概述 本系列“vue项目中使用bpmn-xxxx”分为五篇,均为自己使用过程中用到的实例,手工原创,目前属于陆续更新中.主要包括vue项目中bpmn使用实例.应用技巧.基本知识点总结和需要注意事项 ...
- vue项目中使用bpmn-流程图xml文件中节点属性转json结构
内容概述 本系列“vue项目中使用bpmn-xxxx”分为七篇,均为自己使用过程中用到的实例,手工原创,目前陆续更新中.主要包括vue项目中bpmn使用实例.应用技巧.基本知识点总结和需要注意事项,具 ...
- vue项目中使用bpmn-自定义platter
前情提要 经过前四篇的学习,我们能够实现bpmn基本绘图.预览.为节点加事件加颜色等效果,这一篇我们来说,如何自定义左侧工具栏(platter),首先看一下自定义前后效果图对比: 我们本次要实现的目标 ...
随机推荐
- JDBC 查询 模板
JDBC 查询 与增删改不同的是SQL语句的不同,还有查询反回的是结果集 需要定义 利用 next()方法逐层查询数据 使用getXXX方法获取数据 代码相关参数根据个人设置进行修改!!!! pac ...
- pycharm+keras+yolo3的使用和自选模型的训练中遇到的坑
1.TensorFlow版本的问题 报错:RuntimeError: `get_session` is not available when using TensorFlow 2.0. 解决办法:这个 ...
- 混合开发 h5+ 沉浸式的适配
1.需要在mainfest.json plus对象里添加 "statusbar": { "immersed": "true", " ...
- ijkplayer中遇到的问题汇总
在做音频播放的时候,很多公司使用的是开源的ijkplayer播放器,ijkplayer底层是基于ffmpeg,在某机型上面可能常常遇到各种问题.今天整理了大家在使用ijkplayer中遇到的问题,以及 ...
- 2. python提示:TypeError: unhashable type: 'list'
原因是,python字典的key不支持list类型和dict类型,需要转换 错误时 将list类型强制转换成string,用"".join(list). 修改后:
- RabbitMQ 在Ubuntu18.04上的安装
1.安装erlang由于rabbitMq需要erlang语言的支持,在安装rabbitMq之前需要安装erlang sudo apt-get install erlang2.安装Rabbitmq更新源 ...
- iOS URL schemes
来源:知乎 launch center pro支持的参数主要有两个,[prompt]文本输入框和[clipboard]剪贴板 淘宝宝贝搜索 taobao://http://s.taobao.com/? ...
- TensorFlow系列专题(十三): CNN最全原理剖析(续)
目录: 前言 卷积层(余下部分) 卷积的基本结构 卷积层 什么是卷积 滑动步长和零填充 池化层 卷积神经网络的基本结构 总结 参考文献 一.前言 上一篇我们一直说到了CNN[1]卷积层的特性,今天 ...
- Git 处理换行符的配置方法
core.autocrlf If you're programming on Windows and working with people who are not (or vice-versa), ...
- HDU 4497 GCD and LCM 素因子分解+ gcd 和 lcm
题意: 给两个数,lll 和 ggg,为x , y , z,的最小公倍数和最大公约数,求出x , y , z 的值有多少种可能性 思路: 将x , y , z进行素因子分解 素因子的幂次 x a1 a ...