vue中引入mxGraph的步骤详解

第一步：下载npm包

npm install mxgraph --save

第二步：新建一个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;

这个是官方引入的方法。它将返回一个接受对象作为选析那个的工厂函数。必须将mxbasepath选项提供给工厂函数，而不是将其定义为一个全局变量。

在vue使用时方法的指向会发生变化，所以将其挂载到window上。

第三步：在index.vue或其他文件中引入

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

总结

以上所述是小编给大家介绍的vue中引入mxgraph的步骤详解，希望对大家有所帮助