vue中使用mxgraph的方法实例代码详解

1、npm 引入

npm install mxgraph --save

2、这个模块可以使用require()方法进行加载。它将返回一个接受对象作为选项的工厂函数。必须将mxbasepath选项提供给工厂函数，而不是将其定义为一个全局变量。

var mxgraph = require("mxgraph")(
{ // 以下地址不需要修改
mximagebasepath: "./src/images", 
mxbasepath: "./src"
})

工厂函数返回一个“命名空间对象”，通过它可以访问mxgraph包的所有对象。例如，mxevent对象在mxgraph.mxevent中可用。

var mxevent = mxgraph.mxevent;
mxevent.disablecontextmenu(container);

这个引入是官方提供的方式，但是与vue结合使用的时候，方法的指向会发生变化，所以做了以下修改

避免方法的指向发生变化，将其挂载到window上面：

建立index.js如下：

import mx from 'mxgraph';
const mxgraph = mx({
 mximagebasepath: './src/images',
 mxbasepath: './src'
});
// decode bug https://github.com/jgraph/mxgraph/issues/49
window.mxgraph = mxgraph.mxgraph;
window.mxgraphmodel = mxgraph.mxgraphmodel;
window.mxeditor = mxgraph.mxeditor;
window.mxgeometry = mxgraph.mxgeometry;
window.mxdefaultkeyhandler = mxgraph.mxdefaultkeyhandler;
window.mxdefaultpopupmenu = mxgraph.mxdefaultpopupmenu;
window.mxstylesheet = mxgraph.mxstylesheet;
window.mxdefaulttoolbar = mxgraph.mxdefaulttoolbar;
export default mxgraph;

页面引入：

import mxgraph from 'index.js';
const {mxgraph, mxclient, mxcodec, mxutils, mxconstants, mxperimeter} = mxgraph;

3、书写‘hello world' demo

mounted () {
      if (!mxclient.isbrowsersupported()) {
        // 判断是否支持mxgraph
        mxutils.error('browser is not supported!', 200, false);
      } else {
        // 再容器中创建图表
        let container = document.getelementbyid('graphcontainer');
        let mxgraph = mxgraph;
        let mxcodec = mxcodec;
        var graph = new mxgraph(container);
        // 生成 hello world!
        var parent = graph.getdefaultparent();
        graph.getmodel().beginupdate();
        try {
          var v1 = graph.insertvertex(parent, null, 'hello,', 20, 200, 80, 30);
          var v2 = graph.insertvertex(parent, null, 'world', 200, 150, 80, 30);
          var v3 = graph.insertvertex(parent, null, 'everybody!', 300, 350, 60, 60);
          graph.insertedge(parent, null, '', v1, v2);
          graph.insertedge(parent, null, '', v2, v3);
          graph.insertedge(parent, null, '', v1, v3);
        } finally {
          // updates the display
          graph.getmodel().endupdate();
        }
        // 打包xml文件
        let encoder = new mxcodec();
        let xx = encoder.encode(graph.getmodel());
        // 保存到getxml参数中
        this.getxml = mxutils.getxml(xx);
      }
    }

总结

以上所述是小编给大家介绍的vue中使用mxgraph的方法实例代码详解，希望对大家有所帮助