# vue draggable workflow
基于 sortablejs 和 jsplumb.js 实现的 workflow。
- 支持页面布局缩放
- 支持画布拖拽
- 支持节点
- 支持if else
- 支持多分支
- 支持节点拖拽
## 功能
- [x] 撤销
- [x] 初始化数据
- [x] 网格线 hide/show
- [x] 边界保护
- [x] 自动排序
- [x] 手动排列
- [x] 清空数据
- [x] 获取JSON数据
- [x] 支持画布拖拽
# 解惑文章
[基于vue和jsplumb的工作流编辑器开发](https://juejin.cn/post/6844904144264773639)
[基于vue和jsplumb的工作流编辑器开发(二)](https://juejin.cn/post/6948313872503832612)
# 执行
> 依赖 yarn 或者 npm
## step1 安装依赖
```
yarn install
```
## step2 开发调试
```
yarn run dev
```
## step3 编译部署
```
yarn run build
```
# 部分截图
<img src="./images/5.png"></img>
<img src="./images/1.png"></img>
<img src="./images/2.png"></img>
<img src="./images/3.png"></img>
<img src="./images/4.png"></img>
没有合适的资源?快使用搜索试试~ 我知道了~
温馨提示
实现一个工作流,支持拖拽节点生成工作流; 支持页面布局缩放 支持节点 支持if else 支持多分支 技术选型:vue jsplumb sortablejs(vue-draggable) 支持拖拽添加节点 鼠标移入到节点中显示 编辑、删除 操作 鼠标单击线可进行设置条件,双击可进行连线删除 支持预设的流程图案例切换展示 支持画布拖拽,控制画布网格背景 支持放大缩小 支持一键生成流程图图片 支持数据文件导入(目前只支持yaml文件和json文件) 支持显示节点内部详情 支持节点间回环连接,但不支持节点线连接自己
资源推荐
资源详情
资源评论
收起资源包目录
vue-draggable-workflow-master.zip (66个子文件)
vue-draggable-workflow-master
yarn.lock 334KB
babel.config.js 73B
.gitattributes 66B
src
mock
mock.js 26KB
constant
index.js 2KB
App.vue 272B
assets
step-expand.png 3KB
icon-json.png 3KB
step-start2.png 4KB
step-wait.png 6KB
step-stop.png 5KB
logo.png 7KB
icon-redo.png 4KB
step-merge.png 3KB
icon-duiqi.png 909B
icon-auto-sort-open.png 3KB
icon-undo.png 2KB
step-start.png 4KB
step-end.png 4KB
step-if.png 2KB
icon-clear.png 4KB
icon-undo-disable.png 3KB
icon-auto-sort-close.png 4KB
step-tag.png 4KB
icon-wangge-open.png 1KB
icon-wangge-close.png 1KB
styles
_step-imgs.scss 2KB
_jsplumbtoolkit-defaults.scss 15KB
workflow.scss 11KB
main.js 244B
utils
dom.js 3KB
index.js 1KB
components
ifNodeForm.vue 2KB
listForm.vue 2KB
Draggable.js 14KB
nodeNodeForm.vue 2KB
Workflow.vue 64KB
expandNodeForm.vue 4KB
startNodeForm.vue 2KB
LICENSE 34KB
dist
js
app.ed3bd818.js.map 212KB
app.ed3bd818.js 56KB
chunk-vendors.e414dda8.js 1.1MB
chunk-vendors.e414dda8.js.map 4.9MB
img
step-stop.cf2fb78e.png 5KB
step-start2.206ef489.png 4KB
step-tag.5fb141f0.png 4KB
step-end.3898eb57.png 4KB
css
chunk-vendors.5ad50e34.css 205KB
app.8451904d.css 69KB
favicon.ico 4KB
index.html 1KB
fonts
element-icons.535877f5.woff 28KB
element-icons.732389de.ttf 55KB
package.json 1KB
public
favicon.ico 4KB
index.html 613B
build
deploy.sh 308B
vue.config.js 186B
.gitignore 66B
images
3.png 238KB
1.png 172KB
5.png 195KB
4.png 268KB
2.png 144KB
README.md 975B
共 66 条
- 1
资源评论
noBUG1209
- 粉丝: 3
- 资源: 2
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功