vue中引入mxGraph的步骤详解


Posted in Javascript onMay 17, 2019

第一步:下载npm包

npm install mxgraph --save

第二步:新建一个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;

这个是官方引入的方法。它将返回一个接受对象作为选析那个的工厂函数。必须将mxBasePath选项提供给工厂函数,而不是将其定义为一个全局变量。

在vue使用时方法的指向会发生变化,所以将其挂载到window上。

第三步:在index.vue或其他文件中引入

import mxgraph from 'index.js';
const {mxGraph, mxClient, mxCodec, mxUtils, mxConstants, mxPerimeter} = mxgraph;

总结

以上所述是小编给大家介绍的vue中引入mxGraph的步骤详解,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

Javascript 相关文章推荐
JavaScript 入门基础知识 想学习js的朋友可以参考下
Dec 26 Javascript
javascript 进阶篇3 Ajax 、JSON、 Prototype介绍
Mar 14 Javascript
javascript计算星座属相(十二生肖属相)示例代码
Jan 09 Javascript
JavaScript strike方法入门实例(给字符串加上删除线)
Oct 17 Javascript
JS onkeypress兼容性写法详解
Apr 27 Javascript
js实现浏览器倒计时跳转页面效果
Aug 12 Javascript
jQuery时间日期三级联动(推荐)
Nov 27 Javascript
JavaScript实现父子dom同时绑定两个点击事件,一个用捕获,一个用冒泡时执行顺序的方法
Mar 30 Javascript
编写React组件项目实践分析
Mar 04 Javascript
vue 监听屏幕高度的实例
Sep 05 Javascript
.netcore+vue 实现压缩文件下载功能
Sep 24 Javascript
如何手写一个简易的 Vuex
Oct 10 Javascript
微信小程序云开发 搭建一个管理小程序
May 17 #Javascript
微信小程序云开发实现增删改查功能
May 17 #Javascript
微信小程序云开发实现云数据库读写权限
May 17 #Javascript
ES6中的class是如何实现的(附Babel编译的ES5代码详解)
May 17 #Javascript
微信小程序云开发实现数据添加、查询和分页
May 17 #Javascript
js常用正则表达式集锦
May 17 #Javascript
Angular请求防抖处理第一次请求失效问题
May 17 #Javascript
You might like
在wamp集成环境下升级php版本(实现方法)
2013/07/01 PHP
完善CodeIgniter在IDE中代码提示功能的方法
2014/07/19 PHP
php实现mysql事务处理的方法
2014/12/25 PHP
PHP中list()函数用法实例简析
2016/01/08 PHP
ECshop 迁移到 PHP7版本时遇到的兼容性问题
2016/02/15 PHP
php版微信发红包接口用法示例
2016/09/23 PHP
PHP http请求超时问题解决方案
2020/11/13 PHP
ASP中Sub和Function的区别说明
2020/08/30 Javascript
各情景下元素宽高的获取实现代码
2011/09/13 Javascript
js实现单一html页面两套css切换代码
2013/04/11 Javascript
通过JQuery实现win8一样酷炫的动态磁贴效果(示例代码)
2013/07/13 Javascript
纯js实现重发验证码按钮倒数功能
2015/04/21 Javascript
JQuery中DOM事件冒泡实例分析
2015/06/13 Javascript
Nodejs学习item【入门手上】
2016/05/05 NodeJs
jquery点击切换背景色的简单实例
2016/08/25 Javascript
vue实现ajax滚动下拉加载,同时具有loading效果(推荐)
2017/01/11 Javascript
基于JavaScript实现多级菜单效果
2017/07/25 Javascript
react-native使用react-navigation进行页面跳转导航的示例
2017/09/07 Javascript
基于vue-cli创建的项目的目录结构及说明介绍
2017/11/23 Javascript
Vue2.0 实现移动端图片上传功能
2018/05/30 Javascript
uni-app 自定义底部导航栏的实现
2020/12/11 Javascript
python求斐波那契数列示例分享
2014/02/14 Python
wxpython实现图书管理系统
2018/03/12 Python
Python将一个Excel拆分为多个Excel
2018/11/07 Python
在Qt5和PyQt5中设置支持高分辨率屏幕自适应的方法
2019/06/18 Python
使用python实现滑动验证码功能
2019/08/05 Python
瑞士领先的网上超市:LeShop.ch
2018/11/14 全球购物
应届生求职信写作技巧
2013/10/24 职场文书
最新大学生创业计划书写作攻略
2014/04/02 职场文书
给上级领导的感谢信
2015/01/22 职场文书
财政局个人年终总结
2015/03/03 职场文书
初中数学课堂教学反思
2016/02/17 职场文书
Python中OpenCV实现查找轮廓的实例
2021/06/08 Python
如何使用分区处理MySQL的亿级数据优化
2021/06/18 MySQL
SQLServer权限之只开启创建表权限
2022/04/12 SQL Server
Shell中的单中括号和双中括号的用法详解
2022/12/24 Servers