当前位置：首页 > news >正文

Vue3 与 AntV X6 节点传参、自动布局及边颜色控制教程

news 2025/9/10 6:28:37

以下是整理后的 AntV X6 + Vue 3 节点开发全流程指南，包含完整代码示例和关键实现细节：

环境搭建与项目初始化

使用 Vite 快速创建 Vue 3 项目：

npm create vite@latest x6-vue-demo
cd x6-vue-demo
npm install

安装核心依赖：

npm install @antv/x6 @antv/layout @antv/x6-vue-shape element-plus

配置 Element Plus（在 main.js/ts 中）：

import { createApp } from 'vue'
import App from './App.vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'const app = createApp(App)
app.use(ElementPlus)
app.mount('#app')

自定义节点组件开发

创建 NodeView.vue 组件：

<template><div class="node" @click="handleClick"><div class="node-title">{{ nodeData.name }}</div><div class="node-status">状态: {{ nodeData.status || "未执行" }}</div></div>
</template><script setup>
import { ref, onBeforeUnmount } from "vue"
const props = defineProps({ getNode: Function })
const node = props.getNode()
const nodeData = ref(node ? node.getData() : {})const handleChange = ({ current }) => {nodeData.value = { ...current }
}
if (node) node.on("change:data", handleChange)onBeforeUnmount(() => {if (node) node.off("change:data", handleChange)
})const handleClick = () => {alert(`点击了: ${nodeData.value.name}`)
}
</script><style scoped>
.node {width: 120px;height: 50px;background: #409eff;color: #fff;border-radius: 6px;display: flex;flex-direction: column;align-items: center;justify-content: center;font-size: 12px;cursor: pointer;
}
.node-title { font-weight: bold; }
.node-status { font-size: 10px; margin-top: 4px; }
</style>

主页面实现

创建 GraphDemo.vue 核心逻辑：

<template><div><el-button type="primary" @click="setStatus('成功')">父节点成功</el-button><el-button type="danger" @click="setStatus('失败')">父节点失败</el-button><el-button @click="setStatus('等待')">父节点等待</el-button><div class="graph-container" ref="graphRef"></div><TeleportContainer /></div>
</template><script setup>
import { ref, onMounted, defineComponent } from "vue"
import { Graph } from "@antv/x6"
import { register, getTeleport } from "@antv/x6-vue-shape"
import { DagreLayout } from "@antv/layout"
import NodeView from "../components/NodeView.vue"const graphRef = ref(null)
let graph = null
const TeleportContainer = defineComponent(getTeleport())const initGraph = () => {register({shape: "vue-node",component: NodeView,getComponentProps(node) {return { getNode: () => node }}})graph = new Graph({container: graphRef.value,background: { color: "#f9f9f9" },grid: true})const taskList = [{ id: "1", name: "任务A", status: "等待" },{ id: "2", name: "任务B", status: "等待" },{ id: "3", name: "任务C", status: "等待" }]const relations = [{ source: "1", target: "2" },{ source: "1", target: "3" }]const nodes = taskList.map((task) => ({id: task.id,shape: "vue-node",width: 120,height: 50,data: task}))const edges = relations.map((rel) => ({source: rel.source,target: rel.target,attrs: {line: {stroke: "#999",strokeWidth: 2,targetMarker: { name: "classic", width: 12, height: 8 }}}}))const layout = new DagreLayout({type: "dagre",rankdir: "LR",nodesep: 40,ranksep: 60})graph.fromJSON(layout.layout({ nodes, edges }))updateEdgesColor()
}const updateEdgesColor = () => {graph.getEdges().forEach((edge) => {const sourceNode = graph.getCellById(edge.getSourceCellId())const status = sourceNode?.getData()?.status || "等待"edge.setAttrs({line: { stroke: status === "成功" ? "green" :status === "失败" ? "red" : "gray"}})})
}const setStatus = (status) => {const parentNode = graph.getCellById("1")parentNode.setData({ ...parentNode.getData(), status })updateEdgesColor()
}onMounted(() => initGraph())
</script><style scoped>
.graph-container {width: 100%;height: 500px;border: 1px solid #ddd;margin-top: 10px;
}
</style>