动态

详情

返回

精美的vue流程設計器 - 动态详情

03:17 下午 · 11月 08 ,2025

一、vue-dawn-flow介紹

vue-dawn-flow是一款功能強大的開源流程設計器，專為 Vue.js 生態打造，完美兼容 Vue 2 和 Vue 3 框架。並且能很好的兼容vue前端所有框架。

1.1插件功能

提供了一個可視化的流程設計器，你可以在設計器中拖拽組件，連接組件，設置組件屬性。
提供了多種節點類型可共篩選。
提供了節點的相關操作，比如添加、刪除、複製、粘貼、撤銷節點。
提供了連線的相關操作，比如刪除、撤銷連線。
提供了導出流程圖片、清空流程、預覽模式等相關功能。
提供了相關的事件回調，你可以在事件回調中處理流程相關的邏輯。
提供了相關的屬性，你可以在屬性中設置組件的相關屬性。
提供了相關的方法，你可以在方法中調用相關的功能。

二、快速開始

2.1：安裝方式

npm i vue-dawn-flow

或者

yarn add vue-dawn-flow

2.2：全局註冊

在 main.js 或 main.ts 中全局註冊 vue-dawn-flow 插件

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 頁面，添加如下代碼

<template>
  <dawnFlow></dawnFlow>
</template>

2.4：示例圖

三、屬性

3.1：節點欄

屬性名稱：NodeBar
作用：控制節點欄是否顯示、右邊節點屬性欄是否顯示
類型：Boolean
默認值：true

示例

<template>
  <dawnFlow :NodeBar="true"></dawnFlow>
</template>

3.2：工具欄

屬性名稱：ToolBar
作用：控制是否顯示
類型：Boolean
默認值：true

示例

<template>
  <dawnFlow :ToolBar="true"></dawnFlow>
</template>

3.3：模式切換

屬性名稱：isPreview
作用：是否預覽模式
類型：Boolean
默認值：false

示例

<template>
  <dawnFlow :isPreview="true"></dawnFlow>
</template>

四、方法

4.1：導出流程圖片

方法名稱：downloadImageClick
作用：下載圖片
類型：Function
默認值：() => {}

示例

<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
默認值：() => {}

示例

<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
默認值：() => {}

示例

<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
默認值：() => {}

示例

<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
默認值：() => {}

示例

<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
默認值：() => {}

示例

<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
默認值：() => {}

示例

<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
默認值：() => {}

示例

<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) => {}

示例

<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:[]) => {}

示例

<template>
  <dawnFlow @currentNodeDoubleClick="currentNodeClick"></dawnFlow>
</template>
<script lang="ts" setup>
const currentNodeClick = (nodeData) => {
  //打印節點數據
  console.log(nodeData);
};
</script>

5.2：連線雙擊事件

事件名稱：currentEdgeDoubleClick
作用：連線雙擊事件，可用於在連線雙擊時觸發自定義操作
類型：Function(edgeData:[])
默認值：(edgeData:[]) => {}

示例

<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

有興趣的朋友，請關注我微信公眾號吧(^▽)。

關注我：一個全棧多端的寶藏博主，定時分享技術文章，不定時分享開源項目。關注我，帶你認識不一樣的程序世界

前端

陳逸子風日志

@cyzf

标签

前端 (1158)

动态

精美的vue流程設計器 - 动态详情

一、vue-dawn-flow介紹

1.1插件功能

二、快速開始

2.1：安裝方式

2.2：全局註冊

2.3：頁面使用

2.4：示例圖

三、屬性

3.1：節點欄

3.2：工具欄

3.3：模式切換

四、方法

4.1：導出流程圖片

4.2：獲取流程數據

4.3：設置流程數據

4.4：刪除流程

4.5：刪除選中節點

4.6：刪除選中連線

4.7：返回畫布中心位置

4.8：撤銷上一步操作

4.9：模式切換

五、事件

5.1：節點雙擊事件

5.2：連線雙擊事件

六、定製開發

七、源碼出售

八、討論羣

九、文檔地址

十、下載示例

Add a new 评论

陳逸子風 日志

@cyzf

标签

前端 (1158)

动态

精美的vue流程設計器 - 动态 详情

一、vue-dawn-flow介紹

1.1插件功能

二、快速開始

2.1：安裝方式

2.2：全局註冊

2.3：頁面使用

2.4：示例圖

三、屬性

3.1：節點欄

3.2：工具欄

3.3：模式切換

四、方法

4.1：導出流程圖片

4.2：獲取流程數據

4.3：設置流程數據

4.4：刪除流程

4.5：刪除選中節點

4.6：刪除選中連線

4.7：返回畫布中心位置

4.8：撤銷上一步操作

4.9：模式切換

五、事件

5.1：節點雙擊事件

5.2：連線雙擊事件

六、定製開發

七、源碼出售

八、討論羣

九、文檔地址

十、下載示例

Add a new 评论

陳逸子風日志

精美的vue流程設計器 - 动态详情