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 相关文章推荐
javascript时间函数基础介绍
Mar 28 Javascript
谈谈JavaScript中的函数与闭包
Apr 14 Javascript
页面js遇到乱码问题的解决方法是和无法转码的情况
Apr 30 Javascript
JS实现两表格里数据来回转移的方法
May 28 Javascript
纯javascript制作日历控件
Jul 17 Javascript
JavaScript实现自动切换图片代码
Oct 11 Javascript
微信小程序开发(一) 微信登录流程详解
Jan 11 Javascript
微信小程序中子页面向父页面传值实例详解
Mar 20 Javascript
详解ES6中的 Set Map 数据结构学习总结
Nov 06 Javascript
基于JS实现一个随机生成验证码功能
May 29 Javascript
maptalks+three.js+vue webpack实现二维地图上贴三维模型操作
Aug 10 Javascript
解决vue项目,npm run build后,报路径错的问题
Aug 13 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恢复数组的key为数字序列的方法
2015/04/28 PHP
Joomla实现组件中弹出一个模式(modal)窗口的方法
2016/05/04 PHP
PHP开发的微信现金红包功能示例
2017/06/29 PHP
yii 框架实现按天,月,年,自定义时间段统计数据的方法分析
2020/04/04 PHP
a标签的css样式四个状态
2021/03/09 HTML / CSS
HTML TO JavaScript 转换
2006/06/26 Javascript
Prototype使用指南之enumerable.js
2007/01/10 Javascript
Wordpress ThickBox 添加“查看原图”效果代码
2010/12/11 Javascript
模拟一个类似百度google的模糊搜索下拉列表
2014/04/15 Javascript
jQuery实现防止提交按钮被双击的方法
2015/03/24 Javascript
浅谈js的html元素的父节点,子节点
2016/08/06 Javascript
微信小程序 免费SSL证书https、TLS版本问题的解决办法
2016/12/14 Javascript
纯js三维数组实现三级联动效果
2017/02/07 Javascript
vue 详情跳转至列表页实现列表页缓存
2019/03/27 Javascript
详解vue 组件注册
2020/11/20 Vue.js
Python中pygame安装方法图文详解
2015/11/11 Python
Linux 下 Python 实现按任意键退出的实现方法
2016/09/25 Python
Django中在xadmin中集成DjangoUeditor过程详解
2019/07/24 Python
Django 实现外键去除自动添加的后缀‘_id’
2019/11/15 Python
python使用梯度下降和牛顿法寻找Rosenbrock函数最小值实例
2020/04/02 Python
python软件都是免费的吗
2020/06/18 Python
自学python用什么系统好
2020/06/23 Python
Python 解析xml文件的示例
2020/09/29 Python
HTML5 虚拟键盘出现挡住输入框的解决办法
2017/02/14 HTML / CSS
特步官方商城:Xtep
2017/03/21 全球购物
加拿大休闲和工业服装和鞋类零售商:L’Équipeur
2018/01/12 全球购物
巴西最大的在线约会网站:ParPerfeito
2018/07/11 全球购物
英国电气世界:Electrical World
2019/09/08 全球购物
2014年消防工作实施方案
2014/02/20 职场文书
学习十八大报告感言
2014/02/28 职场文书
学员自我鉴定
2014/03/19 职场文书
小学教师寄语大全
2014/04/03 职场文书
课前三分钟演讲稿
2014/04/24 职场文书
项目建议书模板
2014/05/12 职场文书
营业用房租赁协议书
2014/11/26 职场文书
春晚观后感
2015/06/11 职场文书