项目使用 Vue2.0 + Element-ui 框架,在开发流程功能时自定义节点,为实现稍复杂的样式以及操作交互,使用 markup + attrs的方式的话,比较麻烦,且难以结合使用 Element-ui的交互组件,因此换成结合 Vue组件渲染方式注册自定义节点
(官方文档相对简单了点,老报错,搞了老半天,嘤嘤嘤)

安装依赖(本文X6版本是 v1.32.8)

npm install @antv/x6 --save
npm install @antv/x6-vue-shape --save
npm install @vue/composition-api --save

各个插件的版本如下:
在这里插入图片描述

流程组件(父组件)

<script>
	import { Graph } from '@antv/x6'
	import { register } from '@antv/x6-vue-shape'
	import FlowNode from './components/FlowNode'
		    
	export default {
		methods: {
			// 注册自定义节点
			registerCustomNode() {
				register({
				  shape: 'flow-node',
				  width: 200,
				  height: 200,
				  component: {
				  	// 使用 render函数来创建组件
				    render: h => h(FlowNode, {
				      on: {
				      	// 监听 FlowNode组件触发的事件,获取传递出来的数据
				        myEvent: (data) => {
				          this.handleMyEvent(data)
				        }
				      }
				    })
				  }
				})
			},
			handleMyEvent(data) {
				...
			}
		}
	}
</script>

节点组件(子组件)

/* FlowNode组件 */
<script>	    
	export default {
		name: 'FlowNode',
		// 在节点组件中通过 inject 配置来获取 node 和 graph
  		inject: ['getNode'],
  		data () {
		    return {
		      curNode: null,
		      nodeData: null
		    }
	  	},
	  	mounted () {
		    this.curNode = this.getNode()
		    this.nodeData = this.curNode?.data ?? {}
		    // 外部更新节点数据时,可监听 data的 change事件来获取
		    /* this.curNode.on('change:data', ({ current }) => {
		      this.nodeData = current.data
		    }) */
		  },
		methods: {
			onMyEvent(node) {
				// 节点组件中触发事件,传递数据
				this.$emit('myEvent', 'data from FlowNode')
			}
		}
	}
</script>

数据交互

以上是我自己想办法写的一种数据交互方式,相当于是【节点组件】通过 inject'change:data'的方式获取【流程组件】中赋予节点的数据,通过 $emit 将数据传递给【流程组件】,【流程组件】在注册节点的时候使用 render函数来创建组件,并监听【节点组件】中的事件。
(还有其他数据交互的方式,比如通过 Vuex,根据实际情况可以尝试。)

Logo

前往低代码交流专区

更多推荐