13518219792
这篇文章主要介绍了vue中怎么使用mxgraph的方法，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。
创新互联公司长期为1000+客户提供的网站建设服务，团队从业经验10年，关注不同地域、不同群体，并针对不同对象提供差异化的产品和服务；打造开放共赢平台，与合作伙伴共同营造健康的互联网生态环境。为汝南企业提供专业的成都网站设计、网站制作，汝南网站改版等技术服务。拥有10年丰富建站经验和众多成功案例,为您定制开发。
Vue是一套用于构建用户界面的渐进式JavaScript框架，Vue与其它大型框架的区别是，使用Vue可以自底向上逐层应用，其核心库只关注视图层，方便与第三方库和项目整合，且使用Vue可以采用单文件组件和Vue生态系统支持的库开发复杂的单页应用。
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的方法”这篇文章对大家有帮助，同时也希望大家多多支持创新互联，关注创新互联行业资讯频道，更多相关知识等着你来学习!
