欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

vue中引入mxGraph的步骤详解

程序员文章站 2023-12-15 11:37:22
第一步:下载npm包 npm install mxgraph --save 第二步:新建一个index.js文件 文件内容如下 import mx fr...

第一步:下载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的步骤详解,希望对大家有所帮助

上一篇:

下一篇: