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 相关文章推荐
基于jQuery的动态表格插件
Mar 28 Javascript
关于JavaScript中的关联数组分析
Apr 09 Javascript
对frameset、frame、iframe的js操作示例代码
Aug 16 Javascript
jquery操作下拉列表、文本框、复选框、单选框集合(收藏)
Jan 08 Javascript
Javascript中的方法链(Method Chaining)介绍
Mar 15 Javascript
全面解析JavaScript的Backbone.js框架中的Router路由
May 05 Javascript
jquery仿苹果的时间/日期选择效果
Mar 08 Javascript
vue-for循环嵌套操作示例
Jan 28 Javascript
浅析vue中的MVVM实现原理
Mar 04 Javascript
详解Vue template 如何支持多个根结点
Feb 10 Javascript
JS实现滑动拼图验证功能完整示例
Mar 29 Javascript
javascript实现前端分页功能
Nov 26 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
PHP用身份证号获取星座和生肖的方法
2013/11/07 PHP
PHP字符串中特殊符号的过滤方法介绍
2014/02/18 PHP
PHP调用VC编写的COM组件实例
2014/03/29 PHP
删除html标签得到纯文本可处理嵌套的标签
2014/04/28 PHP
php中mkdir函数用法实例分析
2014/11/15 PHP
PHP aes (ecb)解密后乱码问题
2015/06/22 PHP
ThinkPHP控制器详解
2015/07/27 PHP
PDO::exec讲解
2019/01/28 PHP
jquery实用代码片段集合
2010/08/12 Javascript
MultiSelect左右选择控件的设计与实现介绍
2013/06/08 Javascript
关于javascript event flow 的一个bug详解
2013/09/17 Javascript
js使用栈来实现10进制转8进制与取除数及余数
2014/06/11 Javascript
jQuery+css实现非常漂亮的水平导航菜单效果
2016/07/27 Javascript
js利用appendChild对标签进行排序的实现方法
2016/10/16 Javascript
整理关于Bootstrap排版的慕课笔记
2017/03/29 Javascript
禁止弹窗中蒙层底部页面跟随滚动的几种方法
2017/12/07 Javascript
node实现简单的增删改查接口实例代码
2019/08/22 Javascript
JS实现无限轮播无倒退效果
2020/09/21 Javascript
pandas全表查询定位某个值所在行列的方法
2018/04/12 Python
在python里从协程返回一个值的示例
2019/02/19 Python
Python 剪绳子的多种思路实现(动态规划和贪心)
2020/02/24 Python
Python grpc超时机制代码示例
2020/09/14 Python
台湾租车首选品牌:IWS艾维士租车
2019/05/03 全球购物
班主任寄语大全
2014/04/04 职场文书
地球一小时倡议书
2014/04/15 职场文书
精彩的演讲稿开头
2014/05/08 职场文书
乔丹名人堂演讲稿
2014/05/24 职场文书
材料专业大学毕业生自荐书
2014/07/02 职场文书
财政专业大学生职业生涯规划书
2014/09/17 职场文书
机票销售员态度不好检讨书
2014/09/27 职场文书
2014红色之旅心得体会
2014/10/07 职场文书
2014年高二班主任工作总结
2014/12/16 职场文书
交通事故协议书范本
2016/03/19 职场文书
2016年中学端午节主题活动总结
2016/04/01 职场文书
Python requests库参数提交的注意事项总结
2021/03/29 Python
Python基础之条件语句详解
2021/06/16 Python