1、npm 引入
npm install mxgraph --save
2、這個模塊可以使用require()方法進行加載。它將返回一個接受對象作為選項的工廠函數(shù)。必須將mxBasePath選項提供給工廠函數(shù)，而不是將其定義為一個全局變量。
var mxgraph = require("mxgraph")({ // 以下地址不需要修改mxImageBasePath: "./src/images", mxBasePath: "./src"})工廠函數(shù)返回一個“命名空間對象”，通過它可以訪問mxGraph包的所有對象。例如，mxEvent對象在mxgraph.mxEvent中可用。
var mxEvent = mxgraph.mxEvent;mxEvent.disableContextMenu(container);
這個引入是官方提供的方式，但是與vue結合使用的時候，方法的指向會發(fā)生變化，所以做了以下修改
避免方法的指向發(fā)生變化，將其掛載到window上面：
建立index.js如下：
import mx from 'mxgraph';const mxgraph = mx({ mxImageBasePath: './src/images', mxBasePath: './src'});// decode bug https://github.com/jgraph/mxgraph/issues/49window.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 { // 再容器中創(chuàng)建圖表 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參數(shù)中 this.getXml = mxUtils.getXml(xx); } }總結
以上所述是小編給大家介紹的vue中使用mxgraph的方法實例代碼詳解，希望對大家有所幫助，如果大家有任何疑問歡迎給我留言，小編會及時回復大家的！
新聞熱點
疑難解答
