vue中引入mxGraph的步驟詳解

發(fā)布時(shí)間：2020-09-12 10:30:45 來(lái)源：腳本之家閱讀：241 作者：302wanger 欄目：web開(kāi)發(fā)

第一步：下載npm包

npm install mxgraph --save

第二步：新建一個(gè)index.js文件

文件內(nèi)容如下

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;

這個(gè)是官方引入的方法。它將返回一個(gè)接受對(duì)象作為選析那個(gè)的工廠函數(shù)。必須將mxBasePath選項(xiàng)提供給工廠函數(shù)，而不是將其定義為一個(gè)全局變量。

在vue使用時(shí)方法的指向會(huì)發(fā)生變化，所以將其掛載到window上。

第三步：在index.vue或其他文件中引入

import mxgraph from 'index.js';
const {mxGraph, mxClient, mxCodec, mxUtils, mxConstants, mxPerimeter} = mxgraph;

總結(jié)

以上所述是小編給大家介紹的vue中引入mxGraph的步驟詳解，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)歡迎給我留言，小編會(huì)及時(shí)回復(fù)大家的！

向AI問(wèn)一下細(xì)節(jié)

vue中引入mxGraph的步驟詳解

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽