0

我正在尝试使用 Vue 3 重新构建bpmn-js 覆盖示例。但是，我正在努力在公共文件夹中创建示例分发。我尝试使用 webpack（以 laravel-mix 作为包装器）和 grunt，但是，直到现在还没有取得重大成功。

请看我的 vue.js 文件，主要由 index.html、main.js 和 app.vue 组成。

索引.html：

<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title><%= htmlWebpackPlugin.options.title %></title>
  </head>
  <body>
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
    <script src="./main.js"></script>
  </body>
</html>

主.js：

import { createApp } from 'vue'
import App from './App.vue'

const app = createApp(App);
app.mount('#app');

应用程序.vue：

<template>
  <div id="canvas" style="height: 100%" />
</template>

<script>
  import diag from "./assets/diagram.bpmn";
  import BpmnViewer from 'bpmn-js/lib/NavigatedViewer';

export default {
  name: 'app',
  mounted(){
  let bpmnViewer = new BpmnViewer({
    container: '#canvas'
  });

  bpmnViewer.importXML(diag).then(function() {

  var canvas = bpmnViewer.get('canvas'),
      overlays = bpmnViewer.get('overlays');


  // zoom to fit full viewport
  canvas.zoom('fit-viewport');

  // attach an overlay to a node
  overlays.add('SCAN_OK', 'note', {
    position: {
      bottom: 0,
      right: 0
    },
    html: '<div class="diagram-note">Mixed up the labels?</div>'
  });


  // configure scale=false to use non-scaling overlays
  overlays.add('START_PROCESS', 'note', {
    position: {
      bottom: 0,
      right: 0
    },
    scale: false,
    html: '<div class="diagram-note">I don\'t scale</div>'
  });

  // configure scale={ min: 1 } to use non-shrinking overlays
  overlays.add('SCAN_QR_CODE', 'note', {
    position: {
      bottom: 0,
      right: 0
    },
    scale: { min: 1 },
    html: '<div class="diagram-note">I don\'t shrink beyond 100%</div>'
  });



  // configure show={ minZoom: 0.6 } to hide overlays at low zoom levels
  overlays.add('END_PROCESS', 'note', {
    position: {
      bottom: 0,
      right: 0
    },
    show: {
      minZoom: 0.7
    },
    html: '<div class="diagram-note">I hide at low zoom levels</div>'
  });

}).catch(function(err) {
  console.error('could not import BPMN 2.0 diagram', err);
});
}
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

任何人都可以提供指导吗？

4

0 回答 0