代码拉取完成,页面将自动刷新
同步操作将从 XIETONGJIAN/bpmn-designer 强制同步,此操作会覆盖自 Fork 仓库以来所做的任何修改,且无法恢复!!!
确定后同步将在后台操作,完成时将刷新页面,请耐心等待。
BPMNJS是一个用于在浏览器中渲染BPMN 2.0流程图的JavaScript库。在Vue 3项目中使用BPMNJS,可以按照以下步骤:
"bpmn-js": "^8.9.1",
"diagram-js": "^7.8.2",
"diagram-js-minimap": "^2.1.1",
"bpmn-js-properties-panel": "^0.46.0",
import BpmnModeler from 'bpmn-js/lib/Modeler';
// 以下为bpmn工作流绘图工具的样式
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 'bpmn-js-properties-panel/dist/assets/bpmn-js-properties-panel.css' // 右边工具栏样式
import 'bpmn-js-properties-panel/styles/properties.less'
import 'diagram-js-minimap/assets/diagram-js-minimap.css'
在Vue组件的mounted()钩子函数中创建BPMNJS实例,可以使用以下代码:
function initData() {
bpmnModeler = new BpmnModeler({
container: unref(canvasRef),
keyboard: {
bindTo: document,
},
propertiesPanel: {
parent: unref(propertiesPanel),
},
additionalModules: [
customTranslateModule,
propertiesProviderModule,
propertiesPanelModule,
],
moddleExtensions: {
activiti: activitiModdleDescriptor
}
});
}
<div class="canvas" ref="canvasRef" id="js-canvas"></div>
<div ref="propertiesPanel" class="properties" :class="{'hide' : !propertiesPanelVisible}" id="js-properties-panel"></div>
npm install
npm run serve
npm run build
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。