可视化拖拽 自定义 流程图

项目使用框架和组件库

AntV X6
ElementUI
Vue.js

项目目录

vue-antvx6-flow                //
├─ README.md                   // 项目说明
├─ babel.config.js             // babel 配置
├─ package-lock.json           //
├─ package.json                //
├─ public                      // 静态资源
├─ src                         //
│  ├─ App.vue                  //
│  ├─ assets                   //
│  ├─ components               // 自定Vue组件
│  │  └─ nodeTheme             // 自定义Node节点组件
│  ├─ data.json                // mock数据
│  └─ main.js                  // 入口文件
├─ vue.config.js               // Vue配置文件
└─ yarn.lock                   //

实现功能

1. 组件拖拽
2. 自定义 Node 节点组件
3. 自定义 Edge 边组件
4. 支持节点选中、复制、剪切、粘贴、编辑
5. 支持边选中、复制、剪切、粘贴、编辑
6. 支持节点、边绑定数据状态
7. 支持节点、边动态效果

赞助 * 咖啡 ☕️