登录/ 注册
 找回密码
 立即注册
关闭

CSDN热搜

程序园 精品问答 技术交流 资源下载
返回列表 发新帖
首页 › 业界区 › 业界 ›vue-dawn-flow 低代码流程插件

vue-dawn-flow 低代码流程插件

精滂软 昨天 19:20
程序园永久vip申请，500美金$，无限下载程序园所有程序/软件/数据/等
一、vue-dawn-flow介绍

vue-dawn-flow是一款功能强大的开源流程设计器，专为 Vue.js 生态打造，完美兼容 Vue 2 和 Vue 3 框架。并且能很好的兼容vue前端所有框架。
1.1插件功能


  • 提供了一个可视化的流程设计器，你可以在设计器中拖拽组件，连接组件，设置组件属性。
  • 提供了多种节点类型可共筛选。
  • 提供了节点的相关操作，比如添加、删除、复制、粘贴、撤销节点。
  • 提供了连线的相关操作，比如删除、撤销连线。
  • 提供了导出流程图片、清空流程、预览模式等相关功能。
  • 提供了相关的事件回调，你可以在事件回调中处理流程相关的逻辑。
  • 提供了相关的属性，你可以在属性中设置组件的相关属性。
  • 提供了相关的方法，你可以在方法中调用相关的功能。
二、快速开始

2.1：安装方式
  1. npm i vue-dawn-flow
复制代码
或者
  1. yarn add vue-dawn-flow
复制代码
2.2：全局注册

在 main.js 或 main.ts 中全局注册 vue-dawn-flow 插件
  1. import { createApp } from 'vue';
  2. import App from './App.vue' ;
  3. import "../node_modules/vue-dawn-flow/dawn-flow.css";
  4. import dawnFlow from "vue-dawn-flow"
  6. const app = createApp(App);
  7. app.use(dawnFlow)
  8. app.mount('#app')
复制代码
2.3：页面使用

在需要使用的 vue 页面，添加如下代码
  1. <template>
  2. <template>
  3. <template>
  4. <template>
  5. <template>
  6. <template>
  7.   <dawnFlow @currentEdgeDoubleClick="currentEdgeClick"></dawnFlow>
  8. </template><dawnFlow @currentNodeDoubleClick="currentNodeClick"></dawnFlow>
  9. </template><dawnFlow :isPreview="true"></dawnFlow>
  10. </template><dawnFlow :ToolBar="true"></dawnFlow>
  11. </template><dawnFlow :NodeBar="true"></dawnFlow>
  12. </template><dawnFlow></dawnFlow>
  13. </template>
复制代码
2.4：示例图

1.png

2.png

3.png

4.png

三、属性

3.1：节点栏


  • 属性名称：NodeBar
  • 作用：控制节点栏是否显示、右边节点属性栏是否显示
  • 类型：Boolean
  • 默认值：true
示例
  1. <template>
  2. <template>
  3. <template>
  4. <template>
  5. <template>
  6. <template>
  7.   <dawnFlow @currentEdgeDoubleClick="currentEdgeClick"></dawnFlow>
  8. </template><dawnFlow @currentNodeDoubleClick="currentNodeClick"></dawnFlow>
  9. </template><dawnFlow :isPreview="true"></dawnFlow>
  10. </template><dawnFlow :ToolBar="true"></dawnFlow>
  11. </template><dawnFlow :NodeBar="true"></dawnFlow>
  12. </template><dawnFlow></dawnFlow>
  13. </template>
复制代码
3.2：工具栏


  • 属性名称：ToolBar
  • 作用：控制是否显示
  • 类型：Boolean
  • 默认值：true
示例
  1. <template>
  2. <template>
  3. <template>
  4. <template>
  5. <template>
  6. <template>
  7.   <dawnFlow @currentEdgeDoubleClick="currentEdgeClick"></dawnFlow>
  8. </template><dawnFlow @currentNodeDoubleClick="currentNodeClick"></dawnFlow>
  9. </template><dawnFlow :isPreview="true"></dawnFlow>
  10. </template><dawnFlow :ToolBar="true"></dawnFlow>
  11. </template><dawnFlow :NodeBar="true"></dawnFlow>
  12. </template><dawnFlow></dawnFlow>
  13. </template>
复制代码
3.3：模式切换


  • 属性名称：isPreview
  • 作用：是否预览模式
  • 类型：Boolean
  • 默认值：false
示例
  1. <template>
  2. <template>
  3. <template>
  4. <template>
  5. <template>
  6. <template>
  7.   <dawnFlow @currentEdgeDoubleClick="currentEdgeClick"></dawnFlow>
  8. </template><dawnFlow @currentNodeDoubleClick="currentNodeClick"></dawnFlow>
  9. </template><dawnFlow :isPreview="true"></dawnFlow>
  10. </template><dawnFlow :ToolBar="true"></dawnFlow>
  11. </template><dawnFlow :NodeBar="true"></dawnFlow>
  12. </template><dawnFlow></dawnFlow>
  13. </template>
复制代码
四、方法

4.1：导出流程图片


  • 方法名称：downloadImageClick
  • 作用：下载图片
  • 类型：Function
  • 默认值：() => {}
示例
  1. <template>
  2. <template>
  3. <template>
  4. <template>
  5. <template>
  6. <template>
  7.   <dawnFlow @currentEdgeDoubleClick="currentEdgeClick"></dawnFlow>
  8. </template><dawnFlow @currentNodeDoubleClick="currentNodeClick"></dawnFlow>
  9. </template><dawnFlow :isPreview="true"></dawnFlow>
  10. </template><dawnFlow :ToolBar="true"></dawnFlow>
  11. </template><dawnFlow :NodeBar="true"></dawnFlow>
  12. </template><dawnFlow></dawnFlow>
  13. </template><template>
  14. <template>
  15. <template>
  16. <template>
  17. <template>
  18. <template>
  19.   <dawnFlow @currentEdgeDoubleClick="currentEdgeClick"></dawnFlow>
  20. </template><dawnFlow @currentNodeDoubleClick="currentNodeClick"></dawnFlow>
  21. </template><dawnFlow :isPreview="true"></dawnFlow>
  22. </template><dawnFlow :ToolBar="true"></dawnFlow>
  23. </template><dawnFlow :NodeBar="true"></dawnFlow>
  24. </template><dawnFlow></dawnFlow>
  25. </template>下载图片
复制代码
4.2：获取流程数据


  • 方法名称：getFlowJson
  • 作用：获取流程数据，可用于获取当前流程图的 JSON 数据
  • 类型：Function
  • 默认值：() => {}
示例
  1. <template>
  2. <template>
  3. <template>
  4. <template>
  5. <template>
  6. <template>
  7.   <dawnFlow @currentEdgeDoubleClick="currentEdgeClick"></dawnFlow>
  8. </template><dawnFlow @currentNodeDoubleClick="currentNodeClick"></dawnFlow>
  9. </template><dawnFlow :isPreview="true"></dawnFlow>
  10. </template><dawnFlow :ToolBar="true"></dawnFlow>
  11. </template><dawnFlow :NodeBar="true"></dawnFlow>
  12. </template><dawnFlow></dawnFlow>
  13. </template><template>
  14. <template>
  15. <template>
  16. <template>
  17. <template>
  18. <template>
  19.   <dawnFlow @currentEdgeDoubleClick="currentEdgeClick"></dawnFlow>
  20. </template><dawnFlow @currentNodeDoubleClick="currentNodeClick"></dawnFlow>
  21. </template><dawnFlow :isPreview="true"></dawnFlow>
  22. </template><dawnFlow :ToolBar="true"></dawnFlow>
  23. </template><dawnFlow :NodeBar="true"></dawnFlow>
  24. </template><dawnFlow></dawnFlow>
  25. </template>获取流程数据
复制代码
4.3：设置流程数据


  • 方法名称：setFlowJson
  • 作用：设置流程数据，可用于初始化流程图
  • 类型：Function
  • 默认值：() => {}
示例
  1. <template>
  2. <template>
  3. <template>
  4. <template>
  5. <template>
  6. <template>
  7.   <dawnFlow @currentEdgeDoubleClick="currentEdgeClick"></dawnFlow>
  8. </template><dawnFlow @currentNodeDoubleClick="currentNodeClick"></dawnFlow>
  9. </template><dawnFlow :isPreview="true"></dawnFlow>
  10. </template><dawnFlow :ToolBar="true"></dawnFlow>
  11. </template><dawnFlow :NodeBar="true"></dawnFlow>
  12. </template><dawnFlow></dawnFlow>
  13. </template><template>
  14. <template>
  15. <template>
  16. <template>
  17. <template>
  18. <template>
  19.   <dawnFlow @currentEdgeDoubleClick="currentEdgeClick"></dawnFlow>
  20. </template><dawnFlow @currentNodeDoubleClick="currentNodeClick"></dawnFlow>
  21. </template><dawnFlow :isPreview="true"></dawnFlow>
  22. </template><dawnFlow :ToolBar="true"></dawnFlow>
  23. </template><dawnFlow :NodeBar="true"></dawnFlow>
  24. </template><dawnFlow></dawnFlow>
  25. </template>设置流程数据
复制代码
4.4：删除流程


  • 方法名称：delFlowClick
  • 作用：删除当前流程图，清空当前流程图数据
  • 类型：Function
  • 默认值：() => {}
示例
  1. <template>
  2. <template>
  3. <template>
  4. <template>
  5. <template>
  6. <template>
  7.   <dawnFlow @currentEdgeDoubleClick="currentEdgeClick"></dawnFlow>
  8. </template><dawnFlow @currentNodeDoubleClick="currentNodeClick"></dawnFlow>
  9. </template><dawnFlow :isPreview="true"></dawnFlow>
  10. </template><dawnFlow :ToolBar="true"></dawnFlow>
  11. </template><dawnFlow :NodeBar="true"></dawnFlow>
  12. </template><dawnFlow></dawnFlow>
  13. </template><template>
  14. <template>
  15. <template>
  16. <template>
  17. <template>
  18. <template>
  19.   <dawnFlow @currentEdgeDoubleClick="currentEdgeClick"></dawnFlow>
  20. </template><dawnFlow @currentNodeDoubleClick="currentNodeClick"></dawnFlow>
  21. </template><dawnFlow :isPreview="true"></dawnFlow>
  22. </template><dawnFlow :ToolBar="true"></dawnFlow>
  23. </template><dawnFlow :NodeBar="true"></dawnFlow>
  24. </template><dawnFlow></dawnFlow>
  25. </template>删除流程
复制代码
4.5：删除选中节点


  • 方法名称：delSelectNodeClick
  • 作用：删除当前选中节点，按住 ctrl 可以多选节点
  • 类型：Function
  • 默认值：() => {}
示例
  1. <template>
  2. <template>
  3. <template>
  4. <template>
  5. <template>
  6. <template>
  7.   <dawnFlow @currentEdgeDoubleClick="currentEdgeClick"></dawnFlow>
  8. </template><dawnFlow @currentNodeDoubleClick="currentNodeClick"></dawnFlow>
  9. </template><dawnFlow :isPreview="true"></dawnFlow>
  10. </template><dawnFlow :ToolBar="true"></dawnFlow>
  11. </template><dawnFlow :NodeBar="true"></dawnFlow>
  12. </template><dawnFlow></dawnFlow>
  13. </template><template>
  14. <template>
  15. <template>
  16. <template>
  17. <template>
  18. <template>
  19.   <dawnFlow @currentEdgeDoubleClick="currentEdgeClick"></dawnFlow>
  20. </template><dawnFlow @currentNodeDoubleClick="currentNodeClick"></dawnFlow>
  21. </template><dawnFlow :isPreview="true"></dawnFlow>
  22. </template><dawnFlow :ToolBar="true"></dawnFlow>
  23. </template><dawnFlow :NodeBar="true"></dawnFlow>
  24. </template><dawnFlow></dawnFlow>
  25. </template>删除选中节点
复制代码
4.6：删除选中连线


  • 方法名称：delSelectEdgesClick
  • 作用：删除当前选中连线，按住 ctrl 可以多选连线
  • 类型：Function
  • 默认值：() => {}
示例
  1. <template>
  2. <template>
  3. <template>
  4. <template>
  5. <template>
  6. <template>
  7.   <dawnFlow @currentEdgeDoubleClick="currentEdgeClick"></dawnFlow>
  8. </template><dawnFlow @currentNodeDoubleClick="currentNodeClick"></dawnFlow>
  9. </template><dawnFlow :isPreview="true"></dawnFlow>
  10. </template><dawnFlow :ToolBar="true"></dawnFlow>
  11. </template><dawnFlow :NodeBar="true"></dawnFlow>
  12. </template><dawnFlow></dawnFlow>
  13. </template><template>
  14. <template>
  15. <template>
  16. <template>
  17. <template>
  18. <template>
  19.   <dawnFlow @currentEdgeDoubleClick="currentEdgeClick"></dawnFlow>
  20. </template><dawnFlow @currentNodeDoubleClick="currentNodeClick"></dawnFlow>
  21. </template><dawnFlow :isPreview="true"></dawnFlow>
  22. </template><dawnFlow :ToolBar="true"></dawnFlow>
  23. </template><dawnFlow :NodeBar="true"></dawnFlow>
  24. </template><dawnFlow></dawnFlow>
  25. </template>删除选中连线
复制代码
4.7：返回画布中心位置


  • 方法名称：backCenterClick
  • 作用：返回画布中心位置
  • 类型：Function
  • 默认值：() => {}
示例
  1. <template>
  2. <template>
  3. <template>
  4. <template>
  5. <template>
  6. <template>
  7.   <dawnFlow @currentEdgeDoubleClick="currentEdgeClick"></dawnFlow>
  8. </template><dawnFlow @currentNodeDoubleClick="currentNodeClick"></dawnFlow>
  9. </template><dawnFlow :isPreview="true"></dawnFlow>
  10. </template><dawnFlow :ToolBar="true"></dawnFlow>
  11. </template><dawnFlow :NodeBar="true"></dawnFlow>
  12. </template><dawnFlow></dawnFlow>
  13. </template><template>
  14. <template>
  15. <template>
  16. <template>
  17. <template>
  18. <template>
  19.   <dawnFlow @currentEdgeDoubleClick="currentEdgeClick"></dawnFlow>
  20. </template><dawnFlow @currentNodeDoubleClick="currentNodeClick"></dawnFlow>
  21. </template><dawnFlow :isPreview="true"></dawnFlow>
  22. </template><dawnFlow :ToolBar="true"></dawnFlow>
  23. </template><dawnFlow :NodeBar="true"></dawnFlow>
  24. </template><dawnFlow></dawnFlow>
  25. </template>返回画布中心位置
复制代码
4.8：撤销上一步操作


  • 方法名称：revokeClick
  • 作用：撤销上一步操作
  • 类型：Function
  • 默认值：() => {}
示例
  1. <template>
  2. <template>
  3. <template>
  4. <template>
  5. <template>
  6. <template>
  7.   <dawnFlow @currentEdgeDoubleClick="currentEdgeClick"></dawnFlow>
  8. </template><dawnFlow @currentNodeDoubleClick="currentNodeClick"></dawnFlow>
  9. </template><dawnFlow :isPreview="true"></dawnFlow>
  10. </template><dawnFlow :ToolBar="true"></dawnFlow>
  11. </template><dawnFlow :NodeBar="true"></dawnFlow>
  12. </template><dawnFlow></dawnFlow>
  13. </template><template>
  14. <template>
  15. <template>
  16. <template>
  17. <template>
  18. <template>
  19.   <dawnFlow @currentEdgeDoubleClick="currentEdgeClick"></dawnFlow>
  20. </template><dawnFlow @currentNodeDoubleClick="currentNodeClick"></dawnFlow>
  21. </template><dawnFlow :isPreview="true"></dawnFlow>
  22. </template><dawnFlow :ToolBar="true"></dawnFlow>
  23. </template><dawnFlow :NodeBar="true"></dawnFlow>
  24. </template><dawnFlow></dawnFlow>
  25. </template>撤销上一步操作
复制代码
4.9：模式切换


  • 方法名称：setPreviewState
  • 作用：切换模式，可切换为编辑模式和预览模式
  • 类型：Function
  • 默认值：(boolean) => {}
示例
  1. <template>
  2. <template>
  3. <template>
  4. <template>
  5. <template>
  6. <template>
  7.   <dawnFlow @currentEdgeDoubleClick="currentEdgeClick"></dawnFlow>
  8. </template><dawnFlow @currentNodeDoubleClick="currentNodeClick"></dawnFlow>
  9. </template><dawnFlow :isPreview="true"></dawnFlow>
  10. </template><dawnFlow :ToolBar="true"></dawnFlow>
  11. </template><dawnFlow :NodeBar="true"></dawnFlow>
  12. </template><dawnFlow></dawnFlow>
  13. </template><template>
  14. <template>
  15. <template>
  16. <template>
  17. <template>
  18. <template>
  19.   <dawnFlow @currentEdgeDoubleClick="currentEdgeClick"></dawnFlow>
  20. </template><dawnFlow @currentNodeDoubleClick="currentNodeClick"></dawnFlow>
  21. </template><dawnFlow :isPreview="true"></dawnFlow>
  22. </template><dawnFlow :ToolBar="true"></dawnFlow>
  23. </template><dawnFlow :NodeBar="true"></dawnFlow>
  24. </template><dawnFlow></dawnFlow>
  25. </template>切换模式
复制代码
五、事件

5.1：节点双击事件


  • 事件名称：currentNodeDoubleClick
  • 作用：节点双击事件，可用于在节点双击时触发自定义操作
  • 类型：Function(nodeData:[])
  • 默认值：(nodeData:[]) => {}
示例
  1. <template>
  2. <template>
  3. <template>
  4. <template>
  5. <template>
  6. <template>
  7.   <dawnFlow @currentEdgeDoubleClick="currentEdgeClick"></dawnFlow>
  8. </template><dawnFlow @currentNodeDoubleClick="currentNodeClick"></dawnFlow>
  9. </template><dawnFlow :isPreview="true"></dawnFlow>
  10. </template><dawnFlow :ToolBar="true"></dawnFlow>
  11. </template><dawnFlow :NodeBar="true"></dawnFlow>
  12. </template><dawnFlow></dawnFlow>
  13. </template>
复制代码
5.2：连线双击事件


  • 事件名称：currentEdgeDoubleClick
  • 作用：连线双击事件，可用于在连线双击时触发自定义操作
  • 类型：Function(edgeData:[])
  • 默认值：(edgeData:[]) => {}
示例
  1. <template>
  2. <template>
  3. <template>
  4. <template>
  5. <template>
  6. <template>
  7.   <dawnFlow @currentEdgeDoubleClick="currentEdgeClick"></dawnFlow>
  8. </template><dawnFlow @currentNodeDoubleClick="currentNodeClick"></dawnFlow>
  9. </template><dawnFlow :isPreview="true"></dawnFlow>
  10. </template><dawnFlow :ToolBar="true"></dawnFlow>
  11. </template><dawnFlow :NodeBar="true"></dawnFlow>
  12. </template><dawnFlow></dawnFlow>
  13. </template>
复制代码
六、讨论群

作者会在群里回答你的问题，也会分享插件的使用经验。
qq 群号：1014731112。
七、文档地址

文档地址：http://139.155.137.144:8871
ElemEnt Plus版演示：http://139.155.137.144:8870
Ant Design Vue版演示：http://139.155.137.144:8872
注：文档中有插件的使用说明
有兴趣的朋友，请关注我微信公众号吧(▽)。
5.png

关注我：一个全栈多端的宝藏博主，定时分享技术文章，不定时分享开源项目。关注我，带你认识不一样的程序世界

来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！
vuedawnflow代码流程

使用道具 举报

相关推荐
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册
发帖
精滂软
昨天 19:20

0

粉丝关注

25

主题发布

板块介绍填写区域，请于后台编辑
微信扫一扫