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

这篇文章主要介绍了vue中使用mxgraph的方法实例代码详解,需要的朋友可以参考下 1、npm 引入 npm inst…

这篇文章主要介绍了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的方法实例代码详解,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

以上就是vue中使用mxgraph的方法实例代码详解的详细内容,更多请关注www.cfluntan.cn其它相关文章!

为您推荐

返回顶部