2 Star 6 Fork 8

Chieh Kung / antv-x6-vue2

加入 Gitee
与超过 800 万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
克隆/下载
贡献代码
同步代码
取消
提示: 由于 Git 不支持空文件夾,创建文件夹后会生成空的 .keep 文件
Loading...
README.md

antv-x6-vue2

@antv/x6 基于 vue2 + composition-api 的图形化编辑器

antv-x6-vue2

在线访问

  • 画布自适应
  • 快捷键
  • 工具栏 组合按键功能
  • 事件监听
  • vue 自定义组件

使用

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
画布清空 clean(): 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

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;
});

简介

@antv/x6 基于 vue2 + composition-api 的图形化编辑器 展开 收起
JavaScript 等 4 种语言
MIT
取消

发行版

暂无发行版

贡献者

全部

近期动态

加载更多
不能加载更多了
JavaScript
1
https://gitee.com/g0ngjie/antv-x6-vue2.git
git@gitee.com:g0ngjie/antv-x6-vue2.git
g0ngjie
antv-x6-vue2
antv-x6-vue2
master

搜索帮助