Skip to content

MyButifullyLife/vue-x6-flow

Repository files navigation

哎,github 总受抽风打不开很烦! 生命短暂,用梯子吧 https://laiyun.xyz/#/register?code=SVH5EI6r

vue3 和 vue2 两个项目的demo是不同的,可以都下载下来运行查看是否有符合自身业务的demo

vue-x6-flow

基于antv-x6 vue版本 vue2.x+ element +antv-x6 适用于流程图-dag图

vue3版本地址

https://github.com/MyButifullyLife/vue-x6-flow-3.0

有以下功能内容: 1、拖拽布局 2、右键菜单 3、保存

4、缩放 5、多选 6、快捷键 cv cx cz(重做) 7、连线判断 8、配置属性 9、动态节点流向动画 其余功能可在antv-x6文档自行添加

文档地址

https://x6.antv.vision/zh/docs/api/graph/graph

本项目效果图

image

流向动画

GIF 2022-1-18 16-51-01

树状图 现成源码

1679362448522

企业微信截图_d2f74ba5-4202-43eb-90e8-9f95bfc3ff2f

x6 对于流程图 dag图 思维导图均可实现

image

如果文章对你有帮助,那么5块、10块也是爱

image

有疑问可加QQ

冠希:微信转账30可以让你少掉、少白几根头发永远跟我一样帅 QQ:251275985 wx:gjh251275985

antv在vue使用所需要的依赖

···

"@antv/x6": "^1.29.5"

"@antv/x6-vue-shape": "^1.3.0"

"@vue/composition-api": "^1.4.3"



vue.config.js 配置
runtimeCompiler: true

···

Project setup

因为项目是由最新vue-cli创建,运行环境必须要有 yarn
本地环境没有yarn 可以通过 npm install yarn 下载

yarn install

Compiles and hot-reloads for development

yarn serve

Compiles and minifies for production

yarn build

Lints and fixes files

yarn lint

Customize configuration

See Configuration Reference.

About

vue版流程图简易编辑器、简单易上手

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages