這篇文章主要介紹了vue中怎么使用mxgraph的方法，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

為巴東等地區(qū)用戶提供了全套網(wǎng)頁設(shè)計制作服務(wù)，及巴東網(wǎng)站建設(shè)行業(yè)解決方案。主營業(yè)務(wù)為網(wǎng)站設(shè)計、成都做網(wǎng)站、巴東網(wǎng)站設(shè)計，以傳統(tǒng)方式定制建設(shè)網(wǎng)站，并提供域名空間備案等一條龍服務(wù)，秉承以專業(yè)、用心的態(tài)度為用戶提供真誠的服務(wù)。我們深信只要達到每一位用戶的要求，就會得到認可，從而選擇與我們長期合作。這樣，我們也可以走得更遠！vue是什么

Vue是一套用于構(gòu)建用戶界面的漸進式JavaScript框架，Vue與其它大型框架的區(qū)別是，使用Vue可以自底向上逐層應(yīng)用，其核心庫只關(guān)注視圖層，方便與第三方庫和項目整合，且使用Vue可以采用單文件組件和Vue生態(tài)系統(tǒng)支持的庫開發(fā)復(fù)雜的單頁應(yīng)用。

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結(jié)合使用的時候，方法的指向會發(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/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 {
        // 再容器中創(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的方法”這篇文章對大家有幫助，同時也希望大家多多支持創(chuàng)新互聯(lián)，關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，更多相關(guān)知識等著你來學(xué)習(xí)!

標題名稱：vue中怎么使用mxgraph的方法-創(chuàng)新互聯(lián)
鏈接地址：http://weahome.cn/article/cogicp.html