DDR爱好者之家 Design By 杰米
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的方法实例代码详解,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!
DDR爱好者之家 Design By 杰米
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
DDR爱好者之家 Design By 杰米
暂无评论...
RTX 5090要首发 性能要翻倍!三星展示GDDR7显存
三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。
首次推出的GDDR7内存模块密度为16GB,每个模块容量为2GB。其速度预设为32 Gbps(PAM3),但也可以降至28 Gbps,以提高产量和初始阶段的整体性能和成本效益。
据三星表示,GDDR7内存的能效将提高20%,同时工作电压仅为1.1V,低于标准的1.2V。通过采用更新的封装材料和优化的电路设计,使得在高速运行时的发热量降低,GDDR7的热阻比GDDR6降低了70%。
更新日志
2024年06月22日
2024年06月22日
- 《华语流行:孟庭苇 34CD 全球最全最佳版》[WAV+CUE][500MB]
- 瑞鸣音乐《中国音乐地图之听见新疆-塔吉克族民间乐曲集》2020[WAV分轨]
- 【绝版珍品】吴楚楚潘越云李丽芬《三人展》滚石创业第一号作品[WAV+CUE]
- 群星《2024好听新歌08》十倍音质WAV分轨
- 英雄联盟腕豪上路最新出装
- 塔瑞斯世界牧师铭石如何选择 牧师铭石选择推荐
- 瑞鸣音乐-中国音乐地图之听见广东潮州锣鼓2021[WAV分轨]
- 【瑞鸣音乐】中国音乐地图之听见国乐古筝音乐集2020[WAV分轨]
- 【瑞鸣音乐】中国音乐地图之听见国乐唢呐管子音乐集2021[WAV分轨]
- 群星 天王天后精湛技艺《现代经典合唱精选 2CD》[WAV+CUE][990MB]
- 《宝丽金绝佳经典2CD 情怀老歌》[WAV+CUE][1GB]
- 苏芮 16首经典代表作《牵手精选 AQCD》[WAV+CUE][520MB]
- 塔瑞斯世界开服兑换码大全 塔瑞斯世界公测礼包码
- 塔瑞斯世界兑换码在哪兑换 塔瑞斯世界礼包码兑换方法分享
- 塔瑞斯世界职业推荐 塔瑞斯世界玩什么职业好