精美的vue流程设计器

陈逸子风2025-11-08 14:55

一、vue-dawn-flow介绍

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

1.1插件功能

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

二、快速开始

2.1：安装方式

bash 复制代码 
npm i vue-dawn-flow

或者

bash 复制代码 
yarn add vue-dawn-flow

2.2：全局注册

在 main.js 或 main.ts 中全局注册 vue-dawn-flow 插件

ts 复制代码 
import { createApp } from 'vue'; 
import App from './App.vue' ;
import "../node_modules/vue-dawn-flow/dawn-flow.css"; 
import dawnFlow from "vue-dawn-flow" 

const app = createApp(App);
app.use(dawnFlow)
app.mount('#app')

2.3：页面使用

在需要使用的 vue 页面，添加如下代码

ts 复制代码 
<template>
  <dawnFlow></dawnFlow>
</template>

2.4：示例图

三、属性

3.1：节点栏

  • 属性名称：NodeBar
  • 作用：控制节点栏是否显示、右边节点属性栏是否显示
  • 类型：Boolean
  • 默认值：true

示例

vue 复制代码 
<template>
  <dawnFlow :NodeBar="true"></dawnFlow>
</template>

3.2：工具栏

  • 属性名称：ToolBar
  • 作用：控制是否显示
  • 类型：Boolean
  • 默认值：true

示例

ts 复制代码 
<template>
  <dawnFlow :ToolBar="true"></dawnFlow>
</template>

3.3：模式切换

  • 属性名称：isPreview
  • 作用：是否预览模式
  • 类型：Boolean
  • 默认值：false

示例

ts 复制代码 
<template>
  <dawnFlow :isPreview="true"></dawnFlow>
</template>

四、方法

4.1：导出流程图片

  • 方法名称：downloadImageClick
  • 作用：下载图片
  • 类型：Function
  • 默认值：() => {}

示例

ts 复制代码 
<template>
  <dawnFlow ref="dawnFlowRef"></dawnFlow>
  <button @click="downloadImage">下载图片</button>
</template>
<script lang="ts" setup>
import { ref } from "vue";

const dawnFlowRef = ref(null);

const downloadImage = () => {
  dawnFlowRef.value.downloadImageClick();
};
</script>

4.2：获取流程数据

  • 方法名称：getFlowJson
  • 作用：获取流程数据，可用于获取当前流程图的 JSON 数据
  • 类型：Function
  • 默认值：() => {}

示例

ts 复制代码 
<template>
  <dawnFlow ref="dawnFlowRef"></dawnFlow>
  <button @click="getFlowData">获取流程数据</button>
</template>
<script lang="ts" setup>
import { ref } from "vue";

const dawnFlowRef = ref(null);

const getFlowData = () => {
  dawnFlowRef.value.getFlowJson();
};
</script>

4.3：设置流程数据

  • 方法名称：setFlowJson
  • 作用：设置流程数据，可用于初始化流程图
  • 类型：Function
  • 默认值：() => {}

示例

ts 复制代码 
<template>
  <dawnFlow ref="dawnFlowRef"></dawnFlow>
  <button @click="setFlowData">设置流程数据</button>
</template>
<script lang="ts" setup>
import { ref } from "vue";

const dawnFlowRef = ref(null);

const setFlowData = () => {
  dawnFlowRef.value.setFlowJson();
};
</script>

4.4：删除流程

  • 方法名称：delFlowClick
  • 作用：删除当前流程图，清空当前流程图数据
  • 类型：Function
  • 默认值：() => {}

示例

ts 复制代码 
<template>
  <dawnFlow ref="dawnFlowRef"></dawnFlow>
  <button @click="delFlowData">删除流程</button>
</template>
<script lang="ts" setup>
import { ref } from "vue";

const dawnFlowRef = ref(null);

const delFlowData = () => {
  dawnFlowRef.value.delFlowClick();
};
</script>

4.5：删除选中节点

  • 方法名称：delSelectNodeClick
  • 作用：删除当前选中节点，按住 ctrl 可以多选节点
  • 类型：Function
  • 默认值：() => {}

示例

ts 复制代码 
<template>
  <dawnFlow ref="dawnFlowRef"></dawnFlow>
  <button @click="delSelectNodeData">删除选中节点</button>
</template>
<script lang="ts" setup>
import { ref } from "vue";

const dawnFlowRef = ref(null);

const delSelectNodeData = () => {
  dawnFlowRef.value.delSelectNodeClick();
};
</script>

4.6：删除选中连线

  • 方法名称：delSelectEdgesClick
  • 作用：删除当前选中连线，按住 ctrl 可以多选连线
  • 类型：Function
  • 默认值：() => {}

示例

ts 复制代码 
<template>
  <dawnFlow ref="dawnFlowRef"></dawnFlow>
  <button @click="delSelectEdgesData">删除选中连线</button>
</template>
<script lang="ts" setup>
import { ref } from "vue";

const dawnFlowRef = ref(null);

const delSelectEdgesData = () => {
  dawnFlowRef.value.delSelectEdgesClick();
};
</script>

4.7：返回画布中心位置

  • 方法名称：backCenterClick
  • 作用：返回画布中心位置
  • 类型：Function
  • 默认值：() => {}

示例

ts 复制代码 
<template>
  <dawnFlow ref="dawnFlowRef"></dawnFlow>
  <button @click="backCenter">返回画布中心位置</button>
</template>
<script lang="ts" setup>
import { ref } from "vue";

const dawnFlowRef = ref(null);

const backCenter = () => {
  dawnFlowRef.value.backCenterClick();
};
</script>

4.8：撤销上一步操作

  • 方法名称：revokeClick
  • 作用：撤销上一步操作
  • 类型：Function
  • 默认值：() => {}

示例

ts 复制代码 
<template>
  <dawnFlow ref="dawnFlowRef"></dawnFlow>
  <button @click="revoke">撤销上一步操作</button>
</template>
<script lang="ts" setup>
import { ref } from "vue";

const dawnFlowRef = ref(null);

const revoke = () => {
  dawnFlowRef.value.revokeClick();
};
</script>

4.9：模式切换

  • 方法名称：setPreviewState
  • 作用：切换模式，可切换为编辑模式和预览模式
  • 类型：Function
  • 默认值：(boolean) => {}

示例

ts 复制代码 
<template>
  <dawnFlow ref="dawnFlowRef"></dawnFlow>
  <button @click="switchPreviewState">切换模式</button>
</template>
<script lang="ts" setup>
import { ref } from "vue";

const dawnFlowRef = ref(null);

const switchPreviewState = (isPreview) => {
  dawnFlowRef.value.setPreviewState(isPreview);
};
</script>

五、事件

5.1：节点双击事件

  • 事件名称：currentNodeDoubleClick
  • 作用：节点双击事件，可用于在节点双击时触发自定义操作
  • 类型：Function(nodeData:[])
  • 默认值：(nodeData:[]) => {}

示例

ts 复制代码 
<template>
  <dawnFlow @currentNodeDoubleClick="currentNodeClick"></dawnFlow>
</template>
<script lang="ts" setup>
const currentNodeClick = (nodeData) => {
  //打印节点数据
  console.log(nodeData);
};
</script>

5.2：连线双击事件

  • 事件名称：currentEdgeDoubleClick
  • 作用：连线双击事件，可用于在连线双击时触发自定义操作
  • 类型：Function(edgeData:[])
  • 默认值：(edgeData:[]) => {}

示例

ts 复制代码 
<template>
  <dawnFlow @currentEdgeDoubleClick="currentEdgeClick"></dawnFlow>
</template>
<script lang="ts" setup>
const currentEdgeClick = (edgeData) => {
  //打印连线数据
  console.log(edgeData);
};
</script>

六、定制开发

如果当前插件不能满足你的需求，你可以定制开发，进行定制开发。

作者 qq:1652794307。

作者微信：cf_bzsmn。

定制开发的费用根据项目的复杂程度和功能的数量而不同。

七、源码出售

源码出售仅需￥ 998 元。

作者 qq:1652794307。

作者微信：cf_bzsmn。

八、讨论群

作者会在群里回答你的问题，也会分享插件的使用经验。

qq 群号：801913255。

九、文档地址

文档地址：http://139.155.137.144:8871

在线演示：http://139.155.137.144:8870

注：文档中有插件的使用说明

十、下载示例

https://gitee.com/yangguangchenjie/vue-dawn-flow

有兴趣的朋友，请关注我微信公众号吧(▽)。

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

相关推荐
陈逸子风1 年前
（系列十三）Vue3+Echarts搭建超好看的系统面板
vue3·webapi·权限·流程·表单
陈逸子风1 年前
（系列十二）Vue3+.Net8实现用户登录（超详细登录文档）
vue3·webapi·权限·流程·表单
陈逸子风1 年前
（系列十一）Vue3框架中路由守卫及请求拦截（实现前后端交互）
vue3·webapi·权限·流程·表单
陈逸子风1 年前
（系列五）.net8 中使用Dapper搭建底层仓储连接数据库（附源码）
vue3·webapi·权限·流程
文火冰糖的硅基工坊1 年前
[产品管理-39]：什么是指标、规格、标准？什么是产品指标？什么是产品的设计指标? 什么是产品的技术指标？
产品经理·产品·思维·流程·战略
陈逸子风1 年前
从0到1搭建权限管理系统系列四 .net8 中Autofac的使用（附源码）
vue3·webapi·权限·流程·表单
文火冰糖的硅基工坊1 年前
[产品管理-34]：什么是战略？什么是公司战略？什么是产品战略？什么是创新战略？什么是技术战略？什么是产品创新战略？
产品经理·管理·创业·流程·战略
陈逸子风1 年前
从0到1搭建权限管理系统系列三 .net8 JWT创建Token并使用
vue3·webapi·权限·流程
文火冰糖的硅基工坊1 年前
[产品管理-15]：NPDP新产品开发 - 13 - 产品创新流程 - 具体产品的创新流程：精益生产与敏捷开发
产品经理·创业·流程·创新
热门推荐
01GitHub 镜像站点02UV安装并设置国内源03BongoCat - 跨平台键盘猫动画工具04综合整理：pdf预览显示：你尝试预览的文件可能对你的计算机有害。如果你信任此文件以及其来源，请打开此文件以看其内容，如何解决以正常预览文件05Linux下V2Ray安装配置指南06安娜的档案(Anna’s Archive) 镜像网站/国内最新可访问入口（持续更新）07jdk21下载、安装（Windows、Linux、macOS）08《大数据技术原理与应用》实验报告三 熟悉HBase常用操作09PyCharm 社区版全平台安装指南10npm使用国内淘宝镜像的方法