欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

vue中使用mxgraph的方法实例代码详解

程序员文章站 2023-12-15 11:45:16
1、npm 引入 npm install mxgraph --save 2、这个模块可以使用require()方法进行加载。它将返回一个接受对象作为选项的工厂函数。必须...

1、npm 引入

npm install mxgraph --save

2、这个模块可以使用require()方法进行加载。它将返回一个接受对象作为选项的工厂函数。必须将mxbasepath选项提供给工厂函数,而不是将其定义为一个全局变量。

var mxgraph = require("mxgraph")(
{ // 以下地址不需要修改
mximagebasepath: "./src/images", 
mxbasepath: "./src"
})

工厂函数返回一个“命名空间对象”,通过它可以访问mxgraph包的所有对象。例如,mxevent对象在mxgraph.mxevent中可用。

var mxevent = mxgraph.mxevent;
mxevent.disablecontextmenu(container);

这个引入是官方提供的方式,但是与vue结合使用的时候,方法的指向会发生变化,所以做了以下修改

避免方法的指向发生变化,将其挂载到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 {
        // 再容器中创建图表
        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参数中
        this.getxml = mxutils.getxml(xx);
      }
    }

总结

以上所述是小编给大家介绍的vue中使用mxgraph的方法实例代码详解,希望对大家有所帮助

上一篇:

下一篇: