【bpmn.js 使用总结】一、基础使用

基础使用Viewer BPMN 图表查看器NavigatedViewer 包含鼠标导航工具的图表查看器Modeler BPMN 图表建模器Viewer 功能最简单，仅用来展示NavigatedViewer 在 Viewer 上扩展了导航和缩放功能Modeler 融合了 Viewer 和 NavigatedViewer,并拥有工具栏、属性面板等，实现建模能力快速上手(Vue)安装依赖npm inst

_pengliang

5362人浏览 · 2020-10-19 21:41:46

_pengliang · 2020-10-19 21:41:46 发布

基础使用

Viewer BPMN 图表查看器
NavigatedViewer 包含鼠标导航工具的图表查看器
Modeler BPMN 图表建模器

Viewer 功能最简单，仅用来展示

NavigatedViewer 在 Viewer 上扩展了导航和缩放功能

Modeler 融合了 Viewer 和 NavigatedViewer,并拥有工具栏、属性面板等，实现建模能力

快速上手(Vue)

安装依赖

npm install bpmn-js -S

html

<div ref="canvas" class="canves"></div>

css

.canves {
  width: 100%;
  height: 100vh;
}

Viewer

Viewer 用于展示

import Modeler from 'bpmn-js/lib/Viewer'
import { xmlStr } from './xmlData.js'
export default {
  data() {
    return {
      bpmnViewer: null
    }
  },
  async mounted() {
    this.bpmnViewer = new Modeler({
      container: this.$refs.canvas
    })

    try {
      const { warnings } = await this.bpmnViewer.importXML(xmlStr)
      // 调整在正中间
      this.bpmnViewer.get('canvas').zoom('fit-viewport', 'auto')
      console.log('rendered')
    } catch (err) {
      console.log('error rendering', err)
    }
  }
}

xmlStr

NavigatedViewer

NavigatedViewer 显示和导航 BPMN 图

在 Viewer 的基础上，小小的修改

import Modeler from 'bpmn-js/lib/Viewer'

改为 👇

import Modeler from 'bpmn-js/lib/NavigatedViewer'

Modeler

import Modeler from 'bpmn-js/lib/Modeler'
import 'bpmn-js/dist/assets/diagram-js.css' // 左边工具栏以及编辑节点的样式
import 'bpmn-js/dist/assets/bpmn-font/css/bpmn.css'
import 'bpmn-js/dist/assets/bpmn-font/css/bpmn-codes.css'
import 'bpmn-js/dist/assets/bpmn-font/css/bpmn-embedded.css'
import { xmlStr } from './xmlData.js'
export default {
  data() {
    return {
      bpmnModeler: null
    }
  },
  async mounted() {
    this.bpmnModeler = new Modeler({
      container: this.$refs.canvas
    })

    try {
      const { warnings } = await this.bpmnModeler.importXML(xmlStr)
      // 调整在正中间
      this.bpmnModeler.get('canvas').zoom('fit-viewport', 'auto')
      console.log('rendered')
    } catch (err) {
      console.log('error rendering', err)
    }
  }
}

注意：高度应为 可计算值或固定值，否则画布计算高度错误会导致元素消失闪烁

到此已经成功，如图：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-0dAR6dVu-1603036255799)(./img/init_bpmn.png)]

最后

可能你的 UI 图并不长这样，甚至没有你想要的功能。

没关系，BPMN 提供了许多模块以及 API 支持自定义扩展，能够满足大部分需求。

下面了解下 BPMN 内部，以便更好的理解和自定义修改

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^