vue中引入mxGraph的步驟詳解
更新時(shí)間：2019年05月17日 16:01:45 作者：302wanger
本文分步驟給大家介紹了vue中引入mxGraph的方法，非常不錯，給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
第一步：下載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è)接受對象作為選析那個(gè)的工廠函數(shù)。必須將mxBasePath選項(xiàng)提供給工廠函數(shù)，而不是將其定義為一個(gè)全局變量。
在vue使用時(shí)方法的指向會發(fā)生變化，所以將其掛載到window上。
第三步：在index.vue或其他文件中引入
import mxgraph from 'index.js';
const {mxGraph, mxClient, mxCodec, mxUtils, mxConstants, mxPerimeter} = mxgraph;
總結(jié)
以上所述是小編給大家介紹的vue中引入mxGraph的步驟詳解，希望對大家有所幫助，如果大家有任何疑問歡迎給我留言，小編會及時(shí)回復(fù)大家的！
您可能感興趣的文章:
相關(guān)文章
vue3+vite 動態(tài)引用靜態(tài)資源及動態(tài)引入assets文件夾圖片的多種方式
通過require動態(tài)引入, 發(fā)現(xiàn)報(bào)錯：require is not defind,這是因?yàn)?nbsp;require 是屬于 Webpack 的方法,本文給大家介紹vue3+vite 動態(tài)引用靜態(tài)資源及動態(tài)引入assets文件夾圖片的多種方式,感興趣的朋友一起看看吧2023-10-10
vue改變循環(huán)遍歷后的數(shù)據(jù)實(shí)例
今天小編就為大家分享一篇vue改變循環(huán)遍歷后的數(shù)據(jù)實(shí)例，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11
組件 (Component) 是 Vue.js 最強(qiáng)大的功能之一。組件可以擴(kuò)展 HTML 元素，封裝可重用的代碼。這篇文章主要介紹了vue組件與復(fù)用,需要的朋友可以參考下2018-04-04
key屬性是一個(gè)特殊的屬性，用于標(biāo)識每個(gè)節(jié)點(diǎn)的唯一性。在Vue2.x版本中的key和Vue3.x版本中的key有很大的不同，那么在這篇文章中，我們將會討論Vue2中的key和Vue3中的key的區(qū)別2023-04-04
react在中后臺項(xiàng)目中由于在處理復(fù)雜的業(yè)務(wù)邏輯或組件的復(fù)用問題比vue優(yōu)雅而被人認(rèn)可，但也更需要團(tuán)隊(duì)技術(shù)整體比較給力，領(lǐng)頭大佬的設(shè)計(jì)與把關(guān)能力要更優(yōu)秀，因此開發(fā)成本更大，下面文章就來詳細(xì)介紹,需要的朋友可以參考下2021-09-09
Vue.js的Mixins功能允許封裝可復(fù)用的組件選項(xiàng),實(shí)現(xiàn)代碼復(fù)用和模塊化,Mixins可以包含數(shù)據(jù)、方法、生命周期鉤子等組件選項(xiàng),使用時(shí),Mixins中的選項(xiàng)會被混入組件中,優(yōu)先級低于組件自身選項(xiàng),優(yōu)點(diǎn)包括代碼復(fù)用、高靈活性和簡單易用2024-09-09
Vue Object.defineProperty及ProxyVue實(shí)現(xiàn)雙向數(shù)據(jù)綁定
這篇文章主要介紹了Vue Object.defineProperty及ProxyVue實(shí)現(xiàn)雙向數(shù)據(jù)綁定,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-09-09
vue中前進(jìn)刷新、后退緩存用戶瀏覽數(shù)據(jù)和瀏覽位置的實(shí)例講解
今天小編就為大家分享一篇vue中前進(jìn)刷新、后退緩存用戶瀏覽數(shù)據(jù)和瀏覽位置的實(shí)例講解，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
Vue?vant使用ImagePreview實(shí)現(xiàn)預(yù)覽圖片
這篇文章主要介紹了Vue?vant使用ImagePreview實(shí)現(xiàn)預(yù)覽圖片，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
這篇文章主要介紹了Vue Element UI使用中遇到的問題，對ElementUI感興趣的同學(xué)，可以參考下2021-05-05