MxGraph從入門到精通之5：在Vue項目中使用MxGraph

第一步：安裝npm包

npm install mxgraph

第二步：在mxgraph.vue中使用mxgraph

<template>
  <div>
    <div ref="graphContainer">
    </div>
  </div>
</template>

<script>
import mx from 'mxgraph'

export default {
  name: 'Application',
  data() {
    return {
    }
  },
  mounted() {
    const mxgraph = mx({
      mxImageBasePath: './src/images',
      mxBasePath: './src'
    })
    const MxGraph = mxgraph.mxGraph
    var graph = new MxGraph(this.$refs.graphContainer)

    // Gets the default parent for inserting new cells. This
    // is normally the first child of the root (ie. layer 0).
    var parent = graph.getDefaultParent()

    // Adds cells to the model in a single step
    graph.getModel().beginUpdate()
    try {
      const v1 = graph.insertVertex(parent, null, 'Hello,', 20, 20, 80, 30)
      const v2 = graph.insertVertex(parent, null, 'World!', 200, 150, 80, 30)

      graph.insertEdge(parent, null, '', v1, v2)
    } finally {
      // Updates the display
      graph.getModel().endUpdate()
    }
  }
}
</script>

運行vue項目，查看效果

運行vue項目：

npm run serve # 根據package.json中的配置，可能是npm run dev等等...

打開瀏覽器查看效果：