mxGraph整合vue入门和el-tree拖拽功能样例

前言

mxGraph官方的示例中使用的拖拽组件都是从js中获取的固定变量,而实际应用时会出现数据库加载组件的情况,这时就需要将mxGraph的拖拽等其他功能进行提取,与Vue整合,环境:
mxGraph 4.2.2
vue 2.6

npm依赖引入mxGraph

// package.json
"dependencies":{
   
   
	"mxgraph": "^4.2.2",
	// ....其他依赖
}

引入方式

官方demo使用的是html script标签引入

	<script type="text/javascript">
		mxBasePath = `在这里插入代码片`'../src';
	</script>

	<!-- Loads and initializes the library -->
	<script type="text/javascript" src="../src/js/mxClient.js"></script>

这里要注意,vue项目通过npm引入的mxgraph依赖就不同了,这里的mxgraph是模块化导入,你可以通过

import mx from 'mxgraph'
const mxgraph = mx({
   
   
	mxBasePath: '/mxgraph',
	mxImageBasePath: '/mxgraph/images'
})

这里的mx不是固定的,随便叫什么都行,表示你用mx这个别名接收了来自mxgraph中的功能,mxgraph中的build.js是这样的:

(function (root, factory) {
   
   
if (typeof define === 'function' && define.amd) {
   
   
define([], factory);
} else if (typeof module === 'object' && module.exports) {
   
   
module.exports = factory();
} else {
   
   
root.mxgraph = factory();
}
}(this, function () {
   
   
	return function (){
   
   
		// .....mxgraph的定义
	}
}

所以你只是给这个闭包的返回值起名,你完全可以写作:

import loveJav from 'mxgraph'