- Notifications
You must be signed in to change notification settings - Fork14
@antv/x6 基于 vue2 + composition-api 的图形化编辑器
License
NotificationsYou must be signed in to change notification settings
g0ngjie/antv-x6-vue2
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
@antv/x6 基于 vue2 + composition-api 的图形化编辑器
支持触控屏版:在线访问
- 画布自适应
- 快捷键
- 工具栏 组合按键功能
- 事件监听
- vue 自定义组件
main.js
importVuefrom"vue";importantvfrom"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 |
| 画布清空 | 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 |
组件事件
| 事件名 | 说明 | 参数 |
|---|---|---|
| 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;});
About
@antv/x6 基于 vue2 + composition-api 的图形化编辑器
Topics
Resources
License
Stars
Watchers
Forks
Packages0
No packages published