AntV X6使用Vue组件作为渲染节点

1.使用依赖

复制代码
npm install @antv/x6 --save
npm install @antv/x6-vue-shape --save

下述代码使用Vue2技术栈,若使用Vue3则直接参考「AntV」X6 自定义vue节点(vue3) https://www.yuque.com/sxd_panda/antv/vue-node

2.节点组件

要点:

  • 使用inject注入AntV X6父组件中的依赖 getNode
  • 使用this.getNode()可以获取/监听,父组件在节点上配置的数据。
html 复制代码
<!-- branch.vue -->
<template>
  <div>
      {{ name }}
  </div>
</template>
<script>
export default {
  inject: ["getNode"],
  data() {
    return {
      name: '',
    }
  },
  mounted() {
    const node = this.getNode();
    this.name = node.data.name;
    
    // 监听数据
    node.on('change:data',({current})=>{
    	console.log("监听父组件改变的数据",current)
    })
  }
}
</script>

3.父组件(使用节点渲染)

html 复制代码
<template>
  <div>
    <div id="container" />
  </div>
</template>
<script>
// 引入 AntV X6 库
import { Graph } from '@antv/x6'
import { register } from '@antv/x6-vue-shape'

// 引入2中的子组件
import branch from './branch.vue'
// 制作组件节点
register({
  shape: 'branch-node',
  width: 100,
  height: 100,
  component: branch,
})
export default {
	mounted() {
    this.initGraph()
 	 },
	methods: {
		initGraph() {
			const width = window.innerWidth
	     	const height = window.innerHeight
			// 初始化 Graph 对象
	     	const graph = new Graph({
	        container: document.getElementById('container'), // 容器元素
	        width: width, // 设置宽度为屏幕宽度
	        height: height, // 设置高度为屏幕高度
	        interacting: {
	          nodeMovable: false, // 可拖拽节点
	          edgeMovable: false // 可拖拽边
	        },
	        connecting: {
	          connectionPoint: 'anchor'// 连接中心锚点
	        }
	      })
	      // 创建组件节点
	      const branchNode = graph.addNode({
	        x: 950,
	        y: 240,
	        shape: 'branch-node',
	        data: {
	          name: '组件节点名称'
	        },
	      })
		}
  }
}
</script>

Vue3方法参考:「AntV」X6 自定义vue节点(vue3) https://www.yuque.com/sxd_panda/antv/vue-node

参考地址

1.AntV X6结合Vue组件渲染节点,并与节点组件进行双向的数据交互.

2.Ant X6指南踩坑指南.

相关推荐
艾小码42 分钟前
Vue组件到底怎么定义?全局注册和局部注册,我踩过的坑你别再踩了!
前端·javascript·vue.js
wusp19941 小时前
项目实战——“微商城”前后台【005】之前台项目首页编写
vue.js·vant·底部导航栏
森林的尽头是阳光2 小时前
vue防抖节流,全局定义,使用
前端·javascript·vue.js
计算机毕业设计木哥2 小时前
计算机毕设选题推荐:基于Java+SpringBoot物品租赁管理系统【源码+文档+调试】
java·vue.js·spring boot·mysql·spark·毕业设计·课程设计
zero13_小葵司2 小时前
Vue 3 前端工程化规范
前端·javascript·vue.js
Yolanda_20222 小时前
vue-sync修饰符解析以及切换iframe页面进行保存提示功能的思路
前端·javascript·vue.js
知识分享小能手13 小时前
React学习教程,从入门到精通,React 组件核心语法知识点详解(类组件体系)(19)
前端·javascript·vue.js·学习·react.js·react·anti-design-vue
萌萌哒草头将军14 小时前
Oxc 和 Rolldown Q4 更新计划速览!🚀🚀🚀
javascript·vue.js·vite
Qlittleboy15 小时前
uniapp如何使用本身的字体图标
javascript·vue.js·uni-app
小白菜学前端15 小时前
vue2 常用内置指令总结
前端·vue.js