美文网首页
vue引入mxGrpah

vue引入mxGrpah

作者: 本一和他的朋友们 | 来源:发表于2019-05-17 15:43 被阅读0次

    第一步:下载npm包

    npm install mxgraph --save
    

    第二步:新建一个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;
    
    

    这个是官方引入的方法。它将返回一个接受对象作为选析那个的工厂函数。必须将mxBasePath选项提供给工厂函数,而不是将其定义为一个全局变量。
    在vue使用时方法的指向会发生变化,所以将其挂载到window上。

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

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

    相关文章

      网友评论

          本文标题:vue引入mxGrpah

          本文链接:https://www.haomeiwen.com/subject/zvjoaqtx.html