vue中引入mxGraph_vue3.0 ts引入mxgraph-程序员宅基地

第一步:下载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;

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/sinat_32720011/article/details/90294427

智能推荐

深度学习基础--正则化与norm--L2归一化、L2正则化、L2范数的区别_norm_l2-程序员宅基地

文章浏览阅读2.9k次。L2归一化、L2正则化、L2范数的区别  1)归一化是将数据变到一定的区间内,故是x除以||x||_2。  2)正则化是在优化时所使用的概念,称为正则化方法,而不是指某种具体的数据运算,概念比归一化要高一层。  3)L2范数指的是公式意义上的||x||_2。..._norm_l2

【杂七杂八】excel中根据RTL信号位宽生成拼接取位_rtl语法 位宽拼接-程序员宅基地

文章浏览阅读398次。前言作为一个不务正业的芯片前端,总会遇到掉奇奇怪怪的需求,就比如题目这个啊,我写完之后就觉得非常的拗口。那么具体的需要是啥呢?就是比如说有了下面这个excel表:信号名 width sig0 3 sig1 10 sig2 14 sig3 20 sig4 8 要直接做一列生成前面几个信号在整体信号中的取位信息,简单来说就是这样:信号名 width local sig0 3 [2:0] sig1 10_rtl语法 位宽拼接

go WaitGroup的坑-程序员宅基地

文章浏览阅读2.3k次。go WaitGroup的使用请参考笔者的另外一篇博客go WaitGroup的使用示例这里重点讲一下WaitGroup的注意点,以免被坑示例代码如下:package mainimport ( "log" "sync")func main() { wg := sync.WaitGroup{} for i := 0; i < 5; i++ { wg.Add(..._waitgroup的坑

升级libc.so.6和libstdc++.so.6方法_deepin 升级libstdc++6-程序员宅基地

文章浏览阅读8.2k次。解决"libc.so.6: version `GLIBC_2.14' not found"问题转载自https://www.cnblogs.com/Mrhuangrui/p/7766554.html试图运行程序,提示"libc.so.6: version `GLIBC_2.14' not found",原因是系统的glibc版本太低,软件编译时使用了较高版本的glibc引起的:问题Ce..._deepin 升级libstdc++6

快速学习STL-程序员宅基地

文章浏览阅读386次。STL概述STL的一个重要特点是数据结构和算法的分离。尽管这是个简单的概念,但这种分离确实使得STL变得非常通用。例如,由于STL的sort()函数是完全通用的,你可以用它来操作几乎任何数据集合,包括链表,容器和数组。要点STL算法作为模板函数提供。为了和其他组件相区别,在本书中STL算法以后接一对圆括弧的方式表示,例如sort()。STL另一个重要特性是它不是面向_学习stl

React-基础语法学习-程序员宅基地

文章浏览阅读1.0k次,点赞21次,收藏29次。1、教程:井字棋游戏1、教程:井字棋游戏本教程将引导你逐步实现一个简单的井字棋游戏,并且不需要你对 React 有任何了解。在此过程中你会学习到一些编写 React 程序的基本知识,完全理解它们可以让你对 React 有比较深入的理解。1.1、教程分成以下几个部分:配置是一些准备工作。概览介绍了 React 的:组件、props 和 state。完成游戏介绍了 React 开发中。添加时间旅行可以让你更深入地了解 React 的独特优势。1.2、实现的是什么程序?

随便推点

YOLOV3只检测人_yolo v3检测人体-程序员宅基地

文章浏览阅读3.2k次。https://www.cnblogs.com/tenderwx/p/7278447.html最后输入:./darknet detect cfg/yolov3.cfg yolov3.weights ./data/person.jpg/home/qinhaidong/darknet/predictions.jpg_yolo v3检测人体

java - 注解实现分布式锁_java使用注解实现redisson分布式锁-程序员宅基地

文章浏览阅读730次,点赞31次,收藏15次。分布式锁是分布式环境中解决资源共享问题的一种机制。在一个分布式系统中,有时多个进程,可能会同时访问同一份资源,例如,读写同一个数据库记录,或者获取和修改同一个文件。为了避免并发访问引起的数据不一致问题,我们需要用到分布式锁。一次只有一个进程能够获得锁,进而保证有序地、原子性地操作资源。_java使用注解实现redisson分布式锁

计算机三级网络技术知识点大全(九)_知识点三级-程序员宅基地

文章浏览阅读6.2k次,点赞3次,收藏22次。网络安全技术1、 网络安全的基本要素主要包括:保密性、完整性、可用性、可鉴别性和不可否认性。2、 信息泄露与篡改:截获信息、窃听信息、篡改信息和伪造信息。3、 在Internet中对网络的攻击可以分为2种基本类型,即服务攻击(造成拒绝服务Dos,典型的是SYN)与非服务攻击(对网络层等底层协议进行攻击)。4、 信息的安全传输包括两个基本部分:(1)对发送的信息进行安全转换(如信息加密),实现信息的保密性。或者附加一些特征信息,以便进行发送方身份验证。(2)发送和接收双方共享的.._知识点三级

已解决java.util.concurrent.CompletionException异常的正确解决方法,亲测有效!!!-程序员宅基地

文章浏览阅读3k次,点赞23次,收藏27次。已解决java.util.concurrent.CompletionException异常的正确解决方法,亲测有效!!!_completionexception

Android ConstraintLayout 约束布局 1-程序员宅基地

文章浏览阅读987次,点赞8次,收藏24次。对于程序员来说,要学习的知识内容、技术有太多太多,要想不被环境淘汰就只有不断提升自己,从来都是我们去适应环境,而不是环境来适应我们!最后,我再重复一次,如果你想成为一个优秀的 Android 开发人员,请集中精力,对基础和重要的事情做深度研究。对于很多初中级Android工程师而言,想要提升技能,往往是自己摸索成长,不成体系的学习效果低效漫长且无助。整理的这些架构技术希望对Android开发的朋友们有所参考以及少走弯路,本文的重点是你有没有收获与成长,其余的都不重要,希望读者们能谨记这一点。

电机控制算法FOC-研究英飞凌AP32013i_Inverter_TC27xC_1_22心得(一)-程序员宅基地

文章浏览阅读7.6k次,点赞8次,收藏119次。本文参照英飞凌AP32013i_Inverter_TC27xC_1_22相关的文档,研究FOC算法的原理,模块组成和调试过程。_电机控制算法

推荐文章

热门文章

相关标签