antv-x6-vue2

@antv/x6 基于 vue2 的图形化流程

在线访问

• [ ] ~~国际化~~
• [x] 画布自适应
• [x] 快捷键
• [x] 工具栏 组合按键功能
• [x] Emit
• [ ] 定制化
  • [ ] 工具栏
  • [x] Tooltips
  • [x] 操作区域

使用

main.js

import Vue from "vue";
import antv from "antv-x6-vue2";
import "antv-x6-vue2/lib/antv.css";

Vue.use(antv);

vue2 文件中使用

<template>
  <div>
    <antv-x6-vue2></antv-x6-vue2>
  </div>
</template>

Api

方法

| 说明 | 函数 | | :----------------------------------- | -------------------------------------------------------------------------------------- | | 初始化画布默认数据 | initDefaultData(nodes: any[], edges: any[]): void | | 获取数据 | exportData(): { nodes: string[], edges: string[], nodesJSON: any[], edgesJSON: any[] } | | 画布只读 | onlyLook(bool: boolean): void | | 修改 Node 节点文案 | updateLabel(label: string): void | | 监听单元事件双击回调 | GraphListener.doubleNodeClick(cb: ICallbackFunc): void | | 监听单元事件单击回调 | GraphListener.nodeClick(cb: ICallbackFunc): void | | 运行时异常监听 | GraphListener.runtimeError(cb: IErrorCallbackFunc): void | | 图形校验函数 | graphValidate(): { ok: boolean, errs: string[] } | | 获取所有已存在的 node 节点和 edge 边 | getAtoms(options?: 'nodes' | 'edges'): { nodes: ...[], edges: ...[] } | undefined | | 导出图片 | exportImg(cb: CallBackFunc, options?: '...width,height')
| 自动清除所有元素 |clearGraph() | | 导出props传递的数据 |exportData方法导出数据，参数为整个form对象 | | 触发导入数据的导出 |handleImportDataEvent | | 工具保存触发导出节点数据接口 |exportNodeData() 未返回节点数据，只触发接口函数，节点数据外部graphFunc中接受 |

props

| 属性 | 说明 | 类型 | 实例 | |--------------|-----------------------------------------|-------------|---------------------------------------------------------------------------| | item | 需要修改的数据 rules自动绑定 | Array |[{label: "名称",value: "请输入名称",key: "name",rules: [{ required: true, message: "请输入名称", trigger: "blur" }]}]|

Events

组件事件

| 事件名 | 说明 | 参数 | | ------------- | ----------------------------- | ----------------------------------- | | node-click | Node 节点被点击时会触发该事件 | { nodeId, actionType, label, node } | | node-dblclick | Node 节点被双击时会触发该事件 | { nodeId, actionType, label, node } |

import { graphFunc } from "antv-x6-vue2";

graphFunc.GraphListener.doubleNodeClick((detail) => {
  const { nodeId, label, actionType } = detail;
});

异常类

| 错误码(errorCode) | 说明(errorMsg) | | ----------------- | -------------- | | 2000 | 非法参数 | | 2001 | 验证失败 | | 2002 | 数据格式不正确 |

import { graphFunc } from "bt-antv-x6";

graphFunc.GraphListener.runtimeError((err) => {
  const { errorCode, errorMsg } = err;
});