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的设计模式
Nov 22 Javascript
js检测客户端不是firefox则提示下载
Apr 07 Javascript
jQuery版仿Path菜单效果
Dec 15 Javascript
jQuery实现判断滚动条到底部
Jun 23 Javascript
javascript css红色经典选项卡效果实现代码
May 17 Javascript
node.js cookie-parser之parser.js
Jun 06 Javascript
jQuery树形插件jquery.simpleTree.js用法分析
Sep 05 Javascript
使用vue-router设置每个页面的title方法
Feb 11 Javascript
element-ui 中的table的列隐藏问题解决
Aug 24 Javascript
vue使用自定义指令实现拖拽
Jan 29 Javascript
vue router 传参获取不到的解决方式
Nov 13 Javascript
Vue+scss白天和夜间模式切换功能的实现方法
Jan 05 Vue.js
微信小程序云开发 搭建一个管理小程序
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
PHP生成Flash动画的实现代码
2010/03/12 PHP
php+javascript实现的动态显示服务器运行程序进度条功能示例
2017/08/07 PHP
thinkPHP5分页功能实现方法分析
2017/10/25 PHP
Thinkphp5框架使用validate实现验证功能的方法
2019/08/27 PHP
JQuery 绑定事件时传递参数的实现方法
2009/10/13 Javascript
jQuery之ajax技术的详细介绍
2013/06/19 Javascript
jquery对dom的操作常用方法整理
2013/06/25 Javascript
JQ获取动态加载的图片大小的正确方法分享
2013/11/08 Javascript
使用js判断数组中是否包含某一元素(类似于php中的in_array())
2013/12/12 Javascript
jquery网页回到顶部效果(图标渐隐,自写)
2014/06/16 Javascript
jquery 设置style:display的方法
2015/01/29 Javascript
javascript关于open.window子页面执行完成后刷新父页面的问题分析
2015/04/27 Javascript
vue实现百度搜索下拉提示功能实例
2017/06/14 Javascript
JavaScript中的FileReader图片预览上传功能实现代码
2017/07/24 Javascript
AngularJS+Bootstrap3多级导航菜单的实现代码
2017/08/16 Javascript
bootstrap日期插件daterangepicker使用详解
2017/10/19 Javascript
nodejs中Express与Koa2对比分析
2018/02/06 NodeJs
使用koa-log4管理nodeJs日志笔记的使用方法
2018/11/30 NodeJs
layui表格设计以及数据初始化详解
2019/10/26 Javascript
vue 项目中当访问路由不存在的时候默认访问404页面操作
2020/08/31 Javascript
[53:49]LGD vs Fnatic 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
深度定制Python的Flask框架开发环境的一些技巧总结
2016/07/12 Python
PyQt5每天必学之关闭窗口
2018/04/19 Python
使用sklearn之LabelEncoder将Label标准化的方法
2018/07/11 Python
Python 3 使用Pillow生成漂亮的分形树图片
2019/12/24 Python
CSS3制作皮卡丘动画壁纸的示例
2020/11/02 HTML / CSS
写一个在SQL Server创建表的SQL语句
2012/03/10 面试题
医学护理毕业生自荐信
2013/11/07 职场文书
营销总经理的岗位职责
2013/12/15 职场文书
小学领导班子对照材料
2014/08/23 职场文书
政风行风评议工作总结
2014/10/21 职场文书
社会实践活动总结格式
2015/05/11 职场文书
新年晚会主持词开场白
2015/05/28 职场文书
Go 实现英尺和米的简单单位换算方式
2021/04/29 Golang
Jackson 反序列化时实现大小写不敏感设置
2021/06/29 Java/Android
Python中如何处理常见报错
2022/01/18 Python