yh-x6

力控远海技术中心封装的 Antdv X6

安装

配置好云效NPM私有仓库后,直接执行如下命令安装

npm install yh-x6

使用

自定义节点挂载点

在布局根节点插入 Teleport 节点，用来渲染自定义Vue节点
新模板中布局根节点分别位于两个位置：

• src/layout/admin/adminIndex.vue
• src/layout/main/main.vue

<template>
  ......
  <TeleportContainer></TeleportContainer>
</template>

自定义节点

此封装除了支持 X6 内置的svg 节点外，还内置了四个Vue节点以供使用:

• flowStart 开始节点
• flowEnd 结束节点
• flowNode 普通节点
• flowQuestion 告警节点

引入方式如下

import {
  flowStart,
  flowEnd,
  flowNode,
  flowQuestion
} from "yh-x6"

挂载画布

画布的挂载被封装成了 vue3 hooks，使用方式如下

const { selectedCells, graph, dnd } = useX6(
  flowCanvasContainer, // 挂载容器的 Ref 引用
  (sourceCell) => {}, // 手动连线时
  () => {} // x6 初始化并挂在后执行的回调函数
)