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


Posted in Javascript onMay 17, 2019

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的方法实例代码详解,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

Javascript 相关文章推荐
屏蔽F1~F12的快捷键的js函数
May 06 Javascript
jquery提升性能最佳实践小结
Dec 06 Javascript
自己编写的类似JS的trim方法
Oct 09 Javascript
js 转json格式的字符串为对象或数组(前后台)的方法
Nov 02 Javascript
基于vue的换肤功能的示例代码
Oct 10 Javascript
node 利用进程通信实现Cluster共享内存
Oct 27 Javascript
node.js+express+mySQL+ejs+bootstrop实现网站登录注册功能
Jan 12 Javascript
Angular4学习笔记router的简单使用
Mar 30 Javascript
Vue入门之animate过渡动画效果
Apr 08 Javascript
原生js实现可兼容PC和移动端的拖动滑块功能详解【测试可用】
Aug 15 Javascript
vue 使用高德地图vue-amap组件过程解析
Sep 07 Javascript
使用konva和vue-konva库实现拖拽滑块验证功能
Apr 27 Javascript
vue中引入mxGraph的步骤详解
May 17 #Javascript
微信小程序云开发 搭建一个管理小程序
May 17 #Javascript
微信小程序云开发实现增删改查功能
May 17 #Javascript
微信小程序云开发实现云数据库读写权限
May 17 #Javascript
ES6中的class是如何实现的(附Babel编译的ES5代码详解)
May 17 #Javascript
微信小程序云开发实现数据添加、查询和分页
May 17 #Javascript
js常用正则表达式集锦
May 17 #Javascript
You might like
《PHP编程最快明白》第八讲:php启发和小结
2010/11/01 PHP
mod_php、FastCGI、PHP-FPM等PHP运行方式对比
2015/07/02 PHP
PHP实现微信支付(jsapi支付)流程步骤详解
2018/03/15 PHP
php layui实现前端多图上传实例
2019/07/30 PHP
php中对象引用和复制实例分析
2019/08/14 PHP
laravel unique验证、确认密码confirmed验证以及密码修改验证的方法
2019/10/16 PHP
你真的了解JavaScript吗?
2007/02/24 Javascript
学习YUI.Ext 第六天--关于树TreePanel(Part 2异步获取节点)
2007/03/10 Javascript
jQuery入门知识简介
2010/03/04 Javascript
javascrpt绑定事件之匿名函数无法解除绑定问题
2012/12/06 Javascript
JavaScript中创建对象和继承示例解读
2014/02/12 Javascript
JavaScript编写连连看小游戏
2015/07/07 Javascript
jquery实现右侧栏菜单选择操作
2016/03/04 Javascript
浅谈React 属性和状态的一些总结
2016/11/21 Javascript
jQuery设置和获取select、checkbox、radio的选中值方法
2017/01/01 Javascript
Vue中自定义全局组件的实现方法
2017/12/08 Javascript
jquery点击回车键实现登录效果并默认焦点的方法
2018/03/09 jQuery
node puppeteer(headless chrome)实现网站登录
2018/05/09 Javascript
对node.js中render和send的用法详解
2018/05/14 Javascript
jQuery 筛选器简单操作示例
2019/10/02 jQuery
浅析python递归函数和河内塔问题
2017/04/18 Python
解决python中用matplotlib画多幅图时出现图形部分重叠的问题
2019/07/07 Python
python 模拟创建seafile 目录操作示例
2019/09/26 Python
wxPython窗体拆分布局基础组件
2019/11/19 Python
使用PyOpenGL绘制三维坐标系实例
2019/12/24 Python
windows下python 3.9 Numpy scipy和matlabplot的安装教程详解
2020/11/28 Python
CSS类名支持中文命名的示例
2014/04/04 HTML / CSS
使用HTML5捕捉音频与视频信息概述及实例
2018/08/22 HTML / CSS
教师个人的自我评价分享
2014/01/02 职场文书
学历公证委托书
2014/04/09 职场文书
国旗下的演讲稿
2014/05/08 职场文书
工作求职信
2014/07/04 职场文书
2014年城管工作总结
2014/11/20 职场文书
升职自我推荐信范文
2015/03/25 职场文书
离职员工给领导和同事的感谢信
2015/11/03 职场文书
MySQL Server层四个日志的实现
2022/03/31 MySQL