vue中使用mxgraph的方法實例代碼詳解

來源：懂視網責編：小采時間：2020-11-27 21:56:49

vue中使用mxgraph的方法實例代碼詳解

vue中使用mxgraph的方法實例代碼詳解:1、npm 引入 npm install mxgraph --save 2、這個模塊可以使用require()方法進行加載。它將返回一個接受對象作為選項的工廠函數。必須將mxBasePath選項提供給工廠函數，而不是將其定義為一個全局變量。 var mxgraph = require(m

推薦度：

點擊下載本文 文檔為doc格式

導讀vue中使用mxgraph的方法實例代碼詳解:1、npm 引入 npm install mxgraph --save 2、這個模塊可以使用require()方法進行加載。它將返回一個接受對象作為選項的工廠函數。必須將mxBasePath選項提供給工廠函數，而不是將其定義為一個全局變量。 var mxgraph = require(m

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的方法實例代碼詳解，希望對大家有所幫助，如果大家有任何疑問歡迎給我留言，小編會及時回復大家的！

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com