Detailed explanation of the method example code of using mxgraph in vue

1. Introduction of npm

npm install mxgraph --save

2. This module can be loaded using the require() method. It will return a factory function that accepts an object as an option. The mxBasePath option must be provided to the factory function instead of defining it as a global variable.

var mxgraph = require("mxgraph")(
{ // The following address does not need to be modifiedmxImageBasePath: "./src/images", 
mxBasePath: "./src"
})

The factory function returns a "namespace object" through which all objects in the mxGraph package can be accessed. For example, the mxEvent object is available in it.

var mxEvent = ;
(container);

This introduction is an official method, but when used in combination with vue, the method's orientation will change, so the following modifications have been made

To avoid the method's pointing changes, mount it on the window:

Created as follows:

import mx from 'mxgraph';
const mxgraph = mx({
 mxImageBasePath: './src/images',
 mxBasePath: './src'
});
// decode bug /jgraph/mxgraph/issues/49
 = ;
 = ;
 = ;
 = ;
 = ;
 = ;
 = ;
 = ;
export default mxgraph;

Page introduction:

import mxgraph from '';
const {mxGraph, mxClient, mxCodec, mxUtils, mxConstants, mxPerimeter} = mxgraph;

3. Writing ‘hello world’ demo

mounted () {
      if (!()) {
        // Determine whether mxgraph is supported        ('Browser is not supported!', 200, false);
      } else {
        // Create a chart in the container        let container = ('graphContainer');
        let MxGraph = mxGraph;
        let MxCodec = mxCodec;
        var graph = new MxGraph(container);
        // Generate Hello world!        var parent = ();
        ().beginUpdate();
        try {
          var v1 = (parent, null, 'Hello,', 20, 200, 80, 30);
          var v2 = (parent, null, 'World', 200, 150, 80, 30);
          var v3 = (parent, null, 'everyBody!', 300, 350, 60, 60);
          (parent, null, '', v1, v2);
          (parent, null, '', v2, v3);
          (parent, null, '', v1, v3);
        } finally {
          // Updates the display
          ().endUpdate();
        }
        // Package XML files        let encoder = new MxCodec();
        let xx = (());
        // Save to getXml parameter         = (xx);
      }
    }

Summarize

The above is a detailed explanation of the example code of using mxgraph in vue introduced by the editor. I hope it will be helpful to everyone. If you have any questions, please leave me a message and the editor will reply to everyone in time!