Antvx6-fault-wl NPM

antv-x6-vue2

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

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>

说明	函数
初始化画布默认数据	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')

组件事件

事件名	说明	参数
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;
});

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

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

3 years ago

3 years ago