在React和Vue中引入mxGraph的例子

时间：2023-03-31 16:16:57 vue.js

本文简单记录了项目中在React和Vue中引入mxGraph。请搜索mxGraph是什么。下面是React中引入的mxGraphmxgraph-typeings涉及的仓库地址下面是引入ES6基本写法的例子：importReact,{useCallback}from'react'import'mxgraph/javascript/src/css/common.css'import'style.css'constmx=require('mxgraph')({mxBasePath:'mxgraph'})const{mxGraph}=mxfunctionApp(){letgraph=nullconstcontainerRef=useCallback(node=>{if(node!=null){initGraph(node)constparent=graph.getDefaultParent()graph.getModel().beginUpdate()try{constv1=graph.insertVertex(parent,null,'vertex1',0,0,80,20)constv2=graph.insertVertex(parent,null,'vertex2',100,0,80,20)graph.insertEdge(parent,null,'',v1,v2)}最后{graph.getModel().endUpdate();}}},[])函数initGraph(container){graph=newmxGraph(container)}return(

)}exportdefaultApp在Vue中引入这是基于Vue+Typescript方法的引入示例：import{Component,Vue,Ref}from'vue-property-decorator'import{mxgraph}from'mxgraph'require('mxgraph/javascript/src/css/common.css')从'./style.scss'导入样式constmx:typeofmxgraph=require('mxgraph')({mxBasePath:'mxgraph'});@ComponentexportdefaultclassWorkflowextendsVue{private图！：mxgraph.mxGraph；私人v1！：mxgraph.mxCell；私有v2！：mxgraph.mxCell；私有边缘！：mxgraph.mxCell；@Ref('containerRef')readonlygraphContainer!:HTMLDivElement;publicmounted(){this.init();}privateinit(){this.graph=newmx.mxGraph(this.graphContainer);mx.mxEvent.disableContextMenu(this.graphContainer);constparent=this.graph.getDefaultParent();this.graph.getModel().beginUpdate();try{this.v1=this.graph.insertVertex(parent,null,'节点1',20,20,80,30);this.v2=this.graph.insertVertex(parent,null,'节点2',20,120,80,30);this.edge=this.graph.insertEdge(parent,null,'',this.v1,this.v2)}最后{this.graph.getModel().endUpdate();}}render(){return(

)}}