vue中引入mxGraph的步驟詳解
第一步:下載npm包
npm install mxgraph --save
第二步:新建一個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;
這個是官方引入的方法。它將返回一個接受對象作為選析那個的工廠函數(shù)。必須將mxBasePath選項提供給工廠函數(shù),而不是將其定義為一個全局變量。
在vue使用時方法的指向會發(fā)生變化,所以將其掛載到window上。
第三步:在index.vue或其他文件中引入
import mxgraph from 'index.js'; const {mxGraph, mxClient, mxCodec, mxUtils, mxConstants, mxPerimeter} = mxgraph;
總結(jié)
以上所述是小編給大家介紹的vue中引入mxGraph的步驟詳解,希望對大家有所幫助,如果大家有任何疑問歡迎給我留言,小編會及時回復大家的!
相關(guān)文章
vue+element-plus上傳圖片及回顯問題及數(shù)量限制
本文主要介紹了vue+element-plus上傳圖片及回顯問題及數(shù)量限制,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2023-04-04vue element 關(guān)閉當前tab 跳轉(zhuǎn)到上一路由操作
這篇文章主要介紹了vue element 關(guān)閉當前tab 跳轉(zhuǎn)到上一路由操作,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07vue+uniapp瀑布流布局多種實現(xiàn)方式示例代碼
由于使用uniapp開發(fā)的微信小程序不需要考慮響應(yīng)式,因此瀑布流的實現(xiàn)相對于pc端更為簡單,下面這篇文章主要給大家介紹了關(guān)于vue+uniapp瀑布流布局多種實現(xiàn)方式的相關(guān)資料,需要的朋友可以參考下2023-03-03electron踩坑之remote of undefined的解決
這篇文章主要介紹了electron踩坑之remote of undefined的解決,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2020-10-10Vue中實現(xiàn)表單地區(qū)選擇與級聯(lián)聯(lián)動示例詳解
這篇文章主要為大家介紹了Vue中實現(xiàn)表單地區(qū)選擇與級聯(lián)聯(lián)動示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-09-09vue中el-table前端如何導出excel數(shù)據(jù)表格
這篇文章主要介紹了vue中el-table前端如何導出excel數(shù)據(jù)表格,本文通過實例代碼給大家介紹的非常詳細,需要的朋友可以參考下2024-07-07